/* No scrollbar-gutter here: reserving it shrinks the fixed overlay's containing
   block, which leaves an uncovered page strip along the right edge. */
html:has(body.mgb-lightbox-open) {
    overflow: hidden;
}

body.mgb-lightbox-open {
    overflow: hidden;
}

.mgb-lightbox-overlay {
    --lb-pad: clamp(8px, 2vmin, 24px);
    --lb-bar-h: 0px;
    --lb-cap-gap: 12px;
    --lb-caption-h: clamp(32px, 6vh, 56px);
    --lb-reserve-h: 0px;
    --lb-cap-w: min(var(--mgb-lightbox-max-w, 96vw), calc(100vw - (var(--lb-pad) * 2)));
    --lb-cap-h: min(var(--mgb-lightbox-max-h, 96vh), calc(100vh - (var(--lb-pad) * 2) - var(--lb-reserve-h) - var(--lb-bar-h)));
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    padding: calc(var(--lb-pad) + var(--lb-bar-h)) var(--lb-pad) var(--lb-pad);
    z-index: 10000;
}

/* #wpadminbar is fixed with z-index 99999, so it always paints over the overlay.
   Reserving its height keeps the image and the close button out from under it. */
body.admin-bar .mgb-lightbox-overlay,
html:has(body.admin-bar) .mgb-lightbox-overlay {
    --lb-bar-h: var(--wp-admin--admin-bar--height, 32px);
}

/* Blocksy pins --wp-admin--admin-bar--height:32px on :root, which outranks core's
   html{...46px} below 782px, so the bar is taller than the variable claims there. */
@media screen and (max-width: 782px) {

    body.admin-bar .mgb-lightbox-overlay,
    html:has(body.admin-bar) .mgb-lightbox-overlay {
        --lb-bar-h: max(46px, var(--wp-admin--admin-bar--height, 46px));
    }
}

/* svh is the smallest viewport box, so the image never ends up under a mobile URL bar. */
@supports (height: 100svh) {

    .mgb-lightbox-overlay {
        --lb-caption-h: clamp(32px, 6svh, 56px);
        --lb-cap-h: min(var(--mgb-lightbox-max-h, 96vh), calc(100svh - (var(--lb-pad) * 2) - var(--lb-reserve-h) - var(--lb-bar-h)));
    }
}

.mgb-lightbox-overlay.has-caption {
    --lb-reserve-h: calc(var(--lb-caption-h) + var(--lb-cap-gap));
}

.mgb-lightbox-overlay.is-active {
    display: grid;
}

.mgb-lightbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
}

.mgb-lightbox__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: var(--lb-cap-w);
    max-height: var(--lb-cap-h);
    width: auto;
    height: auto;
}

.mgb-lightbox__img {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: var(--lb-cap-w);
    max-height: var(--lb-cap-h);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.mgb-lightbox__hotspot-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.mgb-lightbox__caption {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-height: 0;
    margin-top: var(--lb-cap-gap);
    text-align: center;
    font-size: 13px;
    color: #e5e7eb;
    max-width: var(--lb-cap-w);
    max-height: var(--lb-caption-h);
    overflow: auto;
}

.mgb-lightbox-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: var(--spot-size, var(--mgb-spot-size));
    height: var(--spot-size, var(--mgb-spot-size));
    padding: 0;
    min-width: 0;
    line-height: 0;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    --mgb-spot-border-width: 2px;
    border-radius: 50%;
    background: var(--spot-color, var(--mgb-spot-color));
    border: var(--mgb-spot-border-width, 2px) solid var(--spot-border, var(--mgb-spot-border));
    color: var(--spot-pulse-color, var(--mgb-spot-pulse-color, var(--spot-color, var(--mgb-spot-color))));
    appearance: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    overflow: visible;
    opacity: var(--spot-opacity, var(--mgb-spot-opacity, 1));
}

.mgb-lightbox-overlay.mgb-spot-style--pulse .mgb-lightbox-hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: center center;
    background: currentcolor;
    border-radius: 50%;
    animation: mgbSpotPulse var(--spot-pulse-duration, var(--mgb-spot-pulse-duration, 1.8s)) ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

.mgb-lightbox-overlay.mgb-spot-style--pulse .mgb-lightbox-hotspot::after {
    content: none;
}

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

    .mgb-lightbox-overlay.mgb-spot-style--pulse .mgb-lightbox-hotspot::before,
    .mgb-lightbox-overlay.mgb-spot-style--pulse .mgb-lightbox-hotspot::after {
        animation: none;
    }
}

.mgb-lightbox-overlay.mgb-lightbox-popup-hidden .mgb-lightbox__img,
.mgb-lightbox-overlay.mgb-lightbox-popup-hidden .mgb-lightbox__nav {
    opacity: 0;
    pointer-events: none;
}

