/* =========================================================================
   Women2Women — Responsive rules
   Breakpoints tested against: 320, 360, 375, 390, 414, 480, 768, 1024,
   1280, 1440, 1920. Mobile-first overrides layered from largest down.
   ========================================================================= */

/* ---------- 1280px and below: tighten desktop scale ---------- */
@media (max-width: 1280px) {
    .team-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
    .programs-grid { gap: 16px; }
}

/* ---------- 1024px: tablet landscape ---------- */
@media (max-width: 1024px) {
    section { padding: 70px 0; }

    .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-content { order: 1; }
    .hero-buttons { justify-content: center; }
    .hero-visual { order: 2; max-width: 460px; margin: 0 auto; }
    .hero-text { margin-left: auto; margin-right: auto; }

    .mission-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

    .about-grid { grid-template-columns: 1fr; gap: 36px; }
    .about-image { order: 1; }
    .about-content { order: 2; text-align: center; }
    .about-content .heading-underline { margin-left: auto; margin-right: auto; }

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

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

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

    .event-card { grid-template-columns: 1fr; }
    .event-image { min-height: 260px; }

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

    .content-layout { grid-template-columns: 1fr; }

    .footer-columns { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ---------- 768px: tablet portrait / mobile menu kicks in ---------- */
@media (max-width: 768px) {
    .main-navigation { position: fixed; top: 0; right: -100%; width: min(320px, 82vw); height: 100vh;
        background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.12); padding: 100px 30px 40px;
        transition: right 0.3s ease; z-index: 1000; overflow-y: auto; }
    .main-navigation.is-open { right: 0; }
    .main-navigation .primary-menu { flex-direction: column; align-items: flex-start; gap: 22px; }
    .mobile-menu-toggle { display: flex; position: relative; z-index: 1001; }

    /* Dimmed backdrop behind the open mobile menu — also makes it obvious
       that tapping outside the panel will close it. */
    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(32, 33, 61, 0.45);
        z-index: 999;
        animation: w2wBackdropFade 0.25s ease;
    }
    @keyframes w2wBackdropFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .site-header-actions { gap: 12px; }
    .btn-donate span { display: none; }
    .btn-donate { padding: 12px; border-radius: 50%; width: 44px; height: 44px; }

    .mission-grid { grid-template-columns: 1fr; }
    .programs-grid { grid-template-columns: repeat(2, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; }

    .footer-columns { grid-template-columns: 1fr; text-align: center; }
    .footer-social { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }

    .w2w-cta { margin: 0 16px; }
}

/* ---------- 480px and below: small phones ---------- */
@media (max-width: 480px) {
    .w2w-container { padding: 0 18px; }
    section { padding: 56px 0; }

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

    .programs-grid, .team-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .program-card { padding: 20px 14px; }

    .event-details { padding: 28px 22px; }

    .error-code { font-size: 4rem; }
}

/* ---------- 375px / 360px / 320px: extra-small phones, ensure no overflow ---------- */
@media (max-width: 375px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .programs-grid, .team-grid { grid-template-columns: 1fr; }
    .site-title-link .site-title { font-size: 1.1rem; }
}

/* Ensure absolutely nothing causes horizontal scroll on very narrow devices */
@media (max-width: 320px) {
    .btn { padding: 13px 22px; font-size: 0.85rem; }
    h1 { font-size: 1.9rem; }
}

/* ---------- Large desktop refinement ---------- */
@media (min-width: 1920px) {
    .w2w-container { max-width: 1440px; }
}