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

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:
        linear-gradient(
            180deg,
            rgba(10,10,10,.90),
            rgba(0,0,0,.97)
        );

    backdrop-filter:blur(10px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

/*==================================================
    CONTENT
==================================================*/

.lightbox-content{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

}

/*==================================================
    STAGE
==================================================*/

.lightbox-stage{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

    overflow:hidden;
	
	

}


/*==================================================
    IMAGES
==================================================*/

.lightbox-image{

    position:absolute;

    inset:0;

    margin:auto;

    display:block;

    max-width:92%;

    max-height:92%;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:8px;

    box-shadow:

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

    opacity:0;

    transform:

        scale(.985);

    transition:

        opacity .45s ease,

        transform .45s ease;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}

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

.lightbox-image.is-visible{

    opacity:1;

    transform:scale(1);

    z-index:2;

}

.lightbox-image.is-hidden{

    opacity:0;

    transform:scale(.985);

    z-index:1;

}

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

.lightbox button{

    position:absolute;

    display:flex;

    justify-content:center;

    align-items:center;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

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

    color:var(--color-white);

    font-size:2rem;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        opacity .25s ease;

    z-index:30;

}

.lightbox button:hover{

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

    color:var(--color-gold);

}


.lightbox button:focus-visible{

    outline:2px solid var(--color-gold);

    outline-offset:4px;

}

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

.lightbox-close{

    top:24px;

    right:24px;

}

/*==================================================
    PREVIOUS / NEXT
==================================================*/

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:40;

}

.lightbox-prev{

    left:20px;

}

.lightbox-next{

    right:20px;

}

.lightbox-prev:active,
.lightbox-next:active{

    transform:
        translateY(-50%)
        scale(.94);

}

/*==================================================
    COUNTER
==================================================*/

.lightbox-counter{

    position:absolute;

    left:50%;

    bottom:28px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    color:var(--color-white);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.08em;

    z-index:30;

}

.current-image{

    color:var(--color-gold);

    font-weight:600;

}

.total-images{

    opacity:.75;

}

/*==================================================
    LAYERS
==================================================*/

.lightbox-stage{

    z-index:10;

}

.lightbox button{

    z-index:30;

}

.lightbox-counter{

    z-index:30;

}

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

@media (max-width:992px){

    .lightbox{

        padding:24px;

    }

    .lightbox-image{

        max-width:94%;

        max-height:90%;

    }

}

@media (max-width:768px){

    .lightbox{

        padding:18px;

    }

    .lightbox-image{

        max-width:96%;

        max-height:84%;

    }

    .lightbox button{

        width:48px;

        height:48px;

        font-size:1.6rem;

    }

    .lightbox-prev{

        left:14px;

    }

    .lightbox-next{

        right:14px;

    }

    .lightbox-close{

        top:14px;

        right:14px;

    }

    .lightbox-counter{

        bottom:18px;

    }

}

@media (max-width:480px){

    .lightbox{

        padding:12px;

    }

    .lightbox-image{

        max-width:98%;

        max-height:80%;

        border-radius:4px;

    }

    .lightbox button{

        width:42px;

        height:42px;

        font-size:1.4rem;

    }

    .lightbox-counter{

        padding:8px 14px;

        font-size:.82rem;

    }

}

/*==================================================
    TOUCH DEVICES
==================================================*/

@media (hover:none){

    .lightbox button:hover{

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

        color:var(--color-white);

    }

}

/*==================================================
    REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .lightbox,

    .lightbox-image,

    .lightbox button,

    .lightbox-counter{

        animation:none;

        transition:none;

    }

}


/*==================================================
    SELECTION
==================================================*/

.lightbox{

    -webkit-user-select:none;

    user-select:none;

}

/*==================================================
    CURSOR
==================================================*/

.lightbox-image{

    cursor:default;

}