/* Home hero (spec §6/§6a, amended 2026-08-20): one featured film per
   slide, max 3 slides, CROSSFADE between slides (no sliding track).
   Auto-advances every 5s until any manual action (arrow / dot / swipe)
   stops it for good. Slides stack in one grid cell; slide 1 is
   server-rendered and visible by default, so the page works fully
   without JS — main.js drives .is-active/.is-off from there. */
.hero{position:relative;background:#000;color:#fff;overflow:hidden;--stub-notch:#000}
.hero-track{display:grid;touch-action:pan-y}
.hero-slide{grid-area:1/1;position:relative;min-height:388px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px 16px 52px;opacity:0;pointer-events:none;
  transition:opacity .6s ease}
.hero-slide:first-child{opacity:1;pointer-events:auto}
.hero-slide.is-off{opacity:0;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-slide .bg{position:absolute;inset:0;z-index:0}
.hero-slide .bg img{width:100%;height:100%;object-fit:cover}
.hero-slide .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.45) 55%,#000 96%)}
.hero-slide--plain .bg{background:radial-gradient(120% 140% at 70% 0%,#31435f 0%,#1c2740 50%,#0b101c 100%)}
.hero-slide>*{position:relative;z-index:1}

.hero-slide .kicker{color:var(--red)}
.hero-slide .kicker--gold{color:var(--gold)}
.hero-slide h2{font-size:42px;line-height:.95;margin:8px 0 6px;font-weight:400}
.hero-slide h2 a{color:#fff;text-decoration:none}
.hero-slide .meta{font-size:13px;color:var(--tint)}
.hero-slide .times{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:14px}
.hero-slide .times .more{color:#fff;font-weight:600;font-size:13px;white-space:nowrap}

/* Nav group: on mobile the dots sit bottom-left and the arrows pair
   bottom-right; on desktop the dots move BETWEEN the arrows (‹ ·· ›)
   in one bottom-right cluster — flex order does the swap. */
.hero-nav{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;
  display:none;align-items:center;gap:10px}
.hero-nav>button{width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);background:none;color:#fff;
  font-size:15px;cursor:pointer;line-height:1}
.hero-nav>button:hover{border-color:#fff}
.hero-dots{display:flex;gap:8px;align-items:center;order:-1;margin-right:auto}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;
  cursor:pointer;background:rgba(255,255,255,.35)}
.hero-dots button[aria-current="true"]{background:var(--red)}
body.js .hero--multi .hero-nav{display:flex}

@media (min-width:720px){
  .hero-slide{min-height:540px;padding:120px 48px 44px}
  .hero-slide h2{font-size:92px;margin:10px 0 12px}
  .hero-slide .meta{font-size:16px}
  .hero-slide .times{gap:22px;margin-top:26px}
  .hero-slide .times .more{font-size:15px}
  .hero-nav{left:auto;right:48px;bottom:44px;gap:16px}
  .hero-nav>button{width:40px;height:40px;font-size:18px}
  .hero-dots{order:0;margin-right:0}
  .hero-dots button{width:10px;height:10px}
}