/*
 * Lightbox — the dialog a gallery opens its images in.
 * Loaded on every page (see functions.php enqueue()): the home page gallery,
 * the event gallery and the venue strip all use it.
 *
 * Markup: pages/global/lightbox.php, driven by js/global/lightbox.js.
 * Follows prod's Elementor lightbox where it matters — the rgba(0,0,0,.8)
 * backdrop and the 60px top bar — without its zoom and share chrome.
 */

/* ── Dialog ───────────────────────────────────────────────────────────── */
.lightbox {
    position:         fixed;
    inset:            0;
    z-index:          var(--z-modal);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          70px 20px 40px;
    background-color: rgba(0, 0, 0, .8);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__bar {
    position:        absolute;
    left:            0;
    right:           0;
    top:             0;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          60px;
    padding:         0 20px;
}

.lightbox__counter {
    margin:      0;
    font-family: var(--font-body);
    font-size:   15px;
    color:       rgba(237, 237, 237, .9);
}

.lightbox__close,
.lightbox__nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    border:          0;
    background:      none;
    color:           rgba(237, 237, 237, .9);
    cursor:          pointer;
    transition:      color var(--transition);
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
    color: var(--color-accent);
}

.lightbox__close {
    width:  44px;
    height: 44px;
}

.lightbox__nav {
    position:      absolute;
    top:           50%;
    width:         48px;
    height:        48px;
    border:        1px solid rgba(192, 156, 77, .3);
    border-radius: 50%;
    transform:     translateY(-50%);
}

.lightbox__nav--prev {
    left:      20px;
    transform: translateY(-50%) scaleX(-1);
}

.lightbox__nav--next {
    right: 20px;
}

.lightbox__figure {
    display: flex;
    margin:  0;
    max-width:  100%;
    max-height: 100%;
}

.lightbox__image {
    max-width:  100%;
    max-height: 100%;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .lightbox {
        padding: 60px 12px 32px;
    }

    .lightbox__nav {
        width:  40px;
        height: 40px;
    }

    .lightbox__nav--prev {
        left: 8px;
    }

    .lightbox__nav--next {
        right: 8px;
    }
}