/* ============================================================
   mobile.css v2 — Mobile Portrait Overrides (≤ 767px)
   ============================================================ */

@media (max-width: 767px) {

  :root {
    --topbar-h:    48px;
    --bottombar-h: 64px;
    --stage-h:     calc(100dvh - var(--topbar-h) - var(--bottombar-h));
  }

  body { overflow: hidden; }

  /* Scrollable stage on mobile */
  #stage {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #slide-content { height: auto; min-height: 100%; }
  .slide-wrap {
    height: auto; min-height: var(--stage-h);
    padding: var(--sp-5) var(--sp-4);
    overflow: visible;
  }
  .slide-body { overflow: visible; }

  /* Top bar mobile: hide center / swap dots for counter */
  .topbar-center { display: none; }
  #progress-dots { display: none; }
  #progress-counter {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    letter-spacing: 0.08em;
  }

  /* ── Mobile reveal: append-below ── */
  .reveal-block[data-step]:not([data-step="0"]):not(.is-shown) {
    display: none !important;
  }
  .reveal-block[data-step].is-shown {
    display: block !important;
    opacity: 1 !important; transform: none !important;
    animation: mobileSpring 0.55s var(--ease-spring) forwards;
  }
  @keyframes mobileSpring {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Preserve flex/grid display for layout containers */
  .reveal-block.is-shown.l-two-col,
  .reveal-block.is-shown.l-three-col,
  .reveal-block.is-shown.l-row,
  .reveal-block.is-shown.insight-grid { display: flex !important; }

  /* Bottom bar */
  #bottom-bar { padding: 0 var(--sp-4); }
  .nav-btn { min-width: 52px; height: 40px; padding: var(--sp-2) var(--sp-3); justify-content: center; }
  .nav-label { display: none; }
  .nav-btn svg { width: 18px; height: 18px; }

  /* Step dots */
  .sdot { width: 6px; height: 6px; }
  .sdot.is-active { width: 18px; }

  /* Typography */
  .slide-title-text { font-size: var(--text-3xl); }
  .pull-quote p { font-size: var(--text-lg); }

  /* All multi-column → single column */
  .l-two-col, .l-three-col, .l-60-40, .l-40-60, .l-row {
    display: flex !important; flex-direction: column !important;
    gap: var(--sp-3) !important;
  }
  .insight-grid.cols-2, .insight-grid.cols-3, .insight-grid.cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* ROI triptych: vertical */
  .roi-triptych {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1px auto 1px auto !important;
  }
  .roi-sep { height: 1px !important; width: 100% !important; }

  /* Compact card padding */
  .card, .insight-card { padding: var(--sp-4); }
  .pull-quote { padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); }
  .pull-quote:hover { padding-left: var(--sp-6); }

  /* Slide head compact */
  .slide-head { margin-bottom: var(--sp-3); }
}