/* ==========================================
   Gallery
========================================== */

.gallery{
    width:100%;
    background:var(--section-bg);
    padding:45px 20px;
    text-align:center;
    box-sizing:border-box;
}

.gallery-wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}

.gallery-wrapper::before,
.gallery-wrapper::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.gallery-wrapper::before{
    left:0;
    background:linear-gradient(to right,var(--section-bg),transparent);
}

.gallery-wrapper::after{
    right:0;
    background:linear-gradient(to left,var(--section-bg),transparent);
}

.gallery-grid{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:22px;
}

.gallery-track{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:22px;
    width:max-content;
}

.gallery-item{
    background:#fff;
    border:1px solid rgba(111,143,114,.16);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(111,143,114,.10);
    transition:var(--transition);
}

.gallery-item:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(111,143,114,.18);
    border-color:var(--accent);
}

.gallery-item img{
    width:100%;
    height:620px;
    object-fit:contain;
background:#fff;
    object-position:center top;
    display:block;
    transition:.45s;
}

.gallery-item:hover img{
    transform:scale(1.04);
}

.gallery-item::after{
    content:"";
    display:block;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
}

.gallery-btn{
    display:none;
}

/* ==========================================
   Desktop Infinite Gallery
========================================== */

@media (min-width:993px){

    .gallery-track{
        width:max-content;
        will-change:transform;
        animation:galleryMove 90s linear infinite;
    }

    .gallery-wrapper:hover .gallery-track{
        animation-play-state:paused;
    }

    .gallery-item{
        flex:0 0 240px;
        width:220px;
    }

    .gallery-item img{
        width:100%;
        height:425px;
        object-fit:contain;
background:#fff;
    }

}
@keyframes galleryMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* ==========================================
   TABLET GALLERY
========================================== */

@media (max-width:992px){

    .gallery{
        padding:40px 16px;
    }


    .gallery-wrapper{
        position:relative;
        overflow:hidden;
    }


    .gallery-track{

        display:flex;
        flex-direction:row;
        gap:16px;

        width:100%;

        overflow-x:auto;
        scroll-behavior:smooth;

        scrollbar-width:none;

        padding:0 calc((100% - 260px) / 2);

    }


    .gallery-track::-webkit-scrollbar{
        display:none;
    }



    .gallery-item{

         width:300px;
    min-width:300px;
    flex:0 0 300px;

        border-radius:18px;

        overflow:hidden;

        background:#000;

    }



    .gallery-item img{

        width:100%;

        height:500px;

        display:block;

        object-fit:contain;
background:#fff;

        object-position:center;

    }



    .gallery-btn{

        display:flex;

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        z-index:10;

        width:42px;

        height:42px;

        align-items:center;

        justify-content:center;

        border:none;

        border-radius:50%;

        background:white;

        color:#4a6e4e;

        font-size:24px;

        cursor:pointer;

    }



    .gallery-btn.prev{

        left:10px;

    }


    .gallery-btn.next{

        right:10px;

    }

}



/* ==========================================
   MOBILE GALLERY
========================================== */


@media(max-width:768px){


    .gallery{

        padding:25px 12px 15px;

    }



    .gallery-track{

        gap:14px;

        padding:0 calc((100% - 220px) / 2);

    }




    .gallery-item{

        width:260px;
    min-width:260px;
    flex:0 0 260px;

        border-radius:16px;

    }



    .gallery-item img{

        height:440px;

        object-fit:contain;
background:#fff;

        object-position:center;

    }



    .gallery-btn{

        width:36px;

        height:36px;

        font-size:20px;

    }

 .gallery-item{
        padding:0 !important;
        line-height:0; /* حذف فاصلهٔ احتمالی خطی زیر تصویر */
    }

    .gallery-item img{
        width:100%;
        max-width:none;
        display:block;
        height:440px;
        object-fit:contain;
        object-position:center top;
    }



}



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


@media(max-width:480px){


    .gallery{

        padding:20px 10px 15px;
    }



    .gallery-track{

        gap:12px;

        padding:0 calc((100% - 200px) / 2);

    }




    .gallery-item{

        width:230px;
    min-width:230px;

        flex:0 0 230px;

        border-radius:14px;

    }



    .gallery-item img{

        height:390px;

    }




    .gallery-btn{

        width:32px;

        height:32px;

        font-size:18px;

    }



    .gallery-btn.prev{

        left:6px;

    }



    .gallery-btn.next{

        right:6px;

    }

}