/*==================================================
  GALLERY.CSS
  Zen Spa Home
==================================================*/

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

.gallery{

    position:relative;

    overflow:hidden;

    background:var(--color-secondary);

}

/*==============================================
  BACKGROUND GLOW
==============================================*/

.gallery::before{

    content:"";

    position:absolute;

    left:-260px;

    bottom:-260px;

    width:620px;

    height:620px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(185,145,93,.10),

        transparent 70%

    );

    pointer-events:none;

    z-index:0;

}

/*==============================================
  CONTAINER
==============================================*/

.gallery .container{

    position:relative;

    z-index:2;

}

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

.gallery-grid{

    display:grid;

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

    gap:24px;

}

/*==============================================
  ITEM
==============================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    aspect-ratio:4/5;

    background:#111;

    cursor:pointer;

    isolation:isolate;

    border:1px solid rgba(255,255,255,.05);

    transform:translateZ(0);

    transform-style:preserve-3d;

    will-change:transform;

    transition:

        border-color .35s ease,

        box-shadow .35s ease;

}

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

.gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

    will-change:transform, filter;

    filter:brightness(.96);

}

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

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.55),

        rgba(0,0,0,.05)

    );

    opacity:0;

    transition:opacity .45s ease;

    z-index:2;

}

/*==============================================
  GOLD LIGHT
==============================================*/

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(

        circle at center,

        rgba(185,145,93,.18),

        transparent 70%

    );

    opacity:0;

    transition:opacity .45s ease;

    mix-blend-mode:screen;

    z-index:3;

}

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

.gallery-item:hover{

    border-color:rgba(185,145,93,.45);

    box-shadow:

        0 25px 60px rgba(0,0,0,.28),

        0 0 60px rgba(185,145,93,.10);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

}

.gallery-item:hover img{

    filter:brightness(1.08);

}

/*==============================================
  MASONRY FEEL
==============================================*/

.gallery-item:nth-child(2){

    aspect-ratio:4/6;

}

.gallery-item:nth-child(3){

    aspect-ratio:1/1;

}

.gallery-item:nth-child(5){

    aspect-ratio:4/6;

}

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

@media (max-width:1100px){

    .gallery-grid{

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

    }

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .gallery-item{

        aspect-ratio:4/5 !important;

        border-radius:20px;

    }

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

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:90vw;

    max-height:85vh;

    border-radius:18px;

    object-fit:contain;

    box-shadow:

        0 40px 80px rgba(0,0,0,.45);

}

.lightbox button{

    position:absolute;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    font-size:28px;

    transition:.3s;

}

.lightbox button:hover{

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

}

.lightbox-close{

    top:40px;

    right:40px;

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

@media(max-width:768px){

    .lightbox-prev{

        left:15px;

    }

    .lightbox-next{

        right:15px;

    }

    .lightbox-close{

        top:15px;

        right:15px;

    }

}