/* ==========================================================================
   Responsive — breakpoints for tablet and phone. Mobile menu behaviour
   also lives here so all responsiveness is controlled from one place.
   ========================================================================== */

/* ---- Tablet (<= 1024px) ------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; padding: var(--space-6) 0; text-align: center; }
  .hero p.hero__lead { margin-left: auto; margin-right: auto; }
  .hero .btn-group { justify-content: center; }
  .hero__media { order: -1; max-width: 480px; margin: 0 auto; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ---- Small tablet / large phone (<= 820px) ------------------------------ */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--color-white);
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    padding: var(--space-6) var(--space-3);
    transition: right var(--transition-base);
    overflow-y: auto;
  }
  .primary-nav.is-open { right: 0; }

  .primary-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .primary-nav__cta-item { margin-left: 0; margin-top: var(--space-2); }

  .grid-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .founder-message { grid-template-columns: 1fr; }
  .founder-message__photo { max-width: 180px; }

  .timeline::before { left: 6px; }
  .timeline li { grid-template-columns: 14px 1fr; }
  .timeline__date { text-align: left; grid-column: 1 / -1; padding-right: 0; margin-bottom: 0.25rem; }
  .timeline__content { grid-column: 1 / -1; padding-left: var(--space-3); }
}

/* ---- Phone (<= 600px) ---------------------------------------------------- */
@media (max-width: 600px) {
  :root { --container-padding: 1rem; }
  section { padding: var(--space-5) 0; }

  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: left; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }

  .donate-box dl { grid-template-columns: 1fr; }
  .donate-box dt { margin-top: var(--space-1); }

  .btn-group { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }

  .cta-banner { padding: var(--space-4); }
}