/* home-podcast.css — homepage section "Fighters Podcast" (sc04), a copy of the series rail on watch.html
   (page-watch.css "series"), scoped under body.page-home. */
.page-home .home-podcast .series { padding-top: var(--s-6); border-top: 1px solid var(--touw); }
.page-home .home-podcast .series__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: end; margin-bottom: var(--s-5); }
.page-home .home-podcast .series__titles { display: grid; gap: 8px; }
.page-home .home-podcast .series__nav { display: none; gap: 8px; }
@media (min-width: 768px) {
  .page-home .home-podcast .series__head { grid-template-columns: minmax(0, 1fr) auto; }
  .page-home .home-podcast .series__nav { display: flex; }
}
.page-home .home-podcast .series__nav .hscroll__btn[disabled] { opacity: .3; cursor: default; }
.page-home .home-podcast .series .vtile__media img { filter: contrast(1.04) saturate(.92); }

/* client 2026-10-08: the rail runs full width (edge to edge of the viewport); the first tile still lines up with the
   heading, and a scrolled tile snaps back to that same line. --bleed = the gap between the viewport edge and the
   .container content box (no % here: scroll-padding would resolve it against the rail itself) */
.page-home .home-podcast .series__rail {
  --bleed: max(var(--margin), (100vw - var(--max)) / 2);
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}