/* ==========================================================================
   lx-lightbox.css — full-screen photo lightbox (vanilla replacement for the
   Magnific Popup gallery previously used on the unit detail page).
   Self-contained (own fallback vars) so it has no load-order dependency on
   tokens.css or lx-popups.css — same philosophy as lx-lightbox.js.
   z-index sits above lx-popups.css's highest layer (--lxz-toast: 9200) so a
   lead-capture popup can never appear underneath an open lightbox.
   ========================================================================== */
:root {
    --lxlb-z:          9250;
    --lxlb-transition: 0.2s ease;
    --lxlb-radius:     8px;
}

.lx-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--lxlb-z);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lxlb-transition);
}
.lx-lightbox--visible {
    opacity: 1;
    pointer-events: auto;
}
body.lx-lightbox-open {
    overflow: hidden;
}

.lx-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.92);
}

.lx-lightbox__stage {
    position: relative;
    max-width: min(92vw, 1400px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lx-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--lxlb-radius);
    background: #111;
}

.lx-lightbox__caption {
    margin: 10px 0 0;
    color: #f2f2f2;
    font-size: 13.5px;
    text-align: center;
    max-width: 80vw;
}

.lx-lightbox__close,
.lx-lightbox__nav {
    position: absolute;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lxlb-radius);
    transition: background var(--lxlb-transition);
}
.lx-lightbox__close:hover,
.lx-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lx-lightbox__close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 1;
}

.lx-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 30px;
    line-height: 1;
}
.lx-lightbox__nav--prev { left: 12px; }
.lx-lightbox__nav--next { right: 12px; }

.lx-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #f2f2f2;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 10px;
    border-radius: var(--lxlb-radius);
}

@media (max-width: 640px) {
    .lx-lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
    .lx-lightbox__close { top: 8px; right: 8px; }
    .lx-lightbox__nav--prev { left: 6px; }
    .lx-lightbox__nav--next { right: 6px; }
}