/* Mobile/tablet scroll-snap — home + studio. Active when html.mobile-scroll-snap is set via JS. */

.hero-snap-rail,
.bp-snap-rail {
  display: none;
}

@media (max-width: 860px) {
  html.mobile-scroll-snap {
    --snap-pad-x: clamp(12px, 4vw, 20px);
    --snap-pad-y: max(16px, env(safe-area-inset-top, 0px));
    --snap-pad-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    --snap-gap: 0;
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
  }

  html.mobile-scroll-snap body {
    scroll-behavior: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html.mobile-scroll-snap {
      scroll-snap-type: y proximity;
    }
  }

  html.mobile-scroll-snap main > section[id] {
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 0;
    gap: var(--snap-gap);
    padding: var(--snap-pad-y) var(--snap-pad-x) var(--snap-pad-bottom);
  }

  /* Content sections hug height; snap stops at each section start (no empty 100dvh frames). */
  html.mobile-scroll-snap main > section[id]:not(#hero):not(#portal):not(#services-teaser) {
    height: auto;
    min-height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: visible;
  }

  html.mobile-scroll-snap .scroll-snap-target {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100dvh;
    height: 100svh;
    height: 100dvh;
    pointer-events: none;
    flex-shrink: 0;
  }

  /* ---------- Home hero (has .hero-snap-rail) — do not apply to studio #hero ---------- */
  html.mobile-scroll-snap #hero:has(.hero-snap-rail) {
    min-height: auto !important;
    height: auto;
    max-height: none;
    display: block;
    padding: 0;
    overflow: clip;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  html.mobile-scroll-snap .hero-sticky-stage {
    height: 100dvh;
    height: 100svh;
    height: 100dvh;
    margin-bottom: -100dvh;
  }

  html.mobile-scroll-snap .hero-snap-rail {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
  }

  /* ---------- Studio hero (pinned .pin-space) — one snap stop, one viewport ---------- */
  html.mobile-scroll-snap #hero:has(.pin-space) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 0;
    overflow: clip;
    min-height: 100dvh;
    height: auto;
  }

  html.mobile-scroll-snap #hero:has(.pin-space) .pin-space {
    height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
  }

  html.mobile-scroll-snap #final:has(.pin-space) .pin-space {
    height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
  }

  html.mobile-scroll-snap .idea-view-wrap {
    touch-action: pan-y;
  }

  html.mobile-scroll-snap .idea-view {
    min-height: 0;
    max-height: none;
    padding: 16px 18px 18px;
  }

  html.mobile-scroll-snap .idea-cta-wrap {
    margin-top: 12px;
  }

  html.mobile-scroll-snap .idea-shell {
    width: 100%;
    flex-shrink: 0;
  }

  html.mobile-scroll-snap #art .art-frame-wrapper,
  html.mobile-scroll-snap #library .gateway-panel {
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  html.mobile-scroll-snap #library .gateway-visual {
    min-height: 0;
  }

  html.mobile-scroll-snap #services-teaser {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    display: block;
    overflow: hidden;
  }

  html.mobile-scroll-snap #services-teaser .studio-teaser {
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
  }

  /* Portal keeps scroll runway for 3D world handoff — must not be cramped like content sections. */
  html.mobile-scroll-snap #portal {
    min-height: 160dvh;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
  }

  html.mobile-scroll-snap .world-enter-btn {
    min-height: 44px;
  }

  /* ---------- Studio ---------- */
  html.mobile-scroll-snap section.flow {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--snap-pad-y) var(--snap-pad-x) var(--snap-pad-bottom);
    overflow-y: auto;
  }

  html.mobile-scroll-snap #historia .inner,
  html.mobile-scroll-snap #pilar .inner,
  html.mobile-scroll-snap #faq .inner {
    padding-top: 0;
  }

  html.mobile-scroll-snap section.flow .mega {
    top: var(--snap-pad-y);
    bottom: auto;
    font-size: clamp(48px, 16vw, 100px);
    opacity: 0.22;
  }

  html.mobile-scroll-snap #historia .mega,
  html.mobile-scroll-snap #pilar .mega,
  html.mobile-scroll-snap #faq .mega {
    top: var(--snap-pad-y);
  }

  html.mobile-scroll-snap #processo {
    padding: 0;
  }

  html.mobile-scroll-snap #processo .mega-slot {
    top: var(--snap-pad-y);
  }

  html.mobile-scroll-snap #processo .steps-rail {
    gap: 0;
  }

  html.mobile-scroll-snap .step {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: 0 var(--snap-pad-x);
    box-sizing: border-box;
  }

  html.mobile-scroll-snap #blueprints .pin-space {
    height: auto !important;
  }

  html.mobile-scroll-snap #blueprints .pin-viewport {
    margin-bottom: -100dvh;
  }

  html.mobile-scroll-snap #blueprints .bp-head {
    top: calc(var(--snap-pad-y) + 48px);
  }

  html.mobile-scroll-snap .bp-snap-rail {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
  }

  /* blueprints: 3× scroll per snapshot so inspection + phase C get 3× dwell;
     matches desktop data-len="24" (3× the original 8). */
  html.mobile-scroll-snap #blueprints .bp-snap {
    height: 300dvh;
    height: 300svh;
    height: 300dvh;
  }
}