/* ============================================================
   css/mobile.css — Mobile-specific overrides
   Loaded after main.css — source order wins at equal specificity.
   All !important removed from rules migrated here; specificity or
   source order provides the override without the nuclear option.
   ============================================================ */

/* ── Tablet / mobile (< 768px) ───────────────────────────── */
@media (max-width: 767px) {
  /* h2 anchor: mobile uses svh (stable) to avoid jitter from address-bar resize.
     Must match the padding-top values on .sc and .mode-panel below. */
  :root { --h2-top: 44svh; }

  /* Layout collapse */
  .pg { flex-direction: column; }
  .lc { width: 100%; padding: 0 6vw; z-index: 30; }
  .rc { display: none; }

  /* Canvas: full-width, top half of screen */
  /* z-index: 35 puts device above text (z-index 30) so content slides behind
     the device during scroll transitions rather than over it */
  #cv {
    left: 0;
    width: 100vw;
    height: 42svh;
    top: 0;
    z-index: 35;
  }
  /* LED overlay: must match #cv on mobile — desktop left:40% rule does not apply */
  #lc {
    left: 0;
    width: 100vw;
    height: 42svh;
  }

  /* Nav gradient not needed on mobile */
  nav::before { display: none; }

  /* Sections: fill the viewport exactly.
     100dvh (dynamic) always matches the actual viewport height so no sliver of
     the next section peeks through when the address bar hides.
     scroll-snap-align: start + dvh means section top is always at viewport top
     and content position is deterministic regardless of address bar state. */
  .sc {
    height: 100dvh;
    padding: 44svh 0 24px;
    justify-content: flex-start;
    scroll-snap-align: start;
  }

  /* Prevent elastic overscroll bounce at the bottom of the page on iOS */
  html { overscroll-behavior-y: none; }

  /* #s0: single-screen hero — exactly fills viewport, button pinned at bottom */
  #s0 { height: 100dvh; min-height: unset; padding-top: 43svh; padding-bottom: 24px; box-sizing: border-box; overflow: hidden; }
  #s0 h1 { margin-bottom: 8px; }
  #s0 .ld { margin-bottom: 8px; }
  #s0 .bt { margin-top: auto; }

  /* Nav: logo only — persists throughout as tap-to-top anchor */
  nav .nl { display: none; }
  nav { padding: 20px 5vw 14px 6vw; }

  /* Progress dots: smaller visual, expanded tap target */
  .pds { right: 3vw; gap: 8px; }
  .pd  { position: relative; width: 5px; height: 5px; }
  .pd::before { content: ''; position: absolute; inset: -10px; }

  /* Typography */
  .ld { max-width: 100%; margin-bottom: 20px; line-height: 1.45; font-size: 15px; }
  .sc h2, .mode-panel h2 { margin-bottom: 14px; }
  .ey { margin-bottom: 10px; }
  .hn { display: none; } /* unnecessary on touch devices */

  /* Button: full width */
  .bt { width: 100%; text-align: center; box-sizing: border-box; }

  /* Footer: push content below the 42svh device canvas, stack top-down */
  .ft { padding-top: 44svh; justify-content: flex-start; min-height: 100svh; }

  /* Modes chapter — mobile overrides */
  /* #mc is a .sc (gets height: 100dvh) but .mode-panel already has padding-top: 44svh.
     Zero out the .sc padding on #mc to prevent double-stacking of the 44svh offset. */
  #mc {
    padding: 0;
    min-height: unset;
  }
  .modes-panels {
    height: 100dvh;
  }
  .modes-chapter .lc {
    width: 100%;
    padding: 0 6vw;
  }
  .mode-panel {
    justify-content: flex-start;
    padding-top: 44svh;
    transform: none;     /* disable horizontal slide on mobile */
    transition: opacity 0.4s ease;  /* fade-only — device stays still, text crossfades */
  }
  /* Desktop: .mode-panel .ey is position:absolute so it floats above the h2 flow.
     On mobile the device canvas occupies the top 42svh (z-index 35 > lc's 30),
     so an absolute eyebrow at ~41svh would be hidden behind it. Keep flow layout. */
  .mode-panel .ey {
    position: static;
  }
  /* Children: no translateY or blur on mobile — text fades cleanly with the panel */
  .mode-panel h2,
  .mode-panel .ld,
  .mode-panel .ey,
  .mode-panel .mi {
    transform: none;
    filter: none;
    transition: opacity 0.3s ease;
    transition-delay: 0s;
  }
  .mode-icons { max-width: 100%; margin-top: 1rem; }
  .mi svg { width: 22px; height: 22px; }
  .mi span { font-size: 9px; }

  /* Modes chapter panels: two paragraphs overflow in the small viewport (full Safari chrome).
     Drop the second paragraph to make room for the mode icons. */
  .mode-panel .ld ~ .ld { display: none; }

  /* #s7: same — two paragraphs push the button off-screen in the small viewport.
     Remove when the copy is shortened to one paragraph. */
  #s7 .ld ~ .ld { display: none; }
}

/* ── Small mobile (< 480px) ──────────────────────────────── */
@media (max-width: 479px) {
  .lc { padding: 0 5vw; }
  .sc { height: 100dvh; padding: 44svh 0 16px; min-height: unset; }
  #s0 { height: 100dvh; min-height: unset; padding-top: 43svh; padding-bottom: 16px; }
  nav { padding: 16px 4vw 12px 5vw; }
  .brand-wordmark { font-size: 1.6rem; }
  .bt { padding: 14px 24px; }
  .modes-chapter .lc { padding-top: 0; } /* mode-panel handles its own top padding */
}

/* ── Logo: visible on hero only ──────────────────────────── */
/* s0-active is toggled by scroll.js IntersectionObserver when #s0 intersects.
   Target .logo (not nav) so the nav container keeps its bounding box — test-safe. */
@media (max-width: 767px) {
  nav .logo { transition: opacity 0.3s ease, visibility 0.3s ease; }
  html:not(.s0-active) nav .logo {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  /* Non-hero canvas lift is JS-driven (_mobLift in device.js render loop) — not CSS — because
     device.js owns the transform property on #cv and #lc for per-frame animation. */
}

/* ── Section text blanking during mobile scroll ──────────── */
/* Applied by JS (jb-scrolling on <html>) on first scroll event,
   removed 150 ms after scroll stops. Prevents section text from
   drifting over the fixed device canvas mid-snap. */
@media (max-width: 767px) {
  html.jb-scrolling .sc h1,
  html.jb-scrolling .sc h2,
  html.jb-scrolling .sc .ld,
  html.jb-scrolling .sc .bt,
  html.jb-scrolling .sc .ey {
    opacity: 0 !important;
    transition: none !important;
  }

  /* ── FAQ answer panel — mobile ──────────────────────────── */

  /* Keep answer content visible during page scroll (jb-scrolling blanks .ld globally) */
  html.jb-scrolling #s_faq .faq-answer.active .ld,
  html.jb-scrolling #s_faq .faq-answer.active h3 {
    opacity: 1 !important;
  }
}