/* ============================================================================
   Radio Mason — video hero, liquid glass, on-air card, presenter card banners.
   Used by the home page and /presenters, next to hero.js. Relies on the brand
   tokens (--ink, --gold, …) the page already defines. Load it AFTER the page's
   own styles so .hero-video wins over .hero / .head:
     <link rel="stylesheet" href="/hero.css">
   Clips + posters: /hero/ (see hero.js for which plays when).
   ========================================================================== */

/* ---- video hero: full-bleed "Dayparted Sky" loop behind the hero copy ----
   Scrims keep the bottom-left (where the copy sits) dark whatever the clip is doing. */
.hero-video{position:relative;overflow:hidden;min-height:calc(100svh - 108px);display:flex;align-items:flex-end;padding:120px 0 64px;background:var(--ink)}
.hero-video.short{min-height:min(68svh,620px);padding:96px 0 48px}
.hero-video .hv-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero-video .hv-media.on{opacity:1}
.hero-video::before,.hero-video::after{content:"";position:absolute;pointer-events:none;z-index:1}
.hero-video::before{inset:auto 0 0 0;height:75%;background:linear-gradient(to top,var(--ink) 0%,rgba(10,11,16,.62) 45%,transparent)}
.hero-video::after{inset:0 35% 0 0;background:linear-gradient(to right,rgba(10,11,16,.78),rgba(10,11,16,.2) 70%,transparent)}
.hero-video .wrap{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.hero-video .hv-copy{max-width:640px}
.hero-video .lede,.hero-video .hv-copy p{color:rgba(243,241,234,.72)}

/* liquid glass: translucent, blurred, with a light top edge + gold bottom rim */
.glass{background:rgba(243,241,234,.03);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(243,241,234,.12),0 10px 34px rgba(0,0,0,.28);position:relative;overflow:hidden;border:none}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(243,241,234,.45) 0%,rgba(243,241,234,.15) 20%,rgba(243,241,234,0) 40%,rgba(243,241,234,0) 60%,rgba(232,184,75,.2) 80%,rgba(232,184,75,.5) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass.gold::before{background:linear-gradient(180deg,rgba(232,184,75,.6),rgba(232,184,75,.12) 40%,rgba(232,184,75,.12) 60%,rgba(232,184,75,.6))}
.btn.glass{color:var(--text);border:none}
.btn.glass:hover{background:rgba(243,241,234,.08)}

/* on-air card */
.onair{display:flex;align-items:center;gap:13px;border-radius:18px;padding:15px 17px;width:310px;flex:0 0 auto;transition:transform .15s}
.onair:hover{transform:translateY(-2px)}
.onair .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:1.15rem;
  background:linear-gradient(135deg,var(--gold),#b8860b);color:#1a1400;margin:0}
.onair .oa-txt{min-width:0}
.onair .oa-lbl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--live);font-weight:800;display:flex;align-items:center;gap:6px}
.onair .oa-lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);animation:oa-pulse 2s infinite}
.onair .oa-show{font-weight:800;font-size:.98rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onair .oa-who{color:var(--gold);font-size:.82rem;font-weight:700}
.onair .oa-np{color:var(--muted);font-size:.8rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes oa-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,70,.6)}70%{box-shadow:0 0 0 8px rgba(255,59,70,0)}100%{box-shadow:0 0 0 0 rgba(255,59,70,0)}}

/* ---- presenter card banner: the show's clip as a still, plays on hover (desktop) ---- */
.pcard.has-vis{padding:0;overflow:hidden}
.pcard .pvis{position:relative;aspect-ratio:16/7;background:var(--ink2) center/cover no-repeat}
.pcard .pvis video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.pcard .pvis video.on{opacity:1}
.pcard .pvis::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surface) 2%,rgba(22,24,38,.25) 55%,transparent)}
.pcard.has-vis .pbody{padding:0 22px 22px;position:relative;z-index:1}
.pcard.has-vis .av{margin-top:-28px;box-shadow:0 0 0 4px var(--surface)}

@media(max-width:820px){
  .hero-video{padding:90px 0 40px}
  .hero-video .wrap{flex-direction:column;align-items:stretch}
  .onair{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero-video .hv-media,.pcard .pvis video{transition:none}
  .onair .oa-lbl::before{animation:none}
}