/* ==========================================================================
   Responsive enhancements (mobile-first: base styles target small screens)
   ========================================================================== */

@media (max-width: 380px) {
  .brand-logo { height: 44px; }
  .brand-mark { width: 38px; height: 38px; }
  .purpose-grid { grid-template-columns: 1fr; }
  .donate-card { padding: 18px 14px; }
}

@media (min-width: 560px) {
  .amount-grid { grid-template-columns: repeat(4, 1fr); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .transparency-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: repeat(4, 1fr); }
  .donate-card { padding: 28px 26px; }
}

@media (min-width: 760px) {
  .container { padding-inline: 28px; }
  .section { padding: 84px 0; }
  .card-grid, .story-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .cta-inner { grid-template-columns: 1.4fr 1fr; text-align: left; align-items: center; }
  .cta-actions { justify-content: flex-end; }
  .two-col { grid-template-columns: 1fr 1fr; align-items: start; }
  .hero::before { background: linear-gradient(90deg, rgba(40, 20, 71, .92) 0%, rgba(40, 20, 71, .7) 45%, rgba(40, 20, 71, .15) 100%); }
  .hero-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  :root { --header-h: 78px; }
  .card-grid, .story-grid { grid-template-columns: repeat(3, 1fr); }
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .transparency-grid { grid-template-columns: repeat(4, 1fr); }
  .donate-layout { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
  .donate-intro { position: sticky; top: calc(var(--header-h) + 30px); padding-top: 20px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
  .footer-grid > :last-child { grid-column: auto; }
  .purpose-grid { grid-template-columns: repeat(4, 1fr); }
  .two-col-wide { grid-template-columns: 1.2fr .8fr; }

  /* Desktop navigation */
  .nav-toggle { display: none; }
  .primary-nav {
    position: static; display: flex !important; align-items: center; gap: 6px;
    max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; animation: none;
  }
  .primary-nav ul { display: flex; gap: 2px; }
  .primary-nav li a {
    position: relative; padding: 10px 11px; border: 0; font-size: 1rem; border-radius: 8px;
  }
  .primary-nav li a::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
    background: var(--gold); transform: scaleX(0); transition: transform .25s var(--ease);
  }
  .primary-nav li a:hover::after, .primary-nav li a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-donate { margin: 0 0 0 10px; width: auto; min-height: 44px; padding: .55em 1.2em; }
}

@media (min-width: 1200px) {
  .primary-nav li a { padding: 10px 14px; }
  .primary-nav li a::after { left: 14px; right: 14px; }
}

/* Short landscape phones: keep the hero compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
}

@media print {
  .site-header, .announcement, .site-footer, .dev-banner, .hero-actions, .cta-band { display: none !important; }
  body { background: #fff; }
}