/* Breakpoints follow the SHAHICA prototype: 1050px and 760px. */

@media (max-width: 1050px) {
  /* Three items share a narrow bar — logo, language + donate, burger — so the
     generous desktop gap has to go or the row runs past the screen edge. */
  .header { gap: 12px; }
  .header-actions { gap: 8px; }

  .header-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 90px 24px 32px; gap: 4px; overflow-y: auto;
    transform: translateX(100%); transition: transform .28s ease;
    border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(0,0,0,.1);
    z-index: 45; font-size: 16px;
  }
  .header-nav[data-open='true'] { transform: none; }
  .header-nav > a, .nav-item > button { padding: 13px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; min-height: 44px; }

  .nav-submenu { position: static; border: 0; box-shadow: none; padding: 4px 0 8px 14px; min-width: 0; }
  .nav-submenu a { padding: 10px 0; font-weight: 500; }

  .menu-toggle { display: block; margin-left: auto; }
  .header-actions { margin-left: 0; }

  /* Dim and block the page behind the drawer. */
  .drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 44; border: 0; }
  body.menu-open { overflow: hidden; }

  .hero-grid, .grid-2, .split-panel { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sponsor-box { grid-template-columns: 1fr; }
  .sponsor-box > div:first-child { padding: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 760px) {
  :root { --gutter: 6vw; }

  /* A percentage gutter would eat the bar; below 760px the header keeps a
     fixed 16px inset so the row width is predictable on every handset. */
  .header { min-height: 70px; padding: 0 16px; gap: 10px; }
  .brand img, .brand svg { width: 132px; }
  .header-actions .btn { padding: 10px 13px; font-size: 13px; }
  .locale-switch a { padding: 5px 8px; font-size: 11px; }
  .menu-toggle { padding: 8px 2px; }

  .section { padding: 60px var(--gutter); }
  .hero { padding: 40px var(--gutter) 60px; }
  .page-hero { padding: 44px var(--gutter); }

  h1 { font-size: clamp(34px, 9vw, 48px); }
  h2 { font-size: clamp(27px, 7vw, 36px); }

  .card-grid, .involve-grid, .report-grid, .video-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner { padding: 40px 24px; }
  .facts { gap: 22px; }
  .footer-legal { flex-direction: column; gap: 8px; }

  /* Full-width CTAs are easier to hit on a phone. */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
}

/* Small handsets (iPhone SE, Galaxy A0x and the like) — the header bar is the
   only row with no slack left, so it tightens once more. */
@media (max-width: 400px) {
  .header { padding: 0 12px; gap: 8px; }
  .brand img, .brand svg { width: 108px; }
  .header-actions .btn { padding: 10px 10px; font-size: 12.5px; }
  .locale-switch a { padding: 5px 6px; font-size: 10px; }
  .menu-toggle { font-size: 23px; }

  .gallery-grid { grid-template-columns: 1fr; }
  .form-card, .report-card { padding: 20px; }
  .cta-banner { padding: 32px 18px; }
  .sponsor-box > div:first-child { padding: 28px 20px; }
}