/* ==========================================================================
   One Kind World Foundation — responsive.css
   Mobile-first overrides. Loaded last. Breakpoints: 1024 / 768 / 480.
   ========================================================================== */

/* ---------- <= 1024px : tablet -------------------------------------------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .donate-cta__grid { gap: var(--space-6); }
  .mission__grid { grid-template-columns: 180px 1fr; gap: var(--space-5); }
}

/* ---------- <= 768px : mobile (nav collapses) ----------------------------- */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .section { padding-block: var(--space-8); }

  /* nav */
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }

  /* hero */
  .hero { min-height: 92svh; padding-bottom: var(--space-6); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero__stat { text-align: left; align-self: start; margin-top: var(--space-2); max-width: none; padding-bottom: 0; }
  .hero__stat .big { font-size: clamp(56px, 18vw, 92px); }
  .hero__stat .cap { margin-left: 0; max-width: 240px; }
  .hero__scroll { display: none; }

  /* grids collapse */
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .mission__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .stats__grid { grid-template-columns: 1fr; }
  .pillars__grid { grid-template-columns: 1fr; }
  .campaigns__grid { grid-template-columns: 1fr; }
  .science__grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .donate-cta__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--space-4); }
  .split--reverse .split__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }

  /* programs index */
  .program-row { grid-template-columns: 40px 1fr 24px; row-gap: 2px; }
  .program-row__cat { grid-column: 2; }
  .program-row__title { font-size: var(--text-lg); }

  /* mission */
  .mission__body { font-size: var(--text-lg); }

  /* quote */
  .quote__text { font-size: var(--text-xl); }
}

/* ---------- <= 480px : small phones --------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .hero h1 { font-size: 36px; }
  .donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .newsletter__form { flex-direction: column; border-radius: var(--radius-lg); background: transparent; border: none; padding: 0; gap: var(--space-1); }
  .newsletter__form input { background: #fff; border: 1px solid var(--color-stone); border-radius: var(--radius-pill); }
  .newsletter__form .btn { width: 100%; }
  .btn { width: 100%; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

@media (max-width: 768px) {
  .figures { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}