/* STORM — responsive rules
   Breakpoints follow the design system: nav collapses ~1180px,
   major two-column layouts stack ~1040px, tablet margins tighten,
   mobile drops to 20px margins and 1-up cards. */

/* ---- Cascading spacing tokens (covers every .container / .section) ---- */
@media (max-width: 1040px) {
  :root {
    --page-gutter: 22px;
    --section-space: 80px;
    --section-space-tight: 64px;
  }
}
@media (max-width: 640px) {
  :root {
    --page-gutter: 20px;
    --section-space: 60px;
    --section-space-tight: 52px;
  }
}

/* ============================================================ 1040px */
@media (max-width: 1040px) {
  .two-col,
  .home-crowd__grid,
  .home-econ__grid,
  .home-creators__grid,
  .hiw-result__grid,
  .about-columns,
  .about-guardrails__grid,
  .creators-hero__grid,
  .featured-clash__grid,
  .lb-points__grid,
  .creators-dashboard__row-a,
  .creators-dashboard__row-b,
  .creators-profile__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-arena__grid { grid-template-columns: minmax(0, 1fr); }
  .home-live__grid, .hiw-live__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-stream__grid { grid-template-columns: minmax(0, 1fr); }

  .grid-4, .creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .about-pillars { grid-template-columns: minmax(0, 1fr); }
  .creators-dashboard__kpis { grid-template-columns: minmax(0, 1fr); }

  .step-row--home { grid-template-columns: 110px minmax(0, 1fr); gap: 24px; }
  .step-row--home .step-row__num { font-size: 76px; }
  .step-row--phase { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .step-row--phase .step-row__num { font-size: 64px; }
  .step-row__aside { grid-column: 1 / -1; }

  .podium { grid-template-columns: minmax(0, 1fr); }
  .podium__card--runner { margin-top: 0; }

  .lb-head { display: none; }
  .lb-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 12px;
    padding: 16px 18px;
  }
  .lb-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-top: 12px;
    margin-top: 2px;
  }
  .lb-row--top .lb-stats { border-top-color: rgba(9, 9, 11, 0.25); }
  .lb-cell, .lb-streak { display: flex; flex-direction: column; gap: 3px; }
  .lb-move { grid-column: 1 / -1; text-align: right; }
  .lb-cell-label { display: block; }

  [data-hide-tablet] { display: none; }
}

/* ============================================================ 640px */
@media (max-width: 640px) {
  .home-flow { grid-template-columns: minmax(0, 1fr); }
  .grid-4, .creator-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ 480px (mobile) */
@media (max-width: 480px) {
  .nav__inner { gap: 16px; }
  .home-hero__eyebrow-row { gap: 10px; }
  .home-hero__formats { gap: 16px; flex-wrap: wrap; }
  .arena-card__body { grid-template-columns: 1fr 56px 1fr; }
  .arena-card__side-name { font-size: 20px; }
  .arena-card__side-pct { font-size: 32px; }
  .featured-clash__media { grid-template-columns: 1fr 44px 1fr; }
  .home-scorecard__score-num { font-size: 54px; }
  .cta-panel__lead { font-size: clamp(40px, 12vw, 64px); }
  .cta-panel__accent-line { font-size: clamp(28px, 9vw, 48px); }
  .event-setup__row2 { grid-template-columns: 1fr; }
  .creators-profile__body { padding: 20px; }
  .creators-profile__avatar { width: 84px; height: 84px; }
}

/* ============================================================ Utility: reduced-motion already handled per-component */