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



.lightbox {


    position:fixed;


    inset:0;


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


    display:none;


    align-items:center;


    justify-content:center;


    z-index:2000;


    padding:30px;


}





.lightbox.active {


    display:flex;


    animation:lightboxFade .3s ease;


}







#lightbox-image {


    max-width:90%;


    max-height:85vh;


    object-fit:contain;


    border-radius:18px;


    box-shadow:0 20px 60px rgba(0,0,0,.5);


    animation:imageZoom .35s ease;


}








/* =========================
   CLOSE BUTTON
========================= */


.close-lightbox {


    position:absolute;


    top:25px;


    right:35px;


    background:none;


    border:none;


    color:white;


    font-size:3rem;


    cursor:pointer;


    line-height:1;


    transition:.3s;


}




.close-lightbox:hover {


    color:var(--gold-light);


    transform:rotate(90deg);


}








/* =========================
   GALLERY ARROWS
========================= */


.gallery-prev,
.gallery-next {


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:55px;


    height:55px;


    border-radius:50%;


    border:none;


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


    color:white;


    font-size:2rem;


    cursor:pointer;


    backdrop-filter:blur(8px);


    transition:.3s;


}





.gallery-prev {


    left:35px;


}





.gallery-next {


    right:35px;


}





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


    background:var(--gold);


    color:var(--dark-green);


}








/* =========================
   ANIMATIONS
========================= */


@keyframes lightboxFade {


    from {

        opacity:0;

    }


    to {

        opacity:1;

    }


}





@keyframes imageZoom {


    from {

        opacity:0;

        transform:scale(.85);

    }


    to {

        opacity:1;

        transform:scale(1);

    }


}








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


@media(max-width:700px){


    .lightbox {

        padding:15px;

    }



    #lightbox-image {


        max-width:95%;


        max-height:75vh;


    }




    .close-lightbox {


        top:15px;


        right:20px;


        font-size:2.5rem;


    }




    .gallery-prev,
    .gallery-next {


        width:45px;


        height:45px;


        font-size:1.5rem;


    }



    .gallery-prev {


        left:15px;


    }




    .gallery-next {


        right:15px;


    }



}