/* ============================================================
 * Blog / long-form content tools — element renderer styles.
 *
 * Covers the new content/blog/SEO elements:
 *   .el-toc            — Table of Contents (sticky / collapsible)
 *   .el-reading-time   — auto-calculated read-time pill
 *   .el-pull-quote     — editorial pull quote w/ share-as-image
 *   .el-rss            — external RSS / Atom feed reader
 *   .el-flipbook       — page-turn brochure viewer
 *
 * All visuals cascade from --site-* tokens (set on the site root by
 * ThemeProvider). No hex values live in this file — every color, radius,
 * font-size and shadow resolves through theme tokens.
 * ============================================================ */

/* ─── Table of Contents ───────────────────────────────────── */
.el-toc {
  --toc-active: var(--site-accent, var(--site-fg, currentColor));
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2, 0.5rem);
  --el-padding-default: var(--site-space-4, 1rem);
  background: var(--el-bg, var(--site-surface, transparent));
  color: var(--site-fg, inherit);
  border: 1px solid var(--site-border, transparent);
  border-radius: var(--site-radius-md, 8px);
  font-size: var(--site-body-small-font-size, 0.875rem);
  line-height: 1.45;
}
.el-toc--top-of-page-collapsible {
  position: relative;
  top: auto;
}
.el-toc__title {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-2, 0.5rem);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--site-fg, inherit);
  font-weight: 600;
  font-size: var(--site-body-font-size, 1rem);
  letter-spacing: 0.02em;
}
.el-toc__chevron {
  opacity: 0.6;
  font-weight: 400;
}
.el-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--site-border, transparent);
}
.el-toc__item {
  position: relative;
  padding: 4px 0 4px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.el-toc__item--l3 { padding-left: 22px; }
.el-toc__item--l4 { padding-left: 32px; opacity: 0.85; }
.el-toc__item.is-active {
  border-left-color: var(--toc-active);
  color: var(--toc-active);
}
.el-toc__link {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.el-toc__link:hover {
  opacity: 0.85;
  background: var(--toc-link-hover-bg, transparent);
  color: var(--toc-link-hover-color, inherit);
}

.el-toc--collapse-mobile { /* default — full at desktop */ }
@container site style(--site-bp: mobile) {
  .el-toc--collapse-mobile,
  .el-toc--collapse-tablet,
  .el-toc--collapse-always { gap: 0; }
  .el-toc--collapse-mobile .el-toc__list,
  .el-toc--collapse-tablet .el-toc__list { display: none; }
  .el-toc--collapse-mobile[aria-expanded='true'] .el-toc__list,
  .el-toc--collapse-tablet[aria-expanded='true'] .el-toc__list { display: flex; }
}
@media (max-width: 768px) {
  .el-toc--collapse-mobile,
  .el-toc--collapse-tablet,
  .el-toc--collapse-always { gap: 0; }
  .el-toc--collapse-mobile .el-toc__list,
  .el-toc--collapse-tablet .el-toc__list { display: none; }
  .el-toc--collapse-mobile[aria-expanded='true'] .el-toc__list,
  .el-toc--collapse-tablet[aria-expanded='true'] .el-toc__list { display: flex; }
}
.el-toc--collapse-always .el-toc__list { display: none; }
.el-toc--collapse-always[aria-expanded='true'] .el-toc__list { display: flex; }

/* ─── Reading Time ────────────────────────────────────────── */
.el-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--site-fg, inherit);
  font-size: var(--site-body-small-font-size, 0.875rem);
  line-height: 1.2;
}
.el-reading-time--pill {
  --el-padding-default: 4px 10px;
  background: var(--el-bg, var(--site-surface, transparent));
  border: 1px solid var(--site-border, transparent);
  border-radius: 9999px;
}
.el-reading-time--banner {
  display: flex;
  width: 100%;
  --el-padding-default: 10px 14px;
  background: var(--el-bg, var(--site-surface, transparent));
  border-left: 3px solid var(--site-accent, currentColor);
  border-radius: var(--site-radius-sm, 4px);
}
.el-reading-time__icon {
  flex: 0 0 auto;
  color: var(--site-accent, currentColor);
}

