/* ============================================================
   FOREVER IN FRAME — RESPONSIVE
   Mobile-first base lives in styles.css. Each step below
   expands the experience rather than scaling it.
   ============================================================ */

/* ---------- hero still: mirror pickVariant() -------------- */
/* portrait phones and portrait small tablets get the portrait cut */
@media (max-width:768px){
  .hero-media{background-image:url("../assets/hero/mobile-hero-poster.jpg")}
}
@media (orientation:portrait) and (max-width:1023px){
  .hero-media{background-image:url("../assets/hero/mobile-hero-poster.jpg")}
}

/* ---------- 576px — large mobile -------------------------- */
@media (min-width:576px){
  .cta-row{flex-direction:row;justify-content:center}
  .cta-row .btn{width:auto}
  .field-row{grid-template-columns:1fr 1fr}
  .gal-grid{gap:.9rem}
}

/* ---------- 768px — tablet -------------------------------- */
@media (min-width:768px){
  :root{--header-h:80px}

  .hero{height:270vh}
  .hero-marks{font-size:.65rem}
  .ev{flex-basis:min(42vw,320px)}

  /* tablet only: the lead card runs full width as a 16:9 banner.
     From 1024px up this becomes three equal panels (see below) —
     a full-bleed 16:9 at desktop width swallows the whole viewport. */
  .xp-grid{grid-template-columns:repeat(2,1fr)}
  .xp-card:first-child{grid-column:span 2}
  .xp-card:first-child .xp-media{aspect-ratio:16/9}

  .steps{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .pkg-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(3,1fr)}

  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
  .lead-form{padding:2.2rem}
}

/* ---------- 1024px — desktop ------------------------------ */
@media (min-width:1024px){
  .hero{height:300vh}

  /* header: logo left, nav centre-right, CTA right */
  .burger{display:none}
  .nav-desktop{display:block;margin-left:auto}
  .nav-desktop ul{display:flex;gap:clamp(1.4rem,2.6vw,2.6rem)}
  .nav-link{
    position:relative;display:block;padding-block:.4rem;
    font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(247,247,245,.82);
    transition:color .3s var(--ease);
  }
  .nav-link::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--gold-grad);
    transform:scaleX(0);transform-origin:right;
    transition:transform .4s var(--ease);
  }
  .nav-link:hover,.nav-link:focus-visible,.nav-link.is-active{color:var(--white)}
  .nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.is-active::after{
    transform:scaleX(1);transform-origin:left;
  }
  .header-cta{display:inline-flex;margin-left:clamp(1.4rem,3vw,2.6rem)}

  /* hero: copy left, subjects breathe right */
  .hero-video{object-position:60% 50%}
  .hero-scrim{
    background:linear-gradient(90deg,
      rgba(3,3,8,.90) 0%,
      rgba(3,3,8,.68) 25%,
      rgba(3,3,8,.20) 55%,
      rgba(3,3,8,.08) 100%);
  }
  .hero-content{
    justify-content:center;
    padding-top:var(--header-h);
    padding-bottom:clamp(6rem,12vh,9rem);
  }
  .hero-copy{max-width:54%;min-height:clamp(13rem,26vw,20rem)}
  .hero-lede{max-width:44%}
  .hero-marks{
    position:absolute;left:0;right:0;bottom:0;
    padding-bottom:clamp(1.8rem,5vh,3rem);
  }
  .scroll-cue{display:flex}

  /* experiences: three equal portrait panels, side by side */
  .xp-grid{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2.25rem)}
  .xp-card:first-child{grid-column:auto}
  .xp-card:first-child .xp-media{aspect-ratio:4/5}

  /* split layouts */
  .grid-split{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem)}
  .grid-split.reverse>*:first-child{order:2}

  /* events: asymmetric grid replaces the rail.
     Five tiles on a 6-column track — two wide (3+3) over three
     equal (2+2+2) — so every row fills exactly. */
  .event-rail{
    display:grid;grid-template-columns:repeat(6,1fr);
    gap:1rem;overflow:visible;
    max-width:var(--maxw);margin-inline:auto;
    padding-inline:var(--gutter);
  }
  .ev{
    flex:none;aspect-ratio:auto;
    grid-column:span 2;
    min-height:clamp(16rem,23vw,21rem);
  }
  .ev-lg{
    grid-column:span 3;
    min-height:clamp(19rem,28vw,26rem);
  }

  .gal-grid{grid-template-columns:repeat(4,1fr);grid-auto-flow:dense}
  .gal-tall{grid-row:span 2}
  .gal-tall img{height:100%;aspect-ratio:auto}

  .steps{grid-template-columns:repeat(4,1fr)}
  .pkg-grid{grid-template-columns:repeat(3,1fr)}

  .contact .grid-split{grid-template-columns:.9fr 1.1fr;align-items:start}
}

/* ---------- 1440px — large desktop ------------------------ */
@media (min-width:1440px){
  .hero{height:320vh}
  .hero-copy{max-width:50%}
}

/* ---------- landscape phones: keep hero usable ------------ */
@media (max-width:1023px) and (orientation:landscape) and (max-height:560px){
  .hero-sticky{min-height:100svh}
  .hero-marks{display:none}
  .hero-copy{min-height:auto}
  .display-xl{font-size:clamp(2.4rem,9vh,4rem)}
  .display-lg{font-size:clamp(2rem,8vh,3.4rem)}
}

/* ---------- hover-capable pointers only ------------------- */
@media (hover:none){
  .gal figcaption{opacity:1;transform:none}
}

/* ---------- sticky CTA: mobile & tablet only -------------- */
@media (min-width:1024px){
  .sticky-cta{display:none}
  body.has-sticky-cta .site-footer{padding-bottom:0}
}

/* ============================================================
   REDUCED MOTION (§45)
   Site stays fully usable: hero collapses to a single static
   frame, all scroll choreography is dropped.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .hero{height:auto !important}
  .hero-sticky{position:relative;height:auto;min-height:100svh}
  .hero-video{display:none}   /* .hero-media already carries the still */
  .hero-phase:not(.is-first){display:none}
  .hero-phase{position:relative;opacity:1 !important;transform:none !important;filter:none !important}
  .hero-copy{min-height:auto}
  .hero-lede{opacity:1 !important;transform:none !important}

  [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important}
  .orbit-dot{display:none}
  .cue-arrow{animation:none !important}
}