/* ==========================================================================
   Zimbabwe Works — Responsive CSS
   Breakpoints: 320 / 480 / 640 / 768 / 1024 / 1280
   ========================================================================== */

/* --- Tablet & smaller desktop (1024px) --- */
@media (max-width: 1024px) {
    .grid-4     { grid-template-columns: repeat(2, 1fr); }
    .grid-3     { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .nav-link   { font-size: 0.83rem; padding: 0.4rem 0.45rem; }
    .brand-name { font-size: 1.05rem; }
    .contrib-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-preview-grid { grid-template-columns: repeat(3, 1fr); }
    .process-steps { flex-wrap: wrap; }
    .process-step { flex: 0 0 33.33%; }
    .process-step::after { display: none; }
    .lightbox-prev { left: -48px; }
    .lightbox-next { right: -48px; }
}

/* --- Tablet portrait (768px) --- */
@media (max-width: 768px) {
    /* Top bar */
    .top-bar-contact { gap: 0.75rem; font-size: 0.78rem; }
    .top-bar-contact a span { display: none; } /* hide label text, show only icon */
    .top-bar-social a { width: 24px; height: 24px; font-size: 0.7rem; }

    /* Nav — hamburger mode */
    .hamburger { display: flex; align-items: center; }
    .header-ctas { display: none; } /* Hide desktop CTAs on mobile/tablet */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.5rem 1.5rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        border-top: 2px solid var(--color-border);
        gap: 0;
        z-index: 998;
    }
    .nav-menu.open { display: flex; }
    .nav-menu .nav-link {
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
    }
    .nav-menu .nav-link:last-of-type { border-bottom: 1px solid var(--color-border); }
    
    /* Stacked Mobile CTAs inside the sliding nav-menu */
    .nav-menu-cta {
        display: block;
        width: 100%;
        margin-top: 0.75rem;
    }
    .nav-menu-cta .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.75rem 1rem;
    }
    .site-header { position: sticky; top: 0; }

    /* Grids */
    .grid-2  { grid-template-columns: 1fr; gap: 2rem; }
    .grid-3  { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .grid-4  { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

    /* Hero */
    .hero { padding: 3rem 0 2.5rem; }
    .hero .grid-2 { grid-template-columns: 1fr; }
    .hero-content { order: 1; }
    .hero-image  { order: 2; }
    .hero-image img { height: 320px; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content > p { font-size: 1rem; }

    /* Sections */
    .section     { padding: 3.5rem 0; }
    .section-header { margin-bottom: 2.5rem; }

    /* Stats */
    .stat-number { font-size: 2.5rem; }

    /* Process steps */
    .process-steps { flex-wrap: wrap; }
    .process-step  { flex: 0 0 50%; padding: 1rem 0.75rem; }

    /* Contrib cards */
    .contrib-cards-grid  { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .contribution-header { flex-direction: column; gap: 1rem; }
    .contribution-accent { height: 4px; width: 60px; margin: 0; }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-preview-item.tall { grid-row: span 1; aspect-ratio: 4/3; }

    /* Lightbox */
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-close { top: -44px; right: 0; }
    .lightbox-inner { max-width: 100%; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Forms */
    .form-row { grid-template-columns: 1fr; }

    /* Page hero */
    .page-hero { padding: 3rem 0 2rem; }
    .page-hero h1 { font-size: 2rem; }

    /* CTA section */
    .cta-section { padding: 3rem 0; }
    .donate-cta-section { padding: 3rem 0; }

    /* btn-group */
    .btn-group { justify-content: flex-start; }
}

/* --- Mobile (640px) --- */
@media (max-width: 640px) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.25rem; }

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

    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-preview-grid { grid-template-columns: 1fr 1fr; }

    .contrib-cards-grid { grid-template-columns: 1fr; }

    .process-step { flex: 0 0 100%; }

    /* Remove tall span on mobile gallery */
    .gallery-preview-item.tall { grid-row: span 1; aspect-ratio: 4/3; }

    /* Donation CTA */
    .donate-cta-section .btn-group { flex-direction: column; align-items: center; }
    .donate-cta-section .btn { width: 100%; justify-content: center; }

    /* CTA navy section */
    .cta-navy .btn-group { flex-direction: column; align-items: center; }
    .cta-navy .btn { width: 100%; justify-content: center; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-newsletter-form { flex-direction: column; }

    /* Top bar */
    .top-bar-inner {
        flex-direction: column;
        gap: 0.4rem;
        align-items: center;
    }
    .top-bar-contact { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
}

/* --- Small phones (480px) --- */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .hero-image img { height: 260px; }
    .brand-name { font-size: 0.95rem; }
    .brand img { height: 38px; }

    .section { padding: 2.5rem 0; }
    .section-header { margin-bottom: 2rem; }

    .btn { padding: 0.65rem 1.25rem; font-size: 0.875rem; }
    .btn-group { flex-direction: column; align-items: stretch; }
    .btn-group .btn { justify-content: center; }

    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-preview-grid { grid-template-columns: 1fr; }

    .prog-card-body .btn-group { flex-direction: column; }
    .prog-card-body .btn-group .btn { justify-content: center; }

    .stat-number { font-size: 2.2rem; }

    .lightbox-prev { left: 0.25rem; width: 36px; height: 36px; font-size: 0.9rem; }
    .lightbox-next { right: 0.25rem; width: 36px; height: 36px; font-size: 0.9rem; }

    .filter-btn { font-size: 0.78rem; padding: 0.4rem 0.9rem; }

    .top-bar { display: none; } /* Hide top bar on very small screens */
}

/* --- Very small phones (320px) --- */
@media (max-width: 360px) {
    h1 { font-size: 1.7rem; }
    .brand-name { font-size: 0.88rem; }
    .navbar { gap: 0.75rem; }
}

/* ==========================================================================
   LOGO MARQUEE — Responsive adjustments
   ========================================================================== */

/* Tablet: slightly smaller cards */
@media (max-width: 1024px) {
    .logo-marquee-item {
        width: 168px;
        padding: 0.85rem 1.1rem 0.75rem;
    }
    .logo-marquee-img {
        max-width: 120px;
        max-height: 46px;
    }
}

/* Mobile: even more compact */
@media (max-width: 768px) {
    .partner-marquee-section {
        padding-top: 3rem;
        padding-bottom: 2.5rem;
    }
    .logo-marquee-item {
        width: 148px;
        padding: 0.75rem 0.9rem 0.65rem;
    }
    .logo-marquee-img-wrap {
        height: 50px;
    }
    .logo-marquee-img {
        max-width: 108px;
        max-height: 40px;
    }
    .logo-marquee-name {
        font-size: 0.67rem;
    }
}

/* ==========================================================================
   REDUCED MOTION — stop marquee; show a static wrap-grid instead
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .logo-marquee {
        overflow: visible;
        /* Remove fade masks so all logos are visible */
        -webkit-mask-image: none;
        mask-image: none;
    }
    .logo-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 1rem;
        padding: 0 1.5rem;
    }
    /* Remove the duplicate aria-hidden set from view */
    .logo-marquee-item[aria-hidden="true"] {
        display: none;
    }
    .logo-marquee-item {
        width: 180px;
    }
}

/* ==========================================================================
   TEAM PHOTO & LEADER PHOTO — Responsive adjustments
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .leader-photo {
        max-width: 340px;
    }
}

/* Mobile portrait */
@media (max-width: 768px) {
    /* Leader photo scales down and stays centered above text */
    .leader-photo {
        max-width: 260px;
        aspect-ratio: 1 / 1;  /* Switch to square on mobile for compactness */
    }

    /* Team card photos: keep same 80px circle, already fine at this width */
    .team-photo {
        width: 72px;
        height: 72px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .leader-photo {
        max-width: 220px;
    }
}