/* =============================================================
   Podcast — /podcast/
   Loaded only by podcast.php. Standalone for the same reason
   events.css is: the classes it shares with other pages —
   .crumbs above all — are redefined here because the other
   stylesheet is not loaded on this page.

   A light page, not the newsroom's dark toggle: that toggle is
   scoped to .news and would leave these tokens half-applied.
   ============================================================= */

.podcast { padding-bottom: 5rem; }

/* ---------- Breadcrumb ---------- */
.podcast .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}
.podcast .crumbs a { color: var(--text-soft); }
.podcast .crumbs a:hover { color: var(--primary); }

/* ---------- Hero ---------- */
/* Carries only the breadcrumb now, so it is a strip rather than the events
   page's full hero: the tinted wash and the shorter padding keep the top of the
   page from reading as a bare margin above the player. */
.podcast-hero {
  padding-block: 1.75rem 0.25rem;
  background:
    radial-gradient(80% 120% at 12% 0%, var(--primary-soft), transparent 60%),
    var(--surface);
}

.podcast-hero .crumbs { margin-bottom: 0; }

/* ---------- Sections ---------- */
.podcast-block { margin-bottom: 3.25rem; }

.podcast-block__title {
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
}
/* The h1 is this same class, so the display font's 800 weight would arrive with
   it. Held to the section-heading size it has always had — it labels the player
   below it, it is not a page title. */
h1.podcast-block__title { font-weight: 700; }

.podcast-empty {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}
.podcast-empty a { color: var(--primary); font-weight: 600; }

/* ---------- One episode ---------- */
.episode {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glass);
}

/* Two across, dropping to one when a 24rem column no longer fits. auto-fit
   rather than a fixed column count so a single episode fills the row it is in
   instead of sitting in half of one, and so the breakpoint follows the card
   rather than a width guessed here.
   align-items: start keeps a card with a short summary its own height rather
   than stretching it to match the tallest in the row. */
.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1.75rem;
  align-items: start;
}

/* The grid is the h1's only content, so the heading needs the air a hero would
   have given it. */
.podcast__body { padding-top: 1.75rem; }

/* ---------- Poster ---------- */
/* aspect-ratio rather than a padding hack: the box is 16:9 before the image
   arrives, so a slow thumbnail does not reflow the page under a reader. The dark
   fill is what shows in that gap. */
.episode__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--secondary);
}

/* The whole poster is the link to YouTube. Absolute so the overlaid play badge
   and runtime chip sit inside it rather than beside it. */
.episode__facade {
  position: absolute;
  inset: 0;
  display: block;
}

.episode__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-std);
}

.episode__facade:hover .episode__poster,
.episode__facade:focus-visible .episode__poster {
  transform: scale(1.03);
  filter: brightness(0.92);
}

/* The play button. Red because it is YouTube's player behind it and a reader
   already knows what that shape does. */
.episode__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  padding-left: 0.25rem;   /* the glyph's own left bearing, optically centred */
  border-radius: var(--radius-pill);
  background: #ff0000;
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s var(--ease-out), background 0.2s var(--ease-std);
}


.episode__facade:hover .episode__play,
.episode__facade:focus-visible .episode__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #cc0000;
}

.episode__length {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.1875rem 0.4375rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Text beside the player ---------- */
.episode__meta { padding: 1.5rem; }

.episode__title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}

.episode__guest {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0 0 0.375rem;
}
.episode__guest strong { color: var(--text); }

.episode__date {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin: 0 0 0.875rem;
  font-variant-numeric: tabular-nums;
}

.episode__summary {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.125rem;
  max-width: 40rem;
}

.episode__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
}
.episode__link::after {
  content: "→";
  transition: transform 0.2s var(--ease-std);
}
.episode__link:hover::after { transform: translateX(3px); }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .podcast-hero { padding-block: 1.25rem 0.25rem; }
  .episode-list { gap: 1.25rem; }
  .episode__meta { padding: 1.25rem; }
  .episode__play { width: 3.25rem; height: 3.25rem; }
}