/*======================================*
        GALLERY V12
        ISOLATED MODULE
*======================================*/

/*======================================*
        GALLERY SECTION
*======================================*/

.gallery{

    position:relative;

    width:100%;

    padding:120px 0;

    overflow:hidden;

}


/*======================================*
        GALLERY GRID
*======================================*/

.gallery-grid{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:24px;

}


/*======================================*
        GALLERY CARD
*======================================*/

.gallery-item{

    position:relative;

    width:100%;

    height:260px;

    overflow:hidden;

    border-radius:20px;

    background:#1A1A1A;

    border:1px solid rgba(212,175,55,.14);

    box-shadow:
        0 15px 35px rgba(0,0,0,.25);

    cursor:pointer;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


/*======================================*
        GALLERY IMAGE
*======================================*/

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    cursor:pointer;

    transition:
        transform .7s ease,
        filter .7s ease;

}


/*======================================*
        OVERLAY
*======================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:flex-start;

    padding:28px;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,.30),
            transparent
        );

    opacity:0;

    transition:.45s ease;

}


/*======================================*
        OVERLAY TITLE
*======================================*/

.gallery-overlay h3{

    font-family:"Cinzel",serif;

    font-size:22px;

    font-weight:600;

    color:#ffffff;

    margin-bottom:6px;

    transform:translateY(15px);

    transition:.45s ease;

}


/*======================================*
        OVERLAY SUBTITLE
*======================================*/

.gallery-overlay span{

    color:#D4AF37;

    font-size:14px;

    letter-spacing:1px;

    transform:translateY(15px);

    transition:.5s ease;

}


/*======================================*
        HOVER
*======================================*/

.gallery-item:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.40);

    box-shadow:
        0 25px 55px rgba(0,0,0,.38);

}


.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(.72);

}


.gallery-item:hover .gallery-overlay{

    opacity:1;

}


.gallery-item:hover .gallery-overlay h3,
.gallery-item:hover .gallery-overlay span{

    transform:translateY(0);

}

/*======================================*
        GALLERY LIGHTBOX
*======================================*/

.lightbox{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.92);

    padding:40px;

}

.lightbox.active{

    display:flex;

}

#lightboxImg{

    max-width:90vw;

    max-height:85vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:12px;

}

.close-lightbox{

    position:absolute;

    top:25px;

    right:35px;

    color:#fff;

    font-size:42px;

    line-height:1;

    cursor:pointer;

    z-index:10001;

}

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.90);

    color:#111;

    font-size:25px;

    cursor:pointer;

    z-index:10001;

}

.prev{

    left:30px;

}

.next{

    right:30px;

}

.close-lightbox:hover{

    color:#D4AF37;

}

.prev:hover,
.next:hover{

    background:#ffffff;

}

@media(max-width:768px){

    .lightbox{

        padding:20px;

    }

    .close-lightbox{

        top:18px;

        right:20px;

        font-size:36px;

    }

    .prev{

        left:15px;

    }

    .next{

        right:15px;

    }

}


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

@media (max-width:992px){

    .gallery{

        padding:100px 0;

    }

    .gallery-grid{

        max-width:760px;

        grid-template-columns:repeat(2, 1fr);

        gap:22px;

    }

    .gallery-item{

        height:280px;

    }

}


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

@media (max-width:768px){

    .gallery{

        padding:80px 0;

    }

    .gallery-grid{

        width:calc(100% - 40px);

        grid-template-columns:1fr;

        gap:20px;

    }

    .gallery-item{

        height:270px;

    }

    .gallery-overlay{

        opacity:1;

    }

    .gallery-overlay h3,
    .gallery-overlay span{

        transform:translateY(0);

    }

}


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

@media (max-width:480px){

    .gallery{

        padding:70px 0;

    }

    .gallery-grid{

        width:calc(100% - 30px);

        gap:18px;

    }

    .gallery-item{

        height:230px;

        border-radius:18px;

    }

    .gallery-overlay{

        padding:22px;

    }

    .gallery-overlay h3{

        font-size:19px;

    }

    .gallery-overlay span{

        font-size:13px;

    }

}

/*======================================
        GALLERY CLICK FIX
======================================*/

.gallery-overlay{
    pointer-events:none;
}

.gallery-item img{
    cursor:pointer;
}