/* Vivly Living — image lightbox chrome (plot page: floorplans + gallery
   carousels; DOM built by js/lightbox.js).

   Mechanics ported from Renmore's floorplan lightbox; the chrome is styled
   fresh with Vivly tokens per CLAUDE.md (never copy Renmore's design — the
   snapshot only preserved its prev/next rules anyway). Layout choices that
   ARE inherited from the Renmore port, because the JS depends on them:
     - #vl-lb toggles [hidden] ↔ .is-open with a 0.3s opacity fade (close()
       waits 300ms before re-hiding — keep the durations in sync with the JS)
     - .has-multiple.is-open reveals the prev/next buttons
     - .is-zoomed swaps the zoom button's in/out glyphs
   Colour mapping: backdrop = ink (the page's own dark band colour) at high
   alpha; button hover = brick (designer notes: brick is the CTA colour);
   focus rings = cornflower, sitewide convention. No frame to read — the
   lightbox isn't in the Figma set (it's a Renmore-behaviour port Liam asked
   for at live review 2026-07-28). */

/* Trigger affordance on the source images */
img[data-vl-lightbox] {
    cursor: zoom-in;
}

#vl-lb {
    position: fixed;
    inset: 0;
    z-index: 10000; /* above the sticky header (header.css) and anchor bar */
    opacity: 0;
    transition: opacity 0.3s ease; /* JS close() waits 300ms — keep in sync */
}

#vl-lb.is-open {
    opacity: 1;
}

#vl-lb[hidden] {
    display: none;
}

#vl-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(50, 56, 59, 0.94); /* --vl-ink #32383b at high alpha */
    cursor: pointer;
}

#vl-lb-img-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 96px; /* clears the corner/side controls */
    overflow: hidden;   /* zoomed pans stay inside the dialog */
}

#vl-lb-img {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Controls: shared circular-button treatment ── */
#vl-lb-zoom,
#vl-lb-close,
#vl-lb-prev,
#vl-lb-next {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--vl-white);
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
}

#vl-lb-zoom svg,
#vl-lb-close svg {
    width: 22px;
    height: 22px;
}

#vl-lb-prev svg,
#vl-lb-next svg {
    width: 24px;
    height: 24px;
}

#vl-lb-zoom:hover,
#vl-lb-close:hover,
#vl-lb-prev:hover,
#vl-lb-next:hover {
    background: var(--vl-brick); /* CTA colour, designer notes */
}

#vl-lb-zoom:focus-visible,
#vl-lb-close:focus-visible,
#vl-lb-prev:focus-visible,
#vl-lb-next:focus-visible {
    outline: 2px solid var(--vl-cornflower);
    outline-offset: 2px;
}

#vl-lb-close {
    top: 24px;
    right: 24px;
}

#vl-lb-zoom {
    top: 24px;
    right: 84px; /* 24 + 48 + 12 gap, beside close */
}

/* Zoom glyph swap (JS toggles .is-zoomed on #vl-lb) */
#vl-lb .vl-lb-zoom-out { display: none; }
#vl-lb.is-zoomed .vl-lb-zoom-in  { display: none; }
#vl-lb.is-zoomed .vl-lb-zoom-out { display: block; }

/* ── Prev/next: only in gallery mode (Renmore-inherited reveal rule) ── */
#vl-lb-prev,
#vl-lb-next {
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

#vl-lb-prev { left: 24px; }
#vl-lb-next { right: 24px; }

#vl-lb.has-multiple.is-open #vl-lb-prev,
#vl-lb.has-multiple.is-open #vl-lb-next {
    display: flex;
}

@media (max-width: 767px) {
    #vl-lb-img-wrap {
        padding: 72px 16px; /* side controls overlay the image edge on phones — image width wins */
    }

    #vl-lb-zoom,
    #vl-lb-close,
    #vl-lb-prev,
    #vl-lb-next {
        width: 40px;
        height: 40px;
    }

    #vl-lb-close { top: 16px; right: 16px; }
    #vl-lb-zoom  { top: 16px; right: 68px; }
    #vl-lb-prev  { left: 10px; }
    #vl-lb-next  { right: 10px; }
}