/* ─────────────────────────────────────────────────────────────
 * responsive.css — Breakpoints + accessibility queries
 *   Loaded last so media-query overrides win the cascade.
 *   - 1024px : tablet
 *   -  640px : mobile
 *   -  480px : small mobile (TOC collapse)
 *   - prefers-reduced-motion : kill animations
 * ───────────────────────────────────────────────────────────── */


/* ── ≤ 1024px · Tablet ─────────────────────────────── */
@media (max-width: 1024px) {

  /* Layout collapses bento to 4 columns */
  .bento { grid-template-columns: repeat(4, 1fr); }

  .card               { grid-column: span 2; }
  .card.x3,
  .card.x4,
  .card.x6            { grid-column: span 4; }
  .card.feature {
    grid-column: span 4;
    grid-row: span 1;
    min-height: 280px;
  }

  .footer-grid,
  .footer-menu        { grid-template-columns: 1fr 1fr; }
  .toc                { grid-template-columns: repeat(2, 1fr); }
  .principles         { grid-template-columns: 1fr; }

  /* Hide center nav links — keep logo + CTA.
     Grid was `auto 1fr auto` (logo · links · cta); with the
     links removed the cta auto-placed into the 1fr track and
     stretched full-width (the "broken menu"). Collapse to a
     clean 2-col bar and pin the cta to the right at content
     width so it never stretches. */
  .nav-inner          { grid-template-columns: 1fr auto; gap: 1rem; }
  .nav-links          { display: none; }
  .nav-cta            { justify-self: end; width: auto; flex: 0 0 auto; }

  /* The fixed nav was transparent by default (only got a bg via
     the JS `.scrolled` class). On a phone that meant ALL page
     content scrolled visibly THROUGH the logo/button — the
     "broken/double-exposure menu". Make it a solid opaque bar
     here, independent of JS, in every state. */
  .nav {
    background: rgba(8, 9, 18, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.scrolled { background: rgba(8, 9, 18, 0.97); }
}


/* ── ≤ 640px · Mobile ──────────────────────────────── */
@media (max-width: 640px) {

  /* Bento → single column, all cards full width */
  .bento { grid-template-columns: 1fr; }

  .card,
  .card.feature,
  .card.x2,
  .card.x3,
  .card.x4,
  .card.x6 {
    grid-column: span 1;
    grid-row: auto;
    min-height: auto;
  }

  .toolbar            { grid-template-columns: 1fr; }
  /* Keep the "Explorar" label — a lone arrow looked broken/
     empty. Just make the pill compact. */
  .nav-cta            { padding: 0.5rem 0.95rem; font-size: var(--t-sm); }

  /* Chapter bar — stack vertically (eyebrow over title) */
  .chapter-bar {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 2.2rem 0 1.2rem;
  }
  .chapter-bar .count-pill { justify-self: start; }
  .chapter-num { justify-self: start; }

  /* Stats — clean 2×2 grid instead of cramped overflow row */
  .stats-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.2rem;
    overflow: visible;
  }
  .stat-divider { display: none; }

  /* Footer — tighter, single column, less empty space */
  .footer { margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-bottom: 1.8rem;
  }
  .footer-grid ul { gap: 0.45rem; }
  .footer-logo { height: 52px; }

  /* Hero — trim vertical run a touch */
  .hero { padding-top: 5.5rem; }
  .hero.home-catalog {
    grid-template-columns: 1fr;
    gap: 0.95rem;
    padding: 5.5rem var(--gutter) 2rem;
  }
  .home-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0.25rem;
    padding: 0.65rem;
    border-radius: 14px;
  }
  .home-rail-kicker {
    grid-column: 1 / -1;
    padding: 0.25rem 0.4rem 0.45rem;
    font-size: 0.64rem;
  }
  .home-rail a {
    min-height: 40px;
    padding: 0.45rem 0.4rem;
    font-size: 0.8rem;
  }
  .home-main {
    min-height: auto;
    padding: 0.65rem 0 0;
  }
  .home-main .hero-title {
    max-width: 10.5ch;
    margin-bottom: 0.9rem;
    font-size: clamp(2.65rem, 13vw, 3.35rem);
    line-height: 0.95;
  }
  .home-main .hero-lead {
    margin-bottom: 1rem;
  }
  .home-preview {
    display: none;
  }
  .hero-orb { height: 110px; margin-top: 1.5rem; }
  .blueprint-strip {
    grid-template-columns: 1fr;
  }

  /* ── Mobile motion budget ──────────────────────────────
     Scroll-driven reveals (animation-timeline: view()) are
     unreliable on mobile — fast flicks & anchor jumps leave
     ~130 elements stuck at opacity:0 (blank gaps). And 180+
     concurrent animations stutter on low-end phones. So on
     mobile: force every reveal target to its final visible
     state and stop the ambient/parallax loops. */
  .card,
  .toc a,
  .chapter-bar,
  .section-eyebrow,
  .section-title,
  .section-desc,
  .toolbar,
  .filters,
  .stats-strip,
  .principle,
  .footer-grid > div,
  .hero-title,
  .hero-title .word,
  .hero-lead,
  .hero-pill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .card { will-change: auto; }
  .toolbar { grid-template-columns: 1fr; }
  .sort-control { grid-template-columns: auto minmax(0, 1fr); align-items: center; }

  /* 22 decorative particle animations — drop entirely */
  .hero-particles { display: none; }
  .home-search {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 52px;
    margin-bottom: 0.9rem;
  }
  .home-search kbd {
    display: none;
  }
  .blueprint-card {
    min-height: auto;
    padding: 1.1rem;
  }

  /* ── Mobile GPU budget ─────────────────────────────────
     CPU emulation hid these; on a real phone scrolling a
     ~33k-px page they are the real "slow + broken":

     1. backdrop-filter on the FIXED nav re-blurs everything
        behind it every scroll frame. Replace with opaque bg. */
  .nav.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(7, 8, 15, 0.96) !important;
  }

  /* 2. filter: blur(64px) aurora = giant offscreen buffer
     recomposited the whole scroll → kill it; swap in a
     static, blur-free gradient so it still has depth. */
  .aurora { display: none !important; }
  body {
    background:
      radial-gradient(60% 50% at 18% 0%, rgb(var(--accent-rgb) / 0.16), transparent 60%),
      radial-gradient(55% 45% at 92% 12%, rgb(var(--accent-alt-rgb) / 0.12), transparent 60%),
      var(--bg, #070810);
    background-attachment: scroll;
  }

  /* 3. Other decorative blur layers (hero/section glow) */
  .hero-orb::before,
  .hero-orb-glow,
  .section-glow,
  [class*="glow"] { filter: none !important; }

  /* 4. The mascot is position:fixed with 4 infinite SVG
     animations — a fixed ANIMATED layer re-composites every
     scroll frame the entire 33k-px page = constant stutter.
     Keep it (still pops jokes) but make it perfectly static.
     Same for every other idle infinite loop: on a low-end
     phone the page must have ZERO continuous animation while
     scrolling (only the compositor scroll-progress bar). */
  .mascot,
  .m-shadow,
  .m-led,
  .m-eyes,
  .hero-orb-svg,
  .m-spark,
  .status-dot,
  .marquee-track,
  [style*="orbFloat"] {
    animation: none !important;
  }
  /* belt-and-suspenders: nuke any leftover infinite loop */
  *:not(.scroll-progress) {
    animation-iteration-count: 1 !important;
  }

  /* 5. One less fixed composited layer (fine 1px grid that
     must stay pinned while a huge page scrolls under it) */
  .grid-bg { display: none; }

  /* Mascot was covering card text. Shrink it into the very
     corner and fade it when idle so it never obstructs
     reading — still taps/pops jokes (the bubble is the point,
     and it lifts to full opacity while speaking). */
  .mascot,
  .mascot-svg { width: 44px !important; height: 51px !important; }
  .mascot {
    left: 0.6rem;
    bottom: 0.6rem;
    opacity: 0.5;
    transition: opacity 0.25s;
  }
  .mascot.talking,
  .mascot:active { opacity: 1; }

  /* 6. Continuous marquee transform = constant compositing */
  .marquee { display: none; }
}

