/* =========================================================
   SR AGENCIES — MOBILE GALLERY CAROUSEL
   Independent stylesheet
   Desktop and tablet layouts remain unchanged.
========================================================= */

@media screen and (max-width: 600px) {

    /* =====================================================
       MAIN HORIZONTAL CAROUSEL
    ===================================================== */

    #gallery .gallery-content {

        display: flex !important;

        flex-direction: row;
        flex-wrap: nowrap;

        align-items: stretch;

        gap: 13px;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 2px 12px;
        margin: 0;

        /* Native touch scrolling */
        -webkit-overflow-scrolling: touch;

        /* Snap each card into position */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        scroll-behavior: smooth;

        /* Prevent horizontal overscroll escaping the gallery */
        overscroll-behavior-x: contain;

        /* Keep both horizontal and vertical gestures available */
        touch-action: pan-x pan-y;

        /* Hide scrollbar */
        scrollbar-width: none;
    }

    #gallery .gallery-content::-webkit-scrollbar {
        display: none;
    }


    /* =====================================================
       MERGE BOTH EXISTING GRID WRAPPERS
       Their cards become items in one carousel.
       No HTML duplication required.
    ===================================================== */

    #gallery .gallery-top-grid,
    #gallery .gallery-bottom-grid {

        display: contents !important;

    }


    /* =====================================================
       INDIVIDUAL GALLERY CARDS
    ===================================================== */

    #gallery .gallery-card {

        position: relative;

        flex: 0 0 86%;

        width: 86%;
        max-width: 440px;
        min-width: 0;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 3;

        margin: 0;

        overflow: hidden;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        border-radius: 16px;

    }


    /* Override existing special card dimensions */

    #gallery .gallery-card-main,
    #gallery .gallery-card-paints,
    #gallery .gallery-card-materials,
    #gallery .gallery-card-godown,
    #gallery .gallery-card-products,
    #gallery .gallery-card-branch,
    #gallery .gallery-card-office {

        grid-column: auto !important;
        grid-row: auto !important;

        width: 86%;
        height: auto !important;
        min-height: 0 !important;

    }


    /* =====================================================
       IMAGE PRESENTATION
    ===================================================== */

    #gallery .gallery-card img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

    }


    /* =====================================================
       CARD CONTENT
    ===================================================== */

    #gallery .gallery-card-content {

        padding: 17px;

    }

    #gallery .gallery-card-category {

        font-size: 8px;

    }

    #gallery .gallery-card-main h3 {

        font-size: 18px;

    }

    #gallery .gallery-card h3 {

        font-size: 14px;
        line-height: 1.35;

    }

    #gallery .gallery-card-arrow {

        width: 38px;
        height: 38px;

    }


    /* =====================================================
       TOUCH DEVICE HOVER BEHAVIOUR
    ===================================================== */

    @media (hover: none) {

        #gallery .gallery-card:hover {

            transform: none;

        }

        #gallery .gallery-card:hover img {

            transform: none;

        }

        #gallery .gallery-card:hover .gallery-card-arrow {

            transform: none;

        }

    }

}


/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media screen and (max-width: 390px) {

    #gallery .gallery-card {

        flex-basis: 86%;
        width: 86%;

        border-radius: 14px;

    }

    #gallery .gallery-card-content {

        padding: 15px;

    }

}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media screen and (max-width: 600px) and
(prefers-reduced-motion: reduce) {

    #gallery .gallery-content {

        scroll-behavior: auto;
        scroll-snap-type: x proximity;

    }

}