/* ==========================================================================
   GALLERY PAGE RESPONSIVE OVERRIDES
   Adapts the exact desktop styling for all screens using overrides.
   ========================================================================== */

/* 1. ULTRAWIDE MONITORS */
@media (max-width: 1920px) {
    /* Main structures maintain consistent outer spacing limits */
}

/* 2. LARGE DESKTOPS */
@media (max-width: 1600px) {
    /* Maintain layout proportions perfectly */
}

/* 3. DESKTOPS */
@media (max-width: 1440px) {
    /* Proportions and gaps stay consistent */
}

/* 4. SMALL DESKTOPS / LARGE LAPTOPS */
@media (max-width: 1280px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

/* 5. LAPTOPS */
@media (max-width: 1100px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .gallery-header {
        margin-top: 3rem;
    }
}

/* 6. TABLET LANDSCAPE & GENERAL TOUCH OVERRIDES */
@media (max-width: 1024px) {


    /* Set up clean 2x2 Social Grid */
    .social-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
        align-items: start !important;
        justify-content: center !important;
    }

    .social-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

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

/* 7. SMALL TABLET LANDSCAPE */
@media (max-width: 992px) {
    .gallery-header {
        margin-top: 2.5rem;
    }
    .cta {
        flex-direction: column;
        text-align: center;
        padding: 2rem 2.5rem;
        gap: 1.5rem;
        margin: 4.5rem auto;
    }
    .cta-left {
        flex-direction: column;
        gap: 1rem;
    }
}

/* 8. IPAD AIR / IPAD MINI / SMALL TABLETS */
@media (max-width: 820px) {
    .gallery-header h1 {
        font-size: 38px;
    }
    .gallery-header p {
        font-size: 14px;
        margin-top: 0.875rem;
    }
}

/* 9. TABLET PORTRAIT */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        margin-top: 2.5rem;
    }
    .social-card::after {
        display: none !important;
    }
    .lightbox-img {
        max-width: 90%;
        max-height: 75vh;
    }
    .lightbox-prev,
    .lightbox-next {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 20px;
    }
    .lightbox-prev {
        left: 1.5rem;
    }
    .lightbox-next {
        right: 1.5rem;
    }
    .lightbox-close {
        top: 1.5rem;
        right: 2rem;
    }
}

/* 10. MOBILE LANDSCAPE / SMALL TABLET */
@media (max-width: 640px) {
    .gallery-header h1 {
        font-size: 32px;
    }
    .filters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px;
        border-radius: var(--radius-xlarge, 1.25rem);
    }
    .filters::before {
        border-radius: var(--radius-xlarge, 1.25rem);
    }
    .filters button {
        padding: 8px 16px;
        font-size: 13px;
    }
    .filter-pill {
        display: none !important; /* Hide sliding capsule to prevent rendering issues on wrap */
    }
    .filters button.active {
        background: linear-gradient(135deg, var(--color-primary, #6cbf43), var(--color-primary-dark, #4caf2a));
        color: var(--color-white, #ffffff);
        box-shadow: var(--shadow-filter-pill);
    }
}

/* 11. LARGE MOBILE */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .big {
        grid-column: span 1;
        height: 280px; /* Scale down the main big card height safely on mobile */
    }
    
    /* Slightly reduced gap for 2x2 grid on mobiles */
    .social-grid {
        gap: 1rem !important;
    }

    /* Progressively scale down social icons to fit narrow viewports beautifully */
    .social-icon {
        width: 3.5rem !important;
        height: 3.5rem !important;
        font-size: 18px !important;
        border-radius: 14px !important;
    }

    .scroll-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    .whatsapp-float-btn {
        bottom: 1.25rem;
        left: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    .lightbox-img {
        max-width: 95%;
        max-height: 70vh;
    }
    .lightbox-prev,
    .lightbox-next {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 16px;
    }
    .lightbox-prev {
        left: 0.5rem;
    }
    .lightbox-next {
        right: 0.5rem;
    }
    .lightbox-close {
        top: 1rem;
        right: 1.25rem;
        font-size: 24px;
    }
}

/* 12. IPHONE PLUS / PRO MAX */
@media (max-width: 430px) {
    .gallery-header h1 {
        font-size: 28px;
    }
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 13. MOBILE SMALL-MEDIUM */
@media (max-width: 414px) {
    /* Spacing scales progressively */
}

/* 14. MOBILE SMALL */
@media (max-width: 390px) {
    /* Retain clean 2x2 layout, no column stacking */
}

/* 15. IPHONE SE / SMALL */
@media (max-width: 375px) {
    .gallery-header h1 {
        font-size: 26px;
    }
    .cta {
        padding: 1.5rem 1.25rem;
    }
}

/* 16. ANDROID SMALL */
@media (max-width: 360px) {
    .filters button {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* 17. EXTRA SMALL DEVICES */
@media (max-width: 320px) {
    .container {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
    .gallery-header h1 {
        font-size: 24px;
    }
    .back-btn {
        margin-top: 1.25rem;
    }
    .back-modern {
        height: 44px;
        padding: 0 1rem;
    }
}