/*
 * Novaire · Mobile adaptation layer for /lessons static HTML.
 * Loaded by every clase-*.html, laboratorio.html, biblioteca-prompts.html
 * and formato-*.html via a single <link> after the viewport meta.
 *
 * Goal: keep the desktop deck UX intact while turning everything under
 * 600px into a linear vertical-scroll reader (slides shown stacked).
 * !important is necessary because per-file <style> blocks come after.
 */

/* ── ≤900px: tablets and small laptops · light fixes ─────────────── */
@media (max-width: 900px) {
  /* Fixed-width stages / canvases used by interactive demos */
  .stage, .codecard, .nn, .pipes, .term, .tbody, .scene {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Slide padding: ease the horizontal squeeze */
  .slide {
    padding: 80px clamp(16px, 4vw, 32px) 96px !important;
  }

  /* Common 2-col → 1-col */
  .cmp, .yn, .owners, .twocol {
    grid-template-columns: 1fr !important;
  }

  /* 4-col → 2-col */
  .grid, .experts, .layer, .head, .bot {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Topbar a bit tighter */
  .topbar {
    padding: 10px 14px !important;
  }
}

/* ── ≤600px: phones · convert deck to linear scroll ──────────────── */
@media (max-width: 600px) {
  /* Collapse any remaining multi-col grids */
  .grid, .experts, .layer, .head, .bot {
    grid-template-columns: 1fr !important;
  }

  /* Pipeline / chip-style flex rows: allow wrap and shrink */
  .stg, .stage-chip {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* HUD, slide counter, nav arrows, progress bar: not usable on mobile
     because slides are now stacked vertically and there's no keyboard.
     Hide them entirely so they don't float over the content. */
  .hud, .navbtns, .progress, .count, .pgbar, .nb {
    display: none !important;
  }

  /* Decorative ambient elements that fight for space */
  .spot, .nova, .amb {
    display: none !important;
  }

  /* CRITICAL: turn the slide deck into a linear scroll on mobile.
     Desktop uses position:fixed + one-slide-at-a-time. On phones
     keyboard navigation is unavailable, so we show all slides stacked. */
  .deck {
    position: static !important;
    inset: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }
  .slide {
    position: relative !important;
    inset: auto !important;
    min-height: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding-top: 64px !important;
    padding-bottom: 56px !important;
    border-bottom: 1px solid rgba(244, 241, 235, 0.06);
  }
  .slide:last-child {
    border-bottom: none;
  }

  /* Reveal all fragments — they're meant to appear progressively on
     desktop, but on mobile the linear scroll makes that confusing. */
  .fragment, .reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Tables / comparison rows */
  .pr .l {
    width: 60px !important;
    font-size: 11px !important;
  }
  .pr .v {
    width: 32px !important;
    font-size: 10px !important;
  }

  /* Common side-by-side splits → stack */
  .row, .split, .twocol, .yn, .cmp {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* Wide panels (radial map etc.) */
  .mapbox, .panel {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* SVG / canvas: never exceed viewport */
  svg, canvas, img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Code blocks: allow horizontal scroll within rather than break layout */
  pre, code, .codecard {
    overflow-x: auto;
    word-break: break-word;
  }
}

/* ── ≤420px: small phones (iPhone SE etc.) · final tightening ────── */
@media (max-width: 420px) {
  /* Brand wordmark hidden, monogram kept */
  .topbar .wordmark {
    display: none !important;
  }

  .slide {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tiny screens: button labels often overflow */
  .btn, button {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* Reduce gigantic title clamps further */
  h1, .h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  h2, .h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
}

/* ── CRITICAL: unlock vertical scroll on mobile ──────────────────────
 * The desktop CSS in most lessons sets `html,body{height:100%;overflow:hidden}`
 * because the deck is position:fixed and navigation is keyboard-driven.
 * On mobile we converted the deck to a linear scroll, so the body must
 * scroll — these overrides are mandatory or the page is locked. */
@media (max-width: 900px) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
}