/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; max-width: 640px; padding-top: 110px; }
  .hero-card  { display: none; }
  .hero-heading { font-size: clamp(2.4rem, 5.5vw, 3.8rem); }
  .campaigns-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-grid    { grid-template-columns: repeat(2, 1fr); }
  .steps-grid     { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .tgrid          { grid-template-columns: 1fr 1fr; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .donation-inner { grid-template-columns: 1fr; }
  .donate-grid    { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }
  .campaign-detail-grid { grid-template-columns: 1fr; }
  .campaign-sidebar-card { position: static; }
  .cta-banner { grid-template-columns: 1fr; padding: 3.5rem 2.5rem; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }

  /* Mobile nav handled via visibility in components.css */
}

@media (max-width: 768px) {
  section { padding: 60px 0; }
  .nav-list, .nav-actions > .btn { display: none; }
  .hamburger { display: flex; }

  /* Force Manrope font on mobile */
  body, p, h1, h2, h3, h4, h5, h6, span, a, button, input, textarea, select, label, li, td, th, div {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  }
  .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .campaigns-grid { grid-template-columns: 1fr; }
  .tgrid { grid-template-columns: 1fr; }
  .stories-grid   { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .newsletter-wrap { flex-direction: column; align-items: flex-start; }
  .newsletter-form { max-width: 100%; width: 100%; }
  .trust-inner { flex-wrap: wrap; gap: 1rem; }
  .hero-stats  { gap: 1.25rem; flex-wrap: wrap; }
  .cta-banner  { padding: 2.5rem 1.5rem; }

  .mobile-nav-overlay { display: block; }
}

@media (max-width: 480px) {
  .hero-heading  { font-size: 2.1rem; }
  .impact-grid   { grid-template-columns: 1fr 1fr; }
  .steps-grid    { grid-template-columns: 1fr; }
  .amount-grid   { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { flex-direction: column; gap: .75rem; align-items: flex-start; }
  .cta-banner h2 { font-size: 1.7rem; }
}

/* Desktop — always hide mobile nav completely */
@media (min-width: 1025px) {
  .mobile-nav {
    visibility: hidden !important;
    transform: translateX(100%) !important;
  }
  .mobile-nav-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .hamburger {
    display: none !important;
  }
}

/* Force scrollbar to prevent horizontal layout shift */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }