/* ──────────────────────────────────────────────────────────────────────────
   Nordic Theory Labs — mobile fixes
   Loaded on every page to prevent horizontal overflow / shake on mobile.
   ────────────────────────────────────────────────────────────────────────── */

/* hard clamp: nothing escapes the viewport */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* media never overflows its container */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}

/* long words / urls wrap instead of pushing the page wider */
p, h1, h2, h3, h4, li, span, a, button, summary, blockquote, .a, .sec-sub, .feat-tagline {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* tablet & phones ──────────────────────────────────────────── */
@media (max-width: 900px) {
  /* the studio wordmark is a giant 1000-unit SVG — clamp it */
  .foot-wordmark { width: 100%; height: auto; max-height: 96px; }

  /* hero headline must fit even on narrow screens */
  .hero h1 { font-size: clamp(40px, 11vw, 72px) !important; line-height: 0.95; }

  /* index.html: now-panel + apps-grid + grid columns collapse to single column */
  .now-grid, .apps-grid, .grid.cols-2, .grid.cols-3, .principles, .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* index.html: featured section side-by-side → stack */
  .feat-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .feat-grid .device img { width: 60% !important; margin: 0 auto; }

  /* hero word-reveal: keep words from forcing a wider row */
  .hero h1 .word { display: inline; }

  /* footer 3-column bottom row → stack */
  .foot-bottom { grid-template-columns: 1fr !important; gap: 8px; text-align: left !important; }
  .foot-bottom > div { text-align: left !important; justify-content: flex-start !important; }

  /* apps/korkort-hero ─────────────────────────── */
  .hero-grid { grid-template-columns: 1fr !important; }
  .stats-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .feature, .feature.reverse { grid-template-columns: 1fr !important; gap: 28px; }
  .feature.reverse > .feat-shot { order: -1; }
  .bn-grid { grid-template-columns: 1fr !important; }
  .modes-grid { grid-template-columns: 1fr !important; }
  .faq-grid { grid-template-columns: 1fr !important; }
  .rv-grid { grid-template-columns: 1fr !important; }
  .qr-zone { flex-direction: column !important; gap: 18px; }
  .foot-inner { grid-template-columns: 1fr !important; gap: 10px; text-align: left !important; }
  .foot-inner > div { text-align: left !important; justify-content: flex-start !important; display: block !important; }

  /* the giant "1287" / "65" / "50" counters need a smaller ceiling */
  .stat b, .bn b { font-size: clamp(40px, 12vw, 88px) !important; }

  /* langs-row chips wrap nicely */
  .langs-row { gap: 8px; }
  .langs-row .lang { font-size: 13px; padding: 6px 10px; }

  /* hero-meta on apps page (3-col stat strip) → stack */
  .hero-meta { flex-direction: column; gap: 6px; align-items: flex-start; }

  /* hero CTA buttons wrap if too wide */
  .hero-cta, .hero-actions { flex-wrap: wrap; }
  .store-btn { flex: 1 1 auto; min-width: 0; }

  /* nav: long brand name may overflow; keep tight */
  .nav-inner { gap: 12px !important; }
  .crumb { font-size: 11px; }
  .crumb a:not(.crumb-mark) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
}

/* very narrow phones ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --col-pad: 16px !important; }
  .wrap, .container { padding-left: 16px !important; padding-right: 16px !important; }
  .hero { padding-top: 48px !important; }
  .hero h1 { font-size: clamp(34px, 12vw, 56px) !important; }
  .section-title, .sec-h { font-size: clamp(28px, 8vw, 44px) !important; }
  .stats-inner { grid-template-columns: 1fr !important; }
  .cta-meta .row { flex-direction: column; gap: 4px; }
  /* aurora glows are decorative — disable on tiny screens to avoid offset overflow */
  .aurora, .aurora-mouse, .sun { display: none !important; }
}