/* Photo lightbox – a full-screen <dialog> (built by lightbox.js). */

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    color: var(--color-chalk);
    background: transparent;
    border: 0;

    &::backdrop {
        background: rgb(14 16 15 / 94%);
        backdrop-filter: blur(6px);
    }

    &[open] { display: grid; }
}

.lightbox__stage {
    display: grid;
    gap: var(--space-sm);
    place-content: center;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 72px 16px 56px;

    @media (min-width: 768px) { padding: 72px 96px 64px; }
}

.lightbox__image {
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast);

    &.is-loading { opacity: 0.25; }
}

.lightbox__caption {
    max-width: 760px;
    font: var(--text-15ar);
    text-align: center;
    color: var(--color-white-75);
}

.lightbox__count {
    position: fixed;
    inset: 22px auto auto 24px;
    margin: 0;
    font: var(--text-14am);
    letter-spacing: 0.08em;
    color: var(--color-white-75);
}

.lightbox__button {
    position: fixed;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: var(--color-chalk);
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--color-white-25);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);

    &:hover { background: rgb(255 255 255 / 16%); border-color: var(--color-oak); }
    &:focus-visible { outline: 3px solid var(--color-oak); outline-offset: 2px; }

    & svg { width: 24px; height: 24px; }
}

.lightbox__close { inset: 12px 12px auto auto; }

.lightbox__prev,
.lightbox__next {
    inset-block-start: 50%;
    translate: 0 -50%;

    @media (max-width: 767px) {
        inset-block: auto 12px;
        translate: none;
    }
}

.lightbox__prev {
    inset-inline-start: 16px;

    & svg { transform: scaleX(-1); }

    @media (max-width: 767px) { inset-inline-start: calc(50% - 64px); }
}

.lightbox__next {
    inset-inline-end: 16px;

    @media (max-width: 767px) { inset-inline-end: calc(50% - 64px); }
}

.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next { display: none; }

html.lightbox-is-open { overflow: hidden; }