/* ─── Pull Quote ──────────────────────────────────────────── */
.el-pull-quote {
  position: relative;
  margin: var(--site-space-6, 1.5rem) 0;
  --el-padding-default: var(--site-space-6, 1.5rem) var(--site-space-5, 1.25rem);
  background: var(--el-bg, transparent);
  color: var(--site-fg, inherit);
}
.el-pull-quote--large { text-align: center; }
.el-pull-quote--side-margin { padding-left: var(--site-space-8, 2rem); border-left: 4px solid var(--site-accent, currentColor); }
.el-pull-quote--full-width-banner {
  background: var(--el-bg, var(--site-surface, transparent));
  border-radius: var(--site-radius-md, 8px);
  --el-padding-default: var(--site-space-8, 2rem);
}
.el-pull-quote__quote {
  font-family: var(--site-heading-font, inherit);
  font-size: clamp(1.4rem, 2.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.el-pull-quote__open,
.el-pull-quote__close {
  color: var(--site-accent, currentColor);
  font-weight: 700;
  margin: 0 4px;
}
.el-pull-quote__attribution {
  margin-top: var(--site-space-3, 0.75rem);
  font-size: var(--site-body-small-font-size, 0.875rem);
  opacity: 0.7;
}
.el-pull-quote__actions { margin-top: var(--site-space-3, 0.75rem); }
.el-pull-quote__share {
  background: transparent;
  color: var(--site-accent, currentColor);
  border: 1px solid var(--site-accent, currentColor);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: var(--site-body-small-font-size, 0.875rem);
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.el-pull-quote__share[disabled] { opacity: 0.6; cursor: progress; }
.el-pull-quote__share:hover { opacity: 0.85; }

/* Off-screen render shell — positioned absolutely so it doesn't take layout. */
.el-pull-quote__render-shell {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.el-pull-quote__render {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 80px;
  background: var(--site-surface, var(--site-bg, transparent));
  color: var(--site-fg, currentColor);
  font-family: var(--site-heading-font, inherit);
  text-align: center;
  box-sizing: border-box;
}
.el-pull-quote__render-logo { max-height: 60px; max-width: 240px; object-fit: contain; }
.el-pull-quote__render-text { font-weight: 700; line-height: 1.2; }
.el-pull-quote__render-attribution { opacity: 0.7; }

/* ─── RSS Reader ──────────────────────────────────────────── */
.el-rss { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--site-space-4, 1rem); }
.el-rss--grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.el-rss--list { grid-template-columns: minmax(0, 1fr); }
.el-rss--compact {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--site-space-2, 0.5rem);
}
.el-rss__item {
  background: var(--site-surface, transparent);
  border: 1px solid var(--site-border, transparent);
  border-radius: var(--site-radius-md, 8px);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.el-rss__item:hover {
  transform: translateY(-2px);
  border-color: var(--site-accent, currentColor);
}
.el-rss__link {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.el-rss__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--site-surface, transparent);
}
.el-rss__body {
  padding: var(--site-space-3, 0.75rem) var(--site-space-4, 1rem);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.el-rss__title {
  margin: 0;
  font-size: var(--site-body-font-size, 1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--site-fg, inherit);
  overflow-wrap: break-word;
  word-break: break-word;
}
.el-rss__description {
  margin: 0;
  font-size: var(--site-body-small-font-size, 0.875rem);
  opacity: 0.75;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.el-rss__date {
  font-size: 0.75rem;
  opacity: 0.6;
}
.el-rss--loading .el-rss__skeleton {
  height: 180px;
  background: var(--site-surface, transparent);
  border: 1px solid var(--site-border, transparent);
  border-radius: var(--site-radius-md, 8px);
  position: relative;
  overflow: hidden;
}
.el-rss--loading .el-rss__skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--site-border, transparent), transparent);
  animation: el-rss-shimmer 1.4s infinite;
}
@keyframes el-rss-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.el-rss--empty,
.el-rss--error {
  padding: var(--site-space-4, 1rem);
  text-align: center;
  color: var(--site-fg, inherit);
  opacity: 0.7;
  background: var(--site-surface, transparent);
  border-radius: var(--site-radius-md, 8px);
}

/* ─── Document Flipbook ──────────────────────────────────── */
.el-flipbook {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-3, 0.75rem);
  align-items: center;
  outline: none;
  --flipbook-accent: var(--site-accent, currentColor);
}
.el-flipbook__stage {
  position: relative;
  width: var(--flipbook-width, 360px);
  height: var(--flipbook-height, 520px);
  perspective: 1800px;
  transform-style: preserve-3d;
}
.el-flipbook__page {
  position: absolute;
  inset: 0;
  background: var(--site-surface, transparent);
  border-radius: var(--site-radius-md, 8px);
  box-shadow: var(--site-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.18));
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.1, 1);
  backface-visibility: hidden;
  overflow: hidden;
}
.el-flipbook__page.is-turned { transform: rotateY(-180deg); }
.el-flipbook__image {
  width: 100%;
  height: 100%;
  object-fit: var(--flipbook-object-fit, cover);
  display: block;
}
.el-flipbook__controls {
  display: flex;
  align-items: center;
  gap: var(--site-space-3, 0.75rem);
}
.el-flipbook__nav,
.el-flipbook__fullscreen {
  background: transparent;
  border: 1px solid var(--site-border, currentColor);
  color: var(--site-fg, inherit);
  border-radius: 9999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.el-flipbook__nav:hover:not([disabled]),
.el-flipbook__fullscreen:hover { border-color: var(--flipbook-accent); color: var(--flipbook-accent); }
.el-flipbook__nav[disabled] { opacity: 0.4; cursor: not-allowed; }
.el-flipbook__counter {
  font-variant-numeric: tabular-nums;
  font-size: var(--site-body-small-font-size, 0.875rem);
  opacity: 0.7;
}
.el-flipbook--empty {
  padding: var(--site-space-6, 1.5rem);
  text-align: center;
  background: var(--site-surface, transparent);
  border-radius: var(--site-radius-md, 8px);
  color: var(--site-fg, inherit);
  opacity: 0.7;
}

@container site style(--site-bp: mobile) {
  .el-flipbook__stage {
    width: min(100%, var(--flipbook-width, 360px));
    height: auto;
    aspect-ratio: var(--flipbook-width, 360) / var(--flipbook-height, 520);
  }
}
@media (max-width: 768px) {
  .el-flipbook__stage {
    width: min(100%, var(--flipbook-width, 360px));
    height: auto;
    aspect-ratio: var(--flipbook-width, 360) / var(--flipbook-height, 520);
  }
}