/* ================================================
   storylab.tv — responsive.css
   Built from class-audit.txt — real class names only
   ================================================ */

/* ---------- NAV: shared across all pages ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}

/* ========== TABLET ≤ 768px ========== */
@media (max-width: 768px) {

  /* — Nav collapse — */
  .nav-toggle { display: flex; }
  .nav-r {
    position: fixed;
    top: 0; right: -100%;
    width: 280px; height: 100vh;
    flex-direction: column;
    padding: 80px 32px 40px;
    background: var(--bg, #0A0A0A);
    transition: right .35s ease;
    z-index: 1000;
    gap: 24px;
  }
  .nav-r.open { right: 0; }
  .nl { font-size: 1.15rem; }

  /* — Headings scale — */
  h1, .hero-tag, .hero-msg, .diff-hero h1,
  .hero-courses h1, .hero-ai h1, .hero-lab h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
  h2, .cat-header, .fw-name, .offerings-header,
  .labs-close h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); }

  /* — Section padding — */
  .sec-pad, .prose-sec, .origin-sec, .three-sec,
  .cap-sec, .fw-section, .cat-section, .offerings,
  .score-section, .subscribe, .cadence { padding: 60px 20px; }

  /* — Grids → 2 col — */
  .course-grid,
  .crs-grid,
  .fs-grid,
  .lab-grid,
  .offer-grid,
  .dim-grid,
  .fw-system-grid,
  .system-icons { grid-template-columns: repeat(2, 1fr) !important; }

  .scale-row { flex-wrap: wrap; gap: 16px; }
  .scale-item { flex: 1 1 45%; }

  /* — Framework pages — */
  .split-hero { flex-direction: column; text-align: center; }
  .fw-steps { grid-template-columns: 1fr 1fr; }
  .logo-track { flex-wrap: wrap; justify-content: center; gap: 24px; }

  /* — Story AI — */
  .hero-cta-row, .score-cta-row { flex-wrap: wrap; gap: 12px; }
  .q-card { padding: 24px 16px; }
  .proof { flex-direction: column; text-align: center; }
  .proof-visual { max-width: 100%; }

  /* — Courses — */
  .filter-row { flex-wrap: wrap; gap: 8px; }
  .bbb-scroll, .lsd-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .creds-row { flex-wrap: wrap; }

  /* — The Lab — */
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .cadence-inner { flex-direction: column; gap: 20px; }

  /* — Find Us — */
  .find-wrap { flex-direction: column; }
  .find-card { width: 100%; }

  /* — Different — */
  .three-sec { flex-direction: column; }
  .three-item { width: 100%; }
  .side-note { padding: 40px 20px; }
  .break-quote { font-size: 1.6rem; padding: 40px 20px; }

  /* — Homepage — */
  .wr-sec { flex-direction: column; }
  .wr-in { max-width: 100%; }
  .manifesto { font-size: clamp(1.2rem, 3vw, 1.6rem); }
  .fmts { flex-wrap: wrap; gap: 12px; }
  .find-sec { padding: 60px 20px; }
  .cl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

} /* end 768 */

/* ========== MOBILE ≤ 480px ========== */
@media (max-width: 480px) {

  body { overflow-x: hidden; }

  /* — All grids → single column — */
  .course-grid,
  .crs-grid,
  .fs-grid,
  .lab-grid,
  .offer-grid,
  .dim-grid,
  .fw-system-grid,
  .fw-steps,
  .system-icons { grid-template-columns: 1fr !important; }

  /* — Headings scale further — */
  h1, .hero-tag, .hero-msg, .diff-hero h1,
  .hero-courses h1, .hero-ai h1, .hero-lab h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  h2, .cat-header, .fw-name, .offerings-header { font-size: clamp(1.2rem, 5vw, 1.8rem); }

  /* — Cards full width — */
  .c-card, .crs-card, .fs-card, .offer-card,
  .lab-card, .find-card, .system-icon-card,
  .q-card { width: 100%; padding: 20px 16px; box-sizing: border-box; }

  /* — Touch targets — */
  .fbtn, .btn-primary, .btn-ghost, .offer-btn,
  .sub-btn, .f-badge, .nl, .q-opt,
  .filter-group button { min-height: 44px; }

  /* — Filter bars scroll horizontally — */
  .filter-row, .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 8px;
  }
  .filter-row::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar { height: 0; display: none; }

  /* — Section padding tighter — */
  .sec-pad, .prose-sec, .origin-sec, .three-sec,
  .cap-sec, .fw-section, .cat-section, .offerings,
  .score-section, .subscribe, .cadence { padding: 40px 16px; }

  /* — Homepage mobile — */
  .hero { padding: 100px 16px 60px; }
  .hero-geo { display: none; }
  .scale-item { flex: 1 1 100%; }
  .cap-pill { font-size: .75rem; padding: 6px 12px; }
  .lab-grid { gap: 16px; }
  .fs-card { padding: 20px 16px; }

  /* — Story AI mobile — */
  .hero-ai { padding: 80px 16px 40px; }
  .dim-item { padding: 12px; }
  .q-slider-wrap { padding: 0 8px; }
  .offer-card { margin: 0 0 16px; }
  .manifesto-inner { padding: 40px 16px; }

  /* — Courses mobile — */
  .hero-courses { padding: 80px 16px 40px; }
  .bbb-scroll { gap: 12px; scroll-snap-type: x mandatory; }
  .bbb-book { scroll-snap-align: center; min-width: 200px; }
  .lsd-strip { gap: 12px; }
  .freemium-inner { padding: 24px 16px; }

  /* — Frameworks mobile — */
  .split-hero { padding: 80px 16px 40px; }
  .fw-inner { padding: 40px 16px; }
  .intro-strip { padding: 40px 16px; }
  .logo-img { max-height: 28px; }
  .orbit-group svg { max-width: 280px; }
  .spiral-path svg,
  .infinity-path svg { max-width: 100%; height: auto; }

  /* — The Lab mobile — */
  .hero-lab { padding: 80px 16px 40px; }
  .lab-card { padding: 20px 16px; }
  .cadence-day { font-size: 2rem; }
  .subscribe-inner { padding: 24px 16px; }

  /* — Different mobile — */
  .diff-hero { padding: 80px 16px 40px; }
  .interlude { padding: 40px 16px; font-size: 1.2rem; }
  .side-note-inner { padding: 24px 16px; }
  .break-quote { font-size: 1.3rem; padding: 32px 16px; }

  /* — Find Us mobile — */
  .find-wrap { padding: 80px 16px 40px; }
  .find-links { flex-direction: column; gap: 12px; }

  /* — Nav overlay for mobile — */
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.6);
    z-index: 999;
  }
  .nav-overlay.open { display: block; }

} /* end 480 */