/*==================================================
  GALLERY
  Zen Spa Home
==================================================*/

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

.gallery{

    position:relative;

    background:var(--color-surface);

    overflow:hidden;

}

.gallery .section-header{

    margin-bottom:90px;

}

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

.gallery-grid{

    display:grid;

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

    gap:1.5rem;

}

/*==============================================
  ITEMS
==============================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:#111;

}

.gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform 1.1s cubic-bezier(.22,.61,.36,1),

        filter .45s ease;

}

/*==============================================
  LAYOUT
==============================================*/

.gallery-item{

    grid-column:span 4;

    aspect-ratio:1/1;

}

.gallery-small{

    grid-column:span 3;

    aspect-ratio:4/5;

}

.gallery-large{

    grid-column:span 3;

    aspect-ratio:9/16;

}

.gallery-medium{

    grid-column:span 8;

    aspect-ratio:16/9;

}

.gallery-wide{

    grid-column:span 12;

    aspect-ratio:21/9;

}

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

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.45),

            rgba(0,0,0,0)

        );

    opacity:0;

    transition:opacity .45s ease;

    z-index:1;

}

/*==============================================
  ICON
==============================================*/

.gallery-item::after{

    content:"+";

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) scale(.8);

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:2rem;

    opacity:0;

    transition:

        opacity .35s ease,

        transform .45s ease;

    z-index:2;
    
    pointer-events:none;

}

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

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

/*==============================================
  SHADOW
==============================================*/

.gallery-item{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:

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

}

/*==============================================
  DECORATION
==============================================*/

.gallery::before{

    content:"";

    position:absolute;

    left:-250px;

    bottom:-250px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

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

            transparent 70%

        );

    pointer-events:none;

}

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

.lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

.lightbox-image {

    display: block;

    max-width: 90vw;

    max-height: 85vh;

    width: auto;

    height: auto;

    object-fit: contain;

}

.lightbox-video {

    display: block;

    max-width: 90vw;

    max-height: 85vh;

    width: auto;

    height: auto;

    object-fit: contain;

    background: #000;

    outline: none;

}

.lightbox-close,
.lightbox-prev,
.lightbox-next {

    position: fixed;

    z-index: 2;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 2rem;

}

.lightbox-close {

    top: 30px;

    right: 35px;

}

.lightbox-prev {

    left: 30px;

    top: 50%;

    transform: translateY(-50%);

}

.lightbox-next {

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

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

@media (max-width:992px){

    .gallery-grid{

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

    }

    .gallery-item,

    .gallery-large,

    .gallery-wide{

        grid-column:auto;

        aspect-ratio:4/3;

    }

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .gallery-item,

    .gallery-large,

    .gallery-wide{

        aspect-ratio:4/3;

    }

    .gallery-item{

        border-radius:22px;

    }

}