/*
==========================================================
Website V3 Gallery
==========================================================
*/

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

.gallery-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}



/* ==========================
   Main Image
========================== */

.gallery-main{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fafafa;

    border:1px solid #eee;

    border-radius:8px;

    overflow:hidden;

    height:560px;

    user-select:none;

}



.gallery-main img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    cursor:pointer;

    transition:opacity .25s ease, transform .20s ease;

}



.gallery-main img:hover{

    transform:scale(1.01);

}



/* ==========================
   Thumbnail Strip
========================== */

.gallery-strip-wrapper{

    display:flex;

    align-items:center;

    margin-top:18px;

    gap:8px;

}



.gallery-strip{

    flex:1;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scroll-behavior:smooth;

    scrollbar-width:thin;

}



.gallery-strip::-webkit-scrollbar{

    height:8px;

}



.gallery-strip::-webkit-scrollbar-thumb{

    background:#bbb;

    border-radius:8px;

}



.gallery-thumb{

    width:60px;

    height:45px;

    object-fit:cover;

    display:inline-block;

    margin-right:6px;

    border:2px solid transparent;

    border-radius:5px;

    cursor:pointer;

    transition:.2s;

}



.gallery-thumb:hover{

    border-color:#999;

}



.gallery-thumb.active{

    border-color:#f0ad4e;

}



/* ==========================
   Arrow Buttons
========================== */

.gallery-arrow{

    width:34px;

    height:46px;

    border:1px solid #ddd;

    background:#fff;

    border-radius:6px;

    cursor:pointer;

    font-size:18px;

    transition:.2s;

}



.gallery-arrow:hover{

    background:#f7f7f7;

}



/* ==========================
   Text
========================== */

.gallery-text{

    margin-top:14px;

    text-align:center;

    color:#666;

    font-size:13px;

}



.gallery-classic{

    text-align:center;

    margin-top:8px;

}



.gallery-classic a{

    font-size:13px;

}



/* ==========================
   Lightbox
========================== */

.gallery-lightbox{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:99999;

    justify-content:center;

    align-items:center;

}



.gallery-lightbox.active{

    display:flex;

}



.gallery-lightbox img{

    max-width:92vw;

    max-height:90vh;

    object-fit:contain;

}



/* ==========================
   Close
========================== */

.gallery-close{

    position:absolute;

    top:20px;

    right:25px;

    background:none;

    border:none;

    color:#fff;

    font-size:42px;

    cursor:pointer;

}



/* ==========================
   Prev / Next
========================== */

.gallery-light-prev,

.gallery-light-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.2s;

}



.gallery-light-prev:hover,

.gallery-light-next:hover{

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

}



.gallery-light-prev{

    left:20px;

}



.gallery-light-next{

    right:20px;

}



/* ==========================
   Tablet
========================== */

@media (max-width:991px){

    .gallery-main{

        height:430px;

    }

}



/* ==========================
   Phone
========================== */

@media (max-width:768px){

    .gallery-main{

        height:320px;

    }



    .gallery-thumb{

        width:55px;

        height:42px;

    }



    .gallery-arrow{

        width:30px;

        height:42px;

    }

}