/*==================================================
DAYAL PARADISE V2
Gallery Module
assets/css/gallery.css
==================================================*/

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

.gallery{

    position:relative;
    background:linear-gradient(180deg,#080808,#111,#080808);
    overflow:hidden;

}

.gallery::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(216,179,106,.08),
    transparent 70%);

    left:-250px;
    bottom:-250px;

    pointer-events:none;

}

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

.gallery-grid{

    display:grid;

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

    gap:24px;

}

.gallery-grid img{

    width:100%;
    height:330px;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    transition:

        transform .45s ease,
        filter .45s ease,
        box-shadow .45s ease;

    box-shadow:

        0 12px 35px rgba(0,0,0,.25);

}

.gallery-grid img:hover{

    transform:translateY(-10px) scale(1.03);

    filter:brightness(1.08);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}

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

.gallery-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}

.gallery-stage{

    width:min(92vw,1100px);

    display:flex;

    justify-content:center;

    align-items:center;

}

.gallery-stage img{

    max-width:100%;

    max-height:90vh;

    border-radius:16px;

    box-shadow:

        0 35px 80px rgba(0,0,0,.65);

    animation:galleryZoom .35s ease;

}

@keyframes galleryZoom{

from{

opacity:0;
transform:scale(.92);

}

to{

opacity:1;
transform:scale(1);

}

}

/*==================================
BUTTONS
==================================*/

.gallery-close,
.gallery-prev,
.gallery-next{

    position:absolute;

    width:56px;
    height:56px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    backdrop-filter:blur(15px);

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover{

    background:var(--gold);

    color:#111;

}

.gallery-close{

    top:35px;
    right:35px;

}

.gallery-prev{

    left:30px;
    top:50%;

    transform:translateY(-50%);

}

.gallery-next{

    right:30px;
    top:50%;

    transform:translateY(-50%);

}

/*==================================
BACKDROP
==================================*/

.gallery-backdrop{

    position:absolute;

    inset:0;

}

/*==================================
IMAGE CAPTION (OPTIONAL)
==================================*/

.gallery-caption{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    color:#fff;

    font-size:15px;

    letter-spacing:1px;

    padding:12px 24px;

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

    border-radius:50px;

    backdrop-filter:blur(10px);

}

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

.gallery-grid img{

    position:relative;

}

.gallery-grid img::after{

    content:"";

    position:absolute;

    inset:0;

}

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

@media(max-width:1100px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:260px;

}

.gallery-prev,
.gallery-next{

display:none;

}

.gallery-close{

top:20px;
right:20px;

}

.gallery-stage{

width:96vw;

}

}

@media(max-width:480px){

.gallery-grid{

gap:18px;

}

.gallery-grid img{

height:220px;

border-radius:14px;

}

.gallery-close{

width:48px;
height:48px;

font-size:22px;

}

}