/* ============================================================
   Homepage (WP-N6a) — the hero carousel rules ONLY.
   Ported from the lp branch's landing.css hero carousel, adapted
   from its 2 hard-coded [data-hero] selectors to any number of
   slides (an is-active class on the slide itself), plus the
   pause/play control the lp lacked (WCAG 2.2.2) and a ≥24x24
   hit area around the 9px dots. The Open Air section rules are
   appended here by WP-N6b.
   ============================================================ */

/* Slides absolutely stacked, the active one driven by .is-active;
   nav sits above everything (z-index:6). */
.hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1); }
.hero-slide.is-active{ opacity:1; pointer-events:auto; }
.hero-nav{ position:absolute; z-index:6; right:var(--gut); bottom:36px;
  display:flex; align-items:center; gap:14px; }
.hero-arrow{ width:44px; height:44px; border-radius:999px; cursor:pointer;
  background:rgba(8,8,12,.42); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  transition:background .2s, border-color .2s, transform .2s; }
.hero-arrow:hover{ background:rgba(4,4,7,.62); border-color:rgba(255,255,255,.4); }
.hero-arrow:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
.hero-arrow--pause{ font-size:15px; letter-spacing:.08em; }
.hero-dots{ display:flex; align-items:center; }
/* the dots are 9px visually; the button is a 24x24 hit area they sit in */
.hero-dot{ width:24px; height:24px; border-radius:999px; cursor:pointer; padding:0;
  background:transparent; border:none; display:flex; align-items:center; justify-content:center; }
.hero-dot::before{ content:''; width:9px; height:9px; border-radius:999px;
  background:rgba(255,255,255,.4); transition:background .2s, width .2s; }
.hero-dot:hover::before{ background:rgba(255,255,255,.7); }
.hero-dot:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
.hero-dot[aria-current="true"]::before{ background:var(--pink); width:22px; }

/* image-backed slides (Open Air photo, news portrait): the deeper bottom
   vignette the lp gave its photo slide, so the overlaid text stays legible */
.hero-slide--image .r-hero-grad{ height:82%;
  background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.78) 74%, #000 100%); }
/* news slide: a portrait photo, face in the top of the frame — keep it on
   the visible band when the hero is wide (Jev 2026-10-01: 50% 0) */
.hero-slide--portrait .r-hero-img{ object-position:50% 0; }
.oa-hero-btn{ display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; border:none; white-space:nowrap; background:#fff; color:#000;
  font-family:var(--font-text); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
  padding:13px 20px; transition:background .15s, color .15s; }
.oa-hero-btn:hover{ background:var(--pink); color:#fff; }
.oa-hero-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.oa-hero-btn-a{ font-size:16px; line-height:1; }

/* mobile: dock the nav bottom-centre and reserve a strip so it clears the CTA */
@media (max-width:767px){
  .hero-nav{ right:auto; left:50%; transform:translateX(-50%); bottom:16px; }
  .r-hero-body{ padding-bottom:76px; }
}
@media (prefers-reduced-motion:reduce){ .hero-slide{ transition:none; } .hero-arrow{ transition:none; } }

/* Long slide titles step down (owner 2026-10-01: "a text too big should never be allowed"). Scoped to the
   carousel slides, so today's single hero is untouched. Base sizes mirror responsive.css .r-hero-h1. */
.hero-slide .r-hero-h1{ --hero-h1:80px; font-size:calc(var(--hero-h1) * var(--hero-scale, 1));
  text-wrap:balance; } /* even lines: no lone word on the last line ("…OPEN / AIR") */
@media (min-width:768px){  .hero-slide .r-hero-h1{ --hero-h1:104px; } }
@media (min-width:1024px){ .hero-slide .r-hero-h1{ --hero-h1:120px; } }
@media (min-width:1440px){ .hero-slide .r-hero-h1{ --hero-h1:150px; } }
.hero-slide .r-hero-h1--m{  --hero-scale:.8; }
.hero-slide .r-hero-h1--l{  --hero-scale:.64; line-height:.9; }
.hero-slide .r-hero-h1--xl{ --hero-scale:.52; line-height:.92; }
/* Long subtitles (CMS allows 220; "under ~140 reads best on phones") step down too, and the dark fade
   under carousel text is taller so a tall text block never sits on the bare photo (operator review 2026-10-01). */
.hero-slide .r-hero-sub--long{ font-size:17px; line-height:1.2; }
@media (min-width:1024px){ .hero-slide .r-hero-sub--long{ font-size:22px; } }
.hero-slide .r-hero-grad{ height:78%; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.6) 40%, rgba(0,0,0,.85) 70%, #000); }
@media (min-width:768px){ .hero-slide .r-hero-grad{ height:62%; } }