/* ── ≤ 420px · very small phones ─────────────────────── */
@media (max-width: 420px) {
  .stats-inner { grid-template-columns: 1fr; gap: 0.5rem; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .filters { gap: 0.35rem; }
  .filter { padding: 0.45rem 0.8rem; }
}


/* ── ≤ 480px · Small mobile ────────────────────────── */
@media (max-width: 480px) {
  .toc { grid-template-columns: 1fr; }
}


/* ── Print — clean, ink-friendly ───────────────────── */
@media print {
  /* Force light background, dark text */
  body {
    background: white;
    color: black;
  }

  /* Hide ambient + interactive chrome */
  .aurora,
  .grid-bg,
  .nav,
  .to-top,
  .marquee,
  .toolbar,
  .filters,
  .skip-link {
    display: none !important;
  }

  /* Show URLs after each link for paper context */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Cards become bordered blocks */
  .card,
  .toc a,
  .principle,
  .stat {
    background: white !important;
    border: 1px solid #ccc !important;
    color: black !important;
    page-break-inside: avoid;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Bento collapses to single column */
  .bento,
  .toc,
  .principles,
  .footer-grid,
  .footer-menu {
    grid-template-columns: 1fr !important;
  }
}


/* ── A11y — respect user's motion preference ──────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card                       { opacity: 1 !important; transform: none !important; }
  .hero-pill,
  .hero-lead,
  .hero-actions,
  .stats-strip                { animation: none !important; }
  .hero-title .word           { transform: none !important; }
}