.mgb-lightbox__close {
    border: 0;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    position: fixed;
    top: calc(var(--lb-pad) + var(--lb-bar-h) + 8px + env(safe-area-inset-top));
    right: calc(var(--lb-pad) + 8px + env(safe-area-inset-right));
    z-index: 12;
}

.mgb-lightbox__close:hover,
.mgb-lightbox__close:focus-visible {
    background: rgba(17, 24, 39, 0.96);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.mgb-lightbox__nav {
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    width: 44px;
    height: 64px;
    font-size: 28px;
    cursor: pointer;
    position: fixed;
    top: calc(50% + (var(--lb-bar-h) / 2));
    transform: translateY(-50%);
    z-index: 10;
}

.mgb-lightbox__nav--prev {
    left: calc(var(--lb-pad) + env(safe-area-inset-left));
}

.mgb-lightbox__nav--next {
    right: calc(var(--lb-pad) + env(safe-area-inset-right));
}

/* Fullscreen toggle (button injected by assets/lightbox-fullscreen.js).
   Sits one button-width left of the close button, mirrors its chrome, and
   flips to a filled state while the overlay carries .mgb-lightbox--fullscreen
   (which also un-matches the anchored rules below, restoring the
   full-viewport overlay). */
.mgb-lightbox__fullscreen {
    border: 0;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    cursor: pointer;
    position: fixed;
    top: calc(var(--lb-pad) + var(--lb-bar-h) + 8px + env(safe-area-inset-top));
    right: calc(var(--lb-pad) + 8px + env(safe-area-inset-right) + 48px);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.mgb-lightbox__fullscreen svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mgb-lightbox__fullscreen:hover,
.mgb-lightbox__fullscreen:focus-visible {
    background: rgba(17, 24, 39, 0.96);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.mgb-lightbox-overlay.mgb-lightbox--fullscreen .mgb-lightbox__fullscreen {
    background: #fff;
    color: #111827;
}

.mgb-lightbox-overlay.mgb-lightbox--fullscreen .mgb-lightbox__fullscreen:hover,
.mgb-lightbox-overlay.mgb-lightbox--fullscreen .mgb-lightbox__fullscreen:focus-visible {
    background: #e5e7eb;
}

/* --------------------------------------------------------------------------
   Keep the backdrop off the side column (single model / asset pages).

   The overlay is fixed to the viewport, so the dark backdrop -- and the
   close/next chrome, which is fixed too -- land on top of the theme's Blocksy
   sidebar (`#sidebar`) and hide it while an image is open. Anchor the overlay
   to the content column instead: `.single-model-detail__main-rail` is that
   column, and the theme hides the sidebar below 1000px, which is also where
   the overlay stays full-viewport on narrow screens.

   `--mgb-lightbox-max-w` / `--lb-cap-w` cap the image in viewport units
   (96vw from includes/class-assets.php, inline on `.mgb-lightbox__img` by
   assets/gallery-media-utils.js); once the overlay is narrower than the
   viewport those units must become overlay-relative or the image overflows
   into the sidebar. Browsers without CSS anchor positioning never get here:
   the @supports block leaves them on the full-viewport overlay above.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {

    body.single-model3d .single-model-detail__main-rail,
    body.single-asset2d .single-model-detail__main-rail {
        anchor-name: --mgb-lightbox-column;
    }
}

@supports (anchor-name: --mgb-lightbox-column) {

    @media (min-width: 1000px) {

        body.single-model3d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay,
        body.single-asset2d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay {
            left: anchor(--mgb-lightbox-column left);
            right: anchor(--mgb-lightbox-column right);
            width: auto;
            --mgb-lightbox-max-w: 100%;
            --lb-cap-w: 100%;
        }

        body.single-model3d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__close,
        body.single-asset2d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__close {
            position-anchor: --mgb-lightbox-column;
            right: calc(anchor(--mgb-lightbox-column right) + var(--lb-pad) + 8px + env(safe-area-inset-right));
        }

        body.single-model3d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__nav--next,
        body.single-asset2d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__nav--next {
            position-anchor: --mgb-lightbox-column;
            right: calc(anchor(--mgb-lightbox-column right) + var(--lb-pad) + env(safe-area-inset-right));
        }

        body.single-model3d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__nav--prev,
        body.single-asset2d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__nav--prev {
            position-anchor: --mgb-lightbox-column;
            left: calc(anchor(--mgb-lightbox-column left) + var(--lb-pad) + env(safe-area-inset-left));
        }

        body.single-model3d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__fullscreen,
        body.single-asset2d:has(#sidebar):not(:has(.mgb-lightbox-overlay.mgb-lightbox--fullscreen)) .mgb-lightbox-overlay .mgb-lightbox__fullscreen {
            position-anchor: --mgb-lightbox-column;
            right: calc(anchor(--mgb-lightbox-column right) + var(--lb-pad) + 8px + env(safe-area-inset-right) + 48px);
        }
    }
}