/* ScreenCrowd pSEO show pages (Phase 1, 2026-08-07).
   Loaded ALONGSIDE tokens.css + styles.css, never instead of them -- every
   class here reaches for the same --sc-*/legacy tokens the rest of the
   landing site uses so show pages match the design system exactly. This
   file only adds the handful of components styles.css has no use for
   (poster hero, next-episode card, ratings chart, season accordion, show
   grids). Used by: landing/show/*/index.html, landing/shows/**. */

/* ---------- breadcrumb / back link ---------- */
.show-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--sc-body-sm-size, 0.8rem);
  color: var(--text-faint);
  margin-bottom: var(--space-4);
}
.show-crumbs a { color: var(--text-soft); text-decoration: none; }
.show-crumbs a:hover { color: var(--text); text-decoration: underline; }

/* ---------- show hero (poster + facts) ---------- */
.show-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 640px) {
  .show-hero { grid-template-columns: 128px 1fr; gap: var(--space-4); }
}
.show-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.show-poster-fallback {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  padding: var(--space-3);
}
.show-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: var(--space-2);
}
.show-subline {
  color: var(--text-soft);
  font-size: 1rem;
  margin-bottom: var(--space-4);
}
.show-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--chip-bg, var(--bg-raised));
  color: var(--chip-fg, var(--text-soft));
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.sc-chip.is-status-running { color: var(--sc-status-good); border-color: var(--sc-status-good); }
.sc-chip.is-status-ended { color: var(--text-faint); }
.sc-chip.is-genre a { color: inherit; text-decoration: none; }
/* ---------- watch chip (Phase 8) ----------
   Self-contained brand-color wordmark chips, no logo art files -- colors
   set inline per-service in build-show-pages.mjs (watchChipHtml), this
   file only owns layout/shape so every chip renders as the same pill
   regardless of which service's colors get applied. */
.watch-chip-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-4);
}
.watch-chip-prefix {
  font-size: 0.8rem;
  color: var(--text-faint);
}
.watch-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: filter var(--dur-fast) var(--ease-out);
}
a.watch-chip:hover { filter: brightness(1.12); }
.watch-chip-neutral {
  background: var(--bg-raised);
  color: var(--text-soft);
  border: 1px solid var(--border);
  text-transform: none;
  font-weight: 700;
}

.show-official-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.show-official-link:hover { color: var(--text); }
.show-summary {
  color: var(--text-soft);
  max-width: 60ch;
  line-height: 1.6;
}

/* ---------- next episode ---------- */
.next-episode-card {
  background: var(--sc-surface-inverse);
  color: var(--sc-text-on-inverse);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.next-episode-info .eyebrow { color: var(--yellow); }
.next-episode-name {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  margin: 0.2rem 0 0.35rem;
}
.next-episode-meta {
  color: rgba(245, 242, 232, 0.72);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}
.next-episode-date { font-weight: 600; }
.next-episode-countdown {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.next-episode-card .btn-primary { flex: none; }
.next-episode-sentence {
  margin-top: 0.6rem;
  max-width: 42ch;
  font-size: 0.85rem;
  color: rgba(245, 242, 232, 0.72);
}
.show-status-sentence {
  color: var(--text-soft);
  font-size: 0.92rem;
}
.show-summary-lead { font-weight: 600; color: var(--text); }

/* ---------- CTA row ---------- */
.show-cta-row { display: flex; justify-content: center; padding: var(--space-6) 0; }

/* ---------- ratings chart ---------- */
.ratings-chart-wrap { overflow-x: auto; }
.ratings-chart-wrap svg { width: 100%; height: auto; display: block; }
.ratings-chart-line { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ratings-chart-divider { stroke: var(--grid-line); stroke-width: 1; }
.ratings-chart-axis { stroke: var(--border); stroke-width: 1; }
.ratings-chart-label { fill: var(--text-faint); font-size: 10px; font-family: var(--font-body); }
.ratings-chart-avg { fill: var(--text); font-size: 12px; font-weight: 700; font-family: var(--font-body); }

/* ---------- season accordion ---------- */
.season-list { display: flex; flex-direction: column; gap: 0.6rem; }
.season-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  overflow: hidden;
}
.season-item summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.season-item summary::-webkit-details-marker { display: none; }
.season-item summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--text-faint);
  flex: none;
}
.season-item[open] summary::after { content: "\2212"; }
.season-item summary .season-count { font-weight: 400; color: var(--text-faint); font-size: 0.82rem; font-family: var(--font-body); }
.episode-rows { border-top: 1px solid var(--border); }
.episode-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.episode-row:last-child { border-bottom: none; }
.episode-row-num { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.episode-row-name { color: var(--text); }
.episode-row-date { color: var(--text-faint); font-size: 0.8rem; white-space: nowrap; text-align: right; }

/* ---------- show grids (index + genre hubs) ---------- */
.show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}
.show-card { text-decoration: none; color: inherit; display: block; }
.show-card-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 0.45rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.show-card:hover .show-card-poster { transform: translateY(-2px); }
.show-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.show-card-meta { font-size: 0.72rem; color: var(--text-faint); }

.genre-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.genre-hub-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.genre-hub-card:hover { border-color: var(--text); }
.genre-hub-card h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.genre-hub-card p { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- attribution (non-negotiable on every show/hub page) ---------- */
.attribution-note {
  color: var(--text-faint);
  font-size: 0.78rem;
}
.attribution-note a { color: var(--text-faint); text-decoration: underline; text-underline-offset: 2px; }
.attribution-note a:hover { color: var(--text-soft); }