/* 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));
}