/**
 * Brunon — gallery lightbox.
 *
 * Hook: data-lightbox="<full-size url>" + data-index on each slide of a
 * .gallery_slider (template-parts/gallery.php, cabinet intro). The modal is
 * built on first use by assets/js/script.js; its counter and arrows reuse
 * the .gallery_navs / .swipe_arrow styles from style.min.css.
 *
 * Not compiled from SCSS — edit this file directly.
 */

[data-lightbox] {
    cursor: zoom-in;
}

html._lightbox,
html._lightbox body {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 16px 24px;
    box-sizing: border-box;
    background: #FFFEFA;
    opacity: 0;
    transition: opacity .3s;
}

.lightbox[hidden] {
    display: none;
}

.lightbox._opened {
    opacity: 1;
}

.lightbox_stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1200px;
}

/* The modal's own Owl instance: every layer down to the slide takes the
 * stage's full height, so the photo can be fitted inside it. */
.lightbox .lightbox_slider,
.lightbox .lightbox_slider .owl-stage-outer,
.lightbox .lightbox_slider .owl-stage,
.lightbox .lightbox_slider .owl-item {
    height: 100%;
}

.lightbox_slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Owl stretches every slide image to width:100%; here it is contained. */
.lightbox .lightbox_slider .owl-item .lightbox_img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

/* Owl: .owl-drag = mouse dragging enabled, .owl-grab = button held down. */
.lightbox .lightbox_slider.owl-drag .owl-item .lightbox_img {
    cursor: grab;
}

.lightbox .lightbox_slider.owl-grab .owl-item .lightbox_img {
    cursor: grabbing;
}

.lightbox .lightbox_navs {
    flex: 0 0 auto;
    width: 100%;
    max-width: 900px;
    margin-top: 24px;
}

.lightbox._single .lightbox_navs {
    visibility: hidden;
}

/* Buttons wearing the site's .swipe_arrow circle. The background reset is
 * kept at low specificity so .swipe_arrow:hover still fills it in. */
.lightbox_arrow,
.lightbox_close {
    padding: 0;
    font: inherit;
    background: transparent;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}

.lightbox .lightbox_arrow {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
}

.lightbox_close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #C1944D;
    transition: background .2s;
}

.lightbox_close:before,
.lightbox_close:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 1px;
    margin: 0 0 0 -10px;
    background: #444;
    transition: background .2s;
}

.lightbox_close:before {
    transform: rotate(45deg);
}

.lightbox_close:after {
    transform: rotate(-45deg);
}

.lightbox_close:hover {
    background: #C1944D;
}

.lightbox_close:hover:before,
.lightbox_close:hover:after {
    background: #fff;
}

.lightbox_arrow:focus-visible,
.lightbox_close:focus-visible {
    outline: 1px solid #C1944D;
    outline-offset: 3px;
}

@media screen and (max-width: 768px) {
    .lightbox {
        padding-top: 84px;
    }

    .lightbox .lightbox_navs {
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox_img {
        transition: none;
    }
}