/* Photo lightbox (pages/shared/js/lightbox.js): full-viewport dialog, photo centred, round outline arrows. */
[data-lightbox] {
    cursor: zoom-in;
}

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

.lightbox::backdrop {
    background: rgba(0, 0, 0, .9);
}

.lightbox[open] .lightbox__img {
    animation: lb-in .35s var(--ease);
}

@keyframes lb-in {
    from { opacity: 0; transform: scale(.97); }
}

.lightbox__fig {
    display: grid;
    place-items: center;
    height: 100%;
    margin: 0;
    padding: 80px 96px;
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    object-fit: contain;
    background: var(--paper);
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox__btn,
.lightbox__close {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.lightbox__btn {
    top: 50%;
    translate: 0 -50%;
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.lightbox__btn:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.lightbox__btn--prev {
    left: 24px;
}

.lightbox__btn--prev .ico {
    transform: scaleX(-1);
}

.lightbox__btn--next {
    right: 24px;
}

.lightbox__close {
    top: 16px;
    right: 16px;
    background: var(--ink);
    color: var(--on-ink);
}

.lightbox__close:hover {
    background: var(--ink-2);
}

.lightbox__count {
    position: absolute;
    top: 16px;
    left: 24px;
    margin: 0;
    line-height: 52px;
    font-variant-numeric: tabular-nums;
}

.lightbox__count:empty,
.lightbox.is-single .lightbox__btn {
    display: none;
}

/* Phones: the photo takes the width, the arrows sit under it. */
@media (max-width: 640px) {
    .lightbox__fig {
        padding: 76px 0 92px;
    }

    .lightbox__img {
        max-height: calc(100dvh - 168px);
    }

    .lightbox__btn {
        top: auto;
        bottom: 20px;
        translate: none;
    }

    .lightbox__btn--prev {
        left: calc(50% - 60px);
    }

    .lightbox__btn--next {
        right: calc(50% - 60px);
    }

    .lightbox__count {
        left: 16px;
    }
}