/* =============================================
   ACADEMY PREP — hero-video.css
   Hero video slideshow + Student Life tall-photo video.
   Additive: loaded after home-styles.css, home page only.
   ============================================= */

/* ─── HERO SLIDES ───────────────────────────── */
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s linear 1s;z-index:0}
.hero__slide.is-active{opacity:1;visibility:visible;transition:opacity 1s ease,visibility 0s;z-index:1}
.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__slide .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transition:opacity .8s ease;pointer-events:none;background:transparent}
.hero__video.is-playing{opacity:1}
.hero__overlay{z-index:2}
.hero__particles{z-index:2}  /* keep decorative circles above the slides, as before */

/* ─── PLAYER ────────────────────────────────── */
.hero__player{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:50px;
  background:rgba(20,6,16,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
}
.hero__pbtn{
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;transition:background .2s,transform .2s;
}
.hero__pbtn:hover{background:var(--primary,#fcbe15);color:#2a0f1f;transform:scale(1.08)}
.hero__pbtn:focus-visible,.hero__dot:focus-visible,.life-cell__vctrl:focus-visible{outline:2px solid var(--primary,#fcbe15);outline-offset:2px}
.hero__pbtn--toggle .i-play{display:none}
.hero__pbtn--toggle.is-paused .i-play{display:block}
.hero__pbtn--toggle.is-paused .i-pause{display:none}

.hero__dots{display:flex;align-items:center;gap:8px;padding:0 4px}
.hero__dot{
  position:relative;width:10px;height:10px;padding:0;border:0;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.4);overflow:hidden;transition:width .4s ease,background .3s;
}
.hero__dot:hover{background:rgba(255,255,255,.7)}
.hero__dot.is-active{width:44px;background:rgba(255,255,255,.35)}
.hero__dot-fill{position:absolute;inset:0;background:var(--primary,#fcbe15);transform:scaleX(0);transform-origin:left center;border-radius:inherit}
.hero__dot.is-active .hero__dot-fill{transform:scaleX(var(--p,0))}

/* sit the player left of the scroll hint on wide screens */
@media (min-width:769px){.hero__player{bottom:34px}}
@media (max-width:768px){
  .hero__player{bottom:16px;gap:8px;padding:6px 10px}
  .hero__pbtn{width:30px;height:30px}
  .hero__dot.is-active{width:34px}
}

/* ─── STUDENT LIFE — TALL PHOTO VIDEO ───────── */
.life-cell .life-cell__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease,transform .55s var(--ease,ease);pointer-events:none;
}
.life-cell__video.is-playing{opacity:1}

/* Explicit stacking so the cover photo, hover tint and caption can never sit on top of the video */
.life-cell--tall > img{position:relative;z-index:0;transition:transform .55s var(--ease,ease),opacity .6s ease}
.life-cell--tall .life-cell__video{z-index:1}
.life-cell--tall::after{z-index:1}
.life-cell--tall .life-cell__label{z-index:2}
.life-cell--tall .life-cell__vctrl{z-index:3}
/* once the video is playing the cover is hidden and the hover tint becomes a light caption scrim */
.life-cell--tall.is-video-playing > img{opacity:0}
.life-cell--tall.is-video-playing::after{background:linear-gradient(to top,rgba(107,54,82,.5) 0%,transparent 38%)}
.life-cell:hover .life-cell__video{transform:scale(1.08)}
.life-cell__vctrl{
  position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(20,6,16,.5);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s,transform .2s;
}
.life-cell__vctrl[hidden]{display:none}
.life-cell__vctrl:hover{background:var(--primary,#fcbe15);color:#2a0f1f;transform:scale(1.08)}
.life-cell__vctrl .i-play{display:none}
.life-cell__vctrl.is-paused .i-play{display:block}
.life-cell__vctrl.is-paused .i-pause{display:none}

@media (prefers-reduced-motion:reduce){
  .hero__slide,.hero__slide.is-active,.hero__video,.life-cell__video{transition:none}
}


/* =============================================
   HERO LAYOUT FOR VIDEO BACKGROUNDS
   Left-aligned editorial layout: text sits in a left column over a
   plum scrim, the right side stays open so the video can be seen.
   Switch back to the centred layout with the editor field
   "Hero: Text Alignment" = center (data-hero-align="center").
   All rules are scoped to .hero[data-hero-slider] so no other page
   or hero is affected.
   ============================================= */

/* Shared (both alignments): calmer decoration + legible text over motion */
.hero[data-hero-slider] .hero__particles{opacity:.3}
.hero[data-hero-slider] .hero__title,
.hero[data-hero-slider] .hero__sub{text-shadow:0 2px 24px rgba(10,2,8,.35)}

/* Centred option: soft radial scrim + bottom fade instead of the old diagonal */
.hero[data-hero-slider][data-hero-align="center"] .hero__overlay{
  background:
    linear-gradient(0deg,rgba(20,6,16,.55) 0%,rgba(20,6,16,0) 32%),
    radial-gradient(ellipse at 50% 45%,rgba(40,12,30,.66) 0%,rgba(20,6,16,.4) 70%);
}

/* ── Mobile / small tablet: full-width text, so darken evenly top→bottom ── */
.hero[data-hero-slider] .hero__overlay{
  background:linear-gradient(180deg,rgba(40,12,30,.62) 0%,rgba(40,12,30,.74) 55%,rgba(20,6,16,.86) 100%);
}
.hero[data-hero-slider] .hero__content{padding-bottom:96px}
.hero[data-hero-slider] .hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;width:100%;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-top:1px solid rgba(255,255,255,.22);border-radius:0;padding-top:16px;overflow:visible;
}
.hero[data-hero-slider] .hstat{display:grid;grid-template-columns:auto 1fr;align-items:baseline;justify-items:start;column-gap:2px;width:auto;padding:0;border:0;background:none}
.hero[data-hero-slider] .hstat:hover{background:none}
.hero[data-hero-slider] .hstat:last-child{border:0}
.hero[data-hero-slider] .hstat__n{font-size:1.7rem}
.hero[data-hero-slider] .hstat__u{font-size:1.05rem}
.hero[data-hero-slider] .hstat__l{grid-column:1/-1;margin-top:6px;font-size:.6rem;line-height:1.3}
.hero[data-hero-slider] .hstat__sep{display:none}

/* ── Desktop & tablet landscape: left-aligned editorial layout ── */
@media (min-width:769px){
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__overlay{
    background:
      linear-gradient(0deg,rgba(20,6,16,.55) 0%,rgba(20,6,16,0) 30%),
      linear-gradient(90deg,rgba(54,18,40,.9) 0%,rgba(54,18,40,.7) 34%,rgba(20,6,16,.24) 68%,rgba(0,0,0,.06) 100%);
  }
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__content{
    max-width:var(--max-w);margin-left:auto;margin-right:auto;
    align-items:flex-start;text-align:left;
  }
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__badge{margin:0 0 22px}
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__title{
    text-align:left;margin:0 0 20px;max-width:11em;
    font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.08;
  }
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__sub{
    text-align:left;margin:0 0 30px;max-width:30em;font-size:1.05rem;
  }
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__actions{justify-content:flex-start;margin-bottom:44px}
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hero__stats{
    width:auto;margin:0;justify-content:flex-start;grid-template-columns:repeat(3,auto);gap:0 44px;
  }
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hstat__n{font-size:2rem}
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hstat__u{font-size:1.2rem}
  .hero[data-hero-slider]:not([data-hero-align="center"]) .hstat__l{font-size:.64rem}
}

/* Small phones */
@media (max-width:480px){
  .hero[data-hero-slider] .hero__title{font-size:2.3rem}
  .hero[data-hero-slider] .hstat__n{font-size:1.45rem}
}

/* ── Mobile: the player sits BELOW the hero content in normal flow ──
   (it used to float over the bottom of the hero and covered the stat labels on short screens) */
@media (max-width:768px){
  .hero[data-hero-slider]{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .hero[data-hero-slider] .hero__content{width:100%;flex:0 0 auto;margin-top:auto;margin-bottom:auto;padding-bottom:24px}
  .hero[data-hero-slider] .hero__player{
    position:relative;left:auto;right:auto;bottom:auto;transform:none;
    align-self:center;margin:0 0 20px;
  }
}

/* Small phones: a slightly more compact player so it never meets the WhatsApp button */
@media (max-width:480px){
  .hero[data-hero-slider] .hero__player{gap:6px;padding:6px 10px}
  .hero[data-hero-slider] .hero__pbtn{width:28px;height:28px}
  .hero[data-hero-slider] .hero__dot.is-active{width:28px}
}