/* ============================================================
   RadioGrub — hero.css
   The featured banner. Full-bleed, black, with the film behind it.
   ============================================================ */

.heroBanner{
  position:relative;
  margin: 0 0 10px;
  min-height: clamp(420px, 62vh, 640px);
  display:flex; align-items:flex-end;
  border-radius: var(--r28);
  overflow:hidden;
  isolation:isolate;
  background: var(--bgDeep);
}

/* ---- the media layer ---- */
.heroBannerMedia{ position:absolute; inset:0; z-index:0; }
/* The poster is a real background, painted on the first frame. A <video
   poster> only shows while the video is pending, so on a machine that never
   loads the film it would show nothing at all. */
.heroBannerPoster{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 22% 18%, rgba(226,27,35,.24), transparent 62%),
    radial-gradient(900px 500px at 88% 92%, rgba(255,58,67,.16), transparent 60%),
    url('/assets/img/hero-poster.jpg') center/cover no-repeat,
    linear-gradient(145deg, #14141A, #050506 62%);
}
.heroBannerVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%; opacity:0;
  transition: opacity .9s var(--easeOut);
}
/* only once hero.js has seen it actually play */
[data-hero-media="video"] .heroBannerVideo{ opacity:1; }

/* Type has to sit on whatever the film is doing, so the scrim is weighted to
   the bottom-left where the words are and lets the film breathe top-right.
   TUNED ON THE FILM ITSELF, not on the poster: every text element was measured
   against the brightest pixels of frames sampled across the whole 30s cut (the
   outdoor "RADIO" building shots at 22-28s are the hard ones). Desktop worst
   case: headline 4.1:1 (large text, AA needs 3), "We build it with you" 7.2:1,
   lead 7.8:1, note 4.6:1.
   The previous scrim, tuned on the dark studio still, let the headline fall to
   2.0:1 over the daylight shots. If a re-cut is much brighter, re-check. */
.heroBannerScrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(5,5,6,.94) 0%, rgba(5,5,6,.74) 34%, rgba(5,5,6,.34) 68%, rgba(5,5,6,.45) 100%),
    linear-gradient(to right, rgba(5,5,6,.84) 0%, rgba(5,5,6,.5) 45%, transparent 72%);
}

/* ---- the words ---- */
.heroBannerInner{
  position:relative; z-index:1;
  padding: clamp(26px, 4vw, 56px);
  max-width: 760px;
}
.heroBannerKicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:850; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accentText);
  padding:7px 12px; border-radius:999px;
  background: var(--accentSoft); border:1px solid var(--accentLine);
}
.heroBannerKicker::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--accentHot); box-shadow:0 0 10px var(--accentHot);
}
.heroBannerTitle{
  margin:16px 0 0;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 980;
  color: var(--text);
  text-wrap: balance;
}
.heroBannerTitleSub{
  display:block; margin-top:.34em;
  font-size:.46em; line-height:1.1; letter-spacing:-.02em; font-weight:850;
  color: var(--text);
}
/* The red words sit over the film, and red is the colour a scrim helps least.
   MEASURED on the film's frames at the real layout: the old accentHot→accent
   gradient fell to 2.1:1 over the daylight shots once the red moved up to the
   second line ("on the air"). The gradient now bottoms out at --accentText, the
   site's legible-red token: worst pixel 3.6:1 desktop (large text, AA needs 3),
   higher on phones. Keep the darkest stop at or above --accentText. */
.heroBannerTitle em{
  font-style:normal;
  color: var(--accentText);                  /* the fallback where clip:text is unsupported */
  background: linear-gradient(180deg, color-mix(in srgb, var(--accentText) 86%, #fff), var(--accentText));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.heroBannerLead{
  margin:16px 0 0; max-width: 54ch;
  font-size: clamp(15px, 1.25vw, 18px); line-height:1.5;
  font-weight:600; color: var(--muted);
}
.heroBannerCtas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.heroBannerCta{ font-size:15px; padding:14px 22px; }
.heroBannerGhost{
  background: rgba(255,255,255,.06); border-color: var(--line3); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size:15px; padding:14px 22px;
}
.heroBannerGhost:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.heroBannerNote{
  margin:16px 0 0; font-size:13px; font-weight:650; color: var(--muted2); max-width:52ch;
}

@media (max-width: 760px){
  .heroBanner{ min-height: 460px; border-radius: var(--r20); }
  /* On a phone the words cover the whole frame, so the scrim has to as well.
     The limiting element is the RED words — brand red is dark. Measured at the
     real 354px layout on the same frames with this scrim: the red words ≥3.7:1
     (large text, AA needs 3), every white line ≥4.6:1. */
  .heroBannerScrim{
    background:
      linear-gradient(to top, rgba(5,5,6,.93) 0%, rgba(5,5,6,.80) 45%, rgba(5,5,6,.74) 100%),
      linear-gradient(to right, rgba(5,5,6,.26), transparent);
  }
  .heroBannerInner{ padding: 22px 18px 26px; }
  .heroBannerCtas .btn{ width:100%; justify-content:center; }
}