/* =Image lightbox
-------------------------------------------------------------- */
body.lightbox-is-open { overflow: hidden; }
.lightbox {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 64px 60px 24px;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    color: var(--white, #fff);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    overflow: auto;
}
.lightbox__image {
    display: block;
    flex-shrink: 1;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    object-fit: contain;
    touch-action: pan-y pinch-zoom;
}
.lightbox__caption { max-width: 70ch; text-align: center; }
.lightbox__error a { color: inherit; text-decoration: underline; }
.lightbox button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: 36px/1 Arial, sans-serif;
    cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.15); }
.lightbox button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__previous { top: calc(50% - 22px); left: 8px; }
.lightbox__next { top: calc(50% - 22px); right: 8px; }
.lightbox [hidden] { display: none; }
@media (max-width: 600px) {
    .lightbox { padding: 64px 12px 76px; }
    .lightbox__previous, .lightbox__next { top: auto; bottom: 16px; }
    .lightbox__previous { left: calc(50% - 52px); }
    .lightbox__next { right: calc(50% - 52px); }
    .lightbox__image { max-height: calc(100dvh - 200px); }
}