/* ========================================= */
/* RESPONSIVE STYLES                         */
/* ========================================= */

/* Tablet & Below */
@media (max-width: 1024px) {
    .story-intro .grid-2-col,
    .mission-vision .grid-2-col {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .future-leaders .grid-2-col {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .future-slideshow{
        min-height: 400px;
    }

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

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

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

    /* Tablet Gallery Layout: 2 Column Staggered */
    .immersive-grid {
        height: auto;
        max-height: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        perspective: none;
    }
    
    .gallery-card {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        width: 100% !important; min-width: auto !important;
        height: 45vw !important; /* Landscape ratio on tablet */
        transform: none !important;
    }

    /* Asymmetrical staggering */
    .card-1 { grid-column: 1 / 3; height: 50vw !important; } /* Full width feature */
    .card-2 { transform: rotate(-1deg) !important; }
    .card-3 { margin-top: 2rem; transform: rotate(1deg) !important; }
    .card-4 { grid-column: 1 / 3; height: 40vw !important; transform: rotate(-0.5deg) !important; }

    .immersive-grid.has-hover .gallery-card:not(:hover) {
        filter: none;
        transform: none !important;
    }
    
    .gallery-caption {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .grid-2-col {
        grid-template-columns: 1fr;
    }
    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .hero-title .line {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .future-leaders .grid-2-col {
        grid-template-columns: 1fr;
    }

    .future-slideshow {
        min-height: 300px;
        aspect-ratio: 3 / 4;
    }

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

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

    /* Mobile Gallery Layout: Tighter Staggered Grid */
    .immersive-grid {
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }

    .gallery-card {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        width: 100% !important; min-width: auto !important;
        height: 50vw !important; /* Taller ratio on mobile */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    /* Refined mobile staggering */
    .card-1 { grid-column: 1 / 3; height: 60vw !important; border-radius: 16px; }
    .card-2 { border-radius: 16px; transform: rotate(-1.5deg) !important; }
    .card-3 { margin-top: 1.5rem; border-radius: 16px; transform: rotate(1.5deg) !important; }
    .card-4 { grid-column: 1 / 3; height: 45vw !important; border-radius: 16px; transform: rotate(-0.5deg) !important; }

    /* Ensure touch devices don't get sticky hover dimming */
    .immersive-grid.has-hover .gallery-card:not(:hover) {
        filter: none !important;
        transform: scale(1) !important;
    }
    
    .gallery-caption {
        opacity: 1;
        transform: translateY(0);
        font-size: 1rem;
    }
    
    .card-glow {
        display: none;
    }

    /* ========================================= */
    /* MOBILE LOGO ADJUSTMENTS                   */
    /* ========================================= */
    .logo-title {
        font-size: 1.1rem; /* Slightly smaller on mobile */
    }

    .logo-subtitle {
        font-size: 0.6rem; /* Smaller subtitle on mobile */
    }

    .logo-image {
        height: 40px;
        width: 40px;
    }

        /* ========================================= */
    /* PROGRAMS MOBILE STYLES                    */
    /* ========================================= */
    .programs-hero {
        height: 70vh;
    }

    .program-grid, .program-section.reverse .program-grid {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 3rem;
    }

    .program-image {
        width: 100%;
    }

    .program-image .image-frame {
        border-radius: 16px; /* Slightly smaller radius on mobile */
        width: 100%;
    }

    .program-quote {
        font-size: 1.25rem;
    }

    .detail-item {
        gap: 0.75rem;
    }
    
          /* ========================================= */
    /* GET INVOLVED MOBILE STYLES                */
    /* ========================================= */
    .involved-hero {
        height: 70vh; /* Slightly shorter on mobile, but still full and cinematic */
    }

    /* Stack the donation cards */
    .tiers-grid {
        grid-template-columns: 1fr;
    }

    .donation-ctas {
        flex-direction: column;
        align-items: center;
    }

    .donation-ctas .btn {
        width: 100%;
    }

    .form-visual {
        padding-right: 0;
        margin-bottom: var(--space-md);
    }

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

    .form-container {
        padding: 1.5rem;
    }

    .delivery-toggle {
        flex-direction: column; 
        gap: 0.5rem;
    }

    .delivery-toggle input[type="radio"]:checked + .toggle-label {
        background: rgba(107, 143, 113, 0.1);
    }

    /* ========================================= */
    /* CONTACT MOBILE STYLES                     */
    /* ========================================= */
    .contact-hero {
        height: 70vh;
    }

    /* Map Section Mobile */
    .map-section {
        height: auto;
        margin-top: 0; /* Remove overlap on mobile */
        padding: var(--space-md); /* Keep padding */
    }

    .map-container {
        flex-direction: column;
        border-radius: 24px; /* Slightly smaller radius on mobile */
        height: auto;
    }

    .map-container iframe {
        height: 250px; /* Compact map height on mobile */
        border-radius: 24px 24px 0 0; /* Round top, flat bottom */
    }

    /* Overlay stacks below map inside the container */
    .map-overlay-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        border-radius: 0 0 24px 24px; /* Flat top, round bottom to seal the container */
        /* Slightly less transparent on mobile for readability over white backgrounds */
        background: rgba(255, 255, 255, 0.85); 
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: var(--space-md);
        box-shadow: none; /* Remove shadow since it's inside the container */
    }

    /* Form Section Mobile Adjustments */
    .form-container {
        padding: 1.5rem;
    }

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

    .delivery-toggle {
        flex-direction: column; 
        gap: 0.5rem;
    }

    .form-group input:invalid:not(:placeholder-shown),
    .form-group textarea:invalid:not(:placeholder-shown) {
        border-color: #FF6B6B;
    }

    /* Ensure toggle stacks on small screens */
    .delivery-toggle {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Very small devices (e.g., iPhone SE, 375px and below) */
@media (max-width: 375px) {
    .logo-subtitle {
        display: none; /* Hide subtitle on the tiniest screens to prevent crowding */
    }
}




/* Tablet & Below */
@media (max-width: 1024px) {
    .pillars-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .showcase-content {
        width: 60%;
        left: 5%;
    }

    .queue-thumb {
        width: 60px;
        height: 60px;
    }

    .about-hero {
        height: 70vh;
        padding-bottom: var(--space-lg);
    }

    .showcase-content {
        width: 90%;
        left: 5%;
        top: 15%;
        transform: none;
    }

    .glass-card {
        padding: var(--space-md);
    }

    .showcase-queue {
        bottom: var(--space-md);
        right: 50%;
        transform: translateX(50%);
    }

    .queue-thumb {
        width: 50px;
        height: 50px;
    }

    .founders-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .founder-img-wrap {
        width: 200px;
        height: 200px;
    }

    /* About Page Mobile Specifics */
    .about-hero {
        height: 70vh;
        padding-bottom: var(--space-lg);
    }

    .showcase-content {
        width: 90%;
        left: 5%;
        top: 15%;
        transform: none;
    }

    .glass-card {
        padding: var(--space-md);
    }

    .showcase-queue {
        bottom: var(--space-md);
        right: 50%;
        transform: translateX(50%);
    }

    .queue-thumb {
        width: 50px;
        height: 50px;
    }

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

    .founders-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .founder-img-wrap {
        width: 200px;
        height: 200px;
    }
    .ways-grid {
        grid-template-columns: 2fr;
    }
}