/* =========================================================
   RESPONSIVE STYLES
   Breakpoints: 1024px (tablet), 768px (small tablet), 480px (mobile)
   ========================================================= */

/* ---------- Tablet / Laptop (<=1024px) ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .gallery-grid { columns: 3 180px; }
  .donation-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Small tablet (<=768px) ---------- */
@media (max-width: 768px) {
  :root {
    --header-height: 72px;
    --header-height-scrolled: 60px;
  }

  .hamburger { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    z-index: 999;
  }
  .main-nav.open { max-height: 400px; }
  .main-nav ul { flex-direction: column; padding: 12px; gap: 4px; }
  .main-nav a { padding: 14px 16px; border-radius: var(--radius-sm); }

  .header-actions .btn { padding: 8px 14px; font-size: 0.85rem; white-space: nowrap; }

  .section { padding: 60px 0; }

  .grid-2, .grid-3, .grid-4, .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { columns: 2 160px; }

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

  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }

  #back-to-top { right: 84px; bottom: 22px; width: 42px; height: 42px; }
  .floating-btn { width: 50px; height: 50px; font-size: 1.3rem; }

  /* Tilt + cursor-trail are desktop-hover flourishes; keep touch devices simple */
  #cursor-glow-trail { display: none; }
}

/* ---------- Mobile (<=480px) ---------- */
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .filter-grid { grid-template-columns: 1fr; }
  .gallery-grid { columns: 2 140px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }

  .brand .brand-text .tagline { display: none; }

  .volunteer-cta { margin: 0 12px; padding: 50px 20px; }

  .newsletter-form { flex-direction: column; }
  .newsletter-form input { width: 100%; }

  .donation-card { padding: 22px; }

  .page-hero { padding: 80px 20px 50px; }
}