/* ==========================================================================
   RESPONSIVE.CSS — Laptop, Tablet, Mobile breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAPTOP (<=1180px)
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --space-xl: 5.5rem; --space-2xl: 7rem; }

  .features-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .audience-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col.newsletter { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   TABLET (<=980px)
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-stats { position: static; flex-direction: row; margin-top: var(--space-sm); }
  .hero-desc { max-width: 100%; }

  .timeline-grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .founder-grid { grid-template-columns: 1fr; }
  .founder-media { max-width: 380px; margin: 0 auto; }

  .donate-grid { grid-template-columns: 1fr; max-width: 420px; }

  .gallery-item { width: clamp(150px, 26vw, 210px); }

  .audience-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
}

/* --------------------------------------------------------------------------
   MOBILE (<=680px)
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  :root { --space-xl: 4rem; --space-lg: 2.6rem; --container-w: 100%; }

  .container { padding: 0 1.2rem; }

  .marquee-track span { font-size: 0.7rem; padding: 0 1.2rem; }

  .hero { padding-top: var(--space-lg); }
  .hero-title { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { flex-direction: column; }
  .stat-card { width: 100%; }

  .features-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    margin: 0 -1.2rem;
    padding: 0.3rem 1.2rem 1.4rem;
  }

  .features-grid::-webkit-scrollbar { display: none; }

  .feature-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .features::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--color-gold-soft);
  }

  .day-body { padding: var(--space-sm); }

  .audience-grid { grid-template-columns: 1fr 1fr; }

  .gallery-item { width: clamp(130px, 42vw, 170px); }
  .gallery-slider { gap: 0.6rem; }
  .gallery-track { gap: 0.6rem; }

  .founder-media { max-width: 280px; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .form-grid { grid-template-columns: 1fr; }

  .popup-modal { padding: var(--space-md) 1.2rem 1.5rem; }

  .whatsapp-fab { right: 1.1rem; bottom: 1.1rem; width: 48px; height: 48px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .back-to-top { right: 1.1rem; bottom: 5.4rem; width: 42px; height: 42px; }

  /* Mobile nav drawer */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: rgba(10, 5, 16, 0.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--color-glass-border);
    padding: 6rem 2rem 2rem;
    gap: var(--space-md);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-luxury);
    z-index: 65;
  }

  .nav-links.is-open { transform: translateX(0); }

  .nav-links a { font-size: 1rem; }

  .nav-cta .btn-small { display: none; }

  body.menu-open { overflow: hidden; }

  .nav-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

@media (max-width: 420px) {
  .feature-card { flex: 0 0 86%; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item { width: 62vw; }
}