/* ============================================
   SPARSH SEVA SANATHAN � Responsive Styles
   ============================================ */

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root {
    --fs-5xl: 2.5rem;
    --fs-4xl: 2rem;
    --fs-3xl: 1.625rem;
  }

  .grid-4, .stats-grid, .donation-amounts { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .cert-grid, .values-grid, .benefits-grid, .trust-badges { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-preview, .contact-grid, .payment-section, .story-card { grid-template-columns: 1fr; }
  .story-card:nth-child(even) { direction: ltr; }
  .about-preview-badge { right: var(--space-lg); bottom: var(--space-lg); }
  .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
  .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .gallery-preview-item:first-child { grid-row: span 1; grid-column: span 2; }

  .timeline::before { left: 20px; }
  .timeline-dot { left: 20px; }
  .timeline-item, .timeline-item:nth-child(odd) { flex-direction: row; }
  .timeline-content, .timeline-item:nth-child(odd) .timeline-content {
    width: calc(100% - 56px); margin-left: 56px; margin-right: 0; text-align: left;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
    --space-4xl: 4rem;
    --fs-5xl: 2rem;
    --fs-4xl: 1.75rem;
  }

  .hamburger { display: flex; }
  .nav-menu {
    position: fixed;
    top: 0; right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
    gap: 0;
    box-shadow: var(--shadow-xl);
    transition: right var(--transition-base);
    overflow-y: auto;
  }
  .nav-menu.active { right: 0; }
  .nav-link { color: var(--color-text); padding: var(--space-md) 0; width: 100%; font-size: var(--fs-base); }
  .nav-link:hover, .nav-link.active { color: var(--color-primary); }
  .nav-dropdown { width: 100%; }
  .dropdown-menu {
    position: static; transform: none; box-shadow: none; padding-left: var(--space-md);
    opacity: 1; visibility: visible; display: none; background: var(--color-gray-light);
    margin-top: var(--space-sm); border-radius: var(--radius-sm);
  }
  .nav-dropdown.open .dropdown-menu { display: block; }
  .nav-cta { margin: var(--space-lg) 0 0; width: 100%; }
  .nav-cta .btn { width: 100%; }

  .grid-2, .grid-3, .grid-4, .stats-grid, .cert-grid, .values-grid,
  .benefits-grid, .donation-amounts, .team-grid,
  .download-list, .form-row { grid-template-columns: 1fr; }

  .hero-stats { flex-direction: column; gap: var(--space-lg); }
  .hero-content { padding-top: calc(var(--header-height) + var(--space-2xl)); }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; }
  .newsletter-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .gallery-masonry { grid-template-columns: 1fr; }
  .gallery-preview-grid { grid-template-columns: 1fr; }
  .gallery-preview-item:first-child { grid-column: span 1; }
  .cert-actions { flex-direction: column; }
  .cert-actions .btn { width: 100%; }
  .pie-chart { flex-direction: column; }
  .bar-chart { height: 220px; overflow-x: auto; min-width: 100%; }
  .bar { width: 36px; }
  .scroll-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
  .about-preview-img img { height: 320px; }
  .cta-section { padding: var(--space-2xl) var(--space-lg); }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }
  .section { padding: var(--space-3xl) 0; }
  .hero-title { font-size: var(--fs-3xl); }
  .hero-desc { font-size: var(--fs-base); }
  .stat-number { font-size: var(--fs-3xl); }
  .donation-amount { font-size: var(--fs-2xl); }
  .error-code { font-size: 5rem; }
}