/* ===========================================================
   Lamborghini Veneno — MOBILE / PORTRAIT layer (AX-SZHN)
   Loaded AFTER style.css. DESKTOP (≥901px) is untouched — every
   rule here is inside a max-width media query.

   Dedicated 9:16 PORTRAIT renders (assets/img/portrait/*.png) are
   swapped in via <picture><source media="(max-width:900px)">. The car
   already fills the tall frame, so the image zone is a TALL portrait
   area (≈9:16, capped so it never runs past the viewport) with
   object-fit:cover — no letterbox, no per-section reframing needed.
   Captions sit in a solid band BELOW the image (no tile over the car);
   the hero wordmark overlays the image's bottom headroom only.
   900px ceiling also catches 768px tablets.
   =========================================================== */
@media (max-width: 900px) {
  /* turn fixed-height overlap sections into flow stacks */
  .hero, .world, .legend { height: auto; min-height: 0; display: block; }
  /* pin the absolute parallax media into a tall PORTRAIT frame.
     aspect-ratio ≈ 9/16 matches the render; max-height keeps it on-screen. */
  .hero__media, .world__media, .legend__media {
    position: relative; inset: auto; width: 100%;
    aspect-ratio: 9 / 16; max-height: 88svh;
    background: var(--bg);
    /* clip the slightly-oversized image so the Ken-Burns scale can never
       reveal an edge. transform:none keeps the BOX itself static (no parallax
       drift) — only the inner <img> is animated by GSAP. */
    transform: none !important;
    overflow: hidden;
  }
  /* picture/img fill the portrait frame edge-to-edge, car large & centred */
  .hero__media picture, .world__media picture, .legend__media picture {
    width: 100%; height: 100%;
  }
  /* Baseline scale > 1 so the clipped box is always fully covered. GSAP scrubs
     this scale on mobile (initMobileKenBurns); the inline transform it writes
     overrides this. Under reduced-motion / no-JS the image simply stays at this
     static 1.12 zoom — still gapless, just no motion. NOTE: no !important here
     (unlike before) so GSAP's inline transform can take over. */
  .hero__media img, .world__media img, .legend__media img {
    transform: scale(1.12); transform-origin: center center;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    will-change: transform, opacity;
  }
  /* drop overlap veils/gradients — each image is self-contained now */
  .world::after, .world[data-theme="salt"]::after, .world[data-theme="night"]::after { display: none; }

  /* HERO: portrait has headroom, so the wordmark overlays the image's lower
     third (kept legible by a soft bottom fade); the chip stays hidden. */
  .hero__media { aspect-ratio: 9 / 16; max-height: 92svh; }
  .hero__veil {
    display: block; inset: auto 0 0 0; height: 46%;
    background: linear-gradient(to top, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.55) 40%, transparent 100%);
  }
  .legend__veil { display: none; }
  .hero { position: relative; }
  .hero__content {
    position: absolute; left: 0; right: 0; bottom: clamp(2rem, 6vh, 4rem);
    z-index: 5; padding: 0 1.4rem; background: none; text-align: center;
  }
  .hero__title .line > span { font-size: clamp(3.4rem, 22vw, 6rem); }
  /* keep the desktop vertical look on mobile: "SCROLL" above the animated line,
     centred. (Only reposition into flow below the hero image; styling stays.) */
  .hero__scroll { position: static; transform: none; margin: 1.6rem auto 0.4rem; }

  /* WORLD captions: solid panel below the image, never overlapping */
  .world__caption, .world__caption--right, .world__caption--top {
    position: static; inset: auto; top: auto; bottom: auto; left: auto; right: auto; max-width: none; text-align: left;
  }
  .world__caption.glass {
    background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: none; border-top: 2px solid var(--accent); border-radius: 0; box-shadow: none; padding: 1.8rem 1.4rem 2.6rem;
  }
  .world__caption.glass::before { display: none; }
  .world__caption--right .world__body { margin-left: 0; }
  .world__body { max-width: none; }

  /* LEGEND: image up top, CTA panel below (no veil over the car) */
  .legend__content { position: static; padding: 2.4rem 1.4rem 3rem; background: var(--bg); }

  /* gallery + lightbox usability on touch */
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__cap { opacity: 1; transform: none; padding: 1rem 0.9rem 0.8rem; font-size: 0.68rem; }
  .gallery__item::after { opacity: 0.85; }
  .lightbox { padding: 0.6rem; }
  .lightbox__figure { max-width: 96vw; max-height: 92vh; }
  .lightbox__img { max-width: 96vw; max-height: 76vh; }
  .lightbox__close { width: 48px; height: 48px; top: 0.7rem; right: 0.7rem; }
  .lightbox__nav { width: 48px; height: 48px; font-size: 1.7rem; bottom: 0.9rem; top: auto; transform: none; }
  .lightbox__nav--prev { left: 0.8rem; }
  .lightbox__nav--next { right: 0.8rem; }
  .lightbox__count { bottom: 1.4rem; }
}

@media (max-width: 480px) {
  .specs { padding: 4rem 1.1rem; }
  .specs__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .stat { padding: 1.2rem 1rem 1rem; }
  .stat__num { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .gallery { padding: 4rem 1.1rem; }
}