/* Photo lightbox (pages/shared/js/lightbox.js): full-viewport dialog, photo centred, ink plates for 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(--white);
    overflow: hidden;
}

.lightbox::backdrop {
    background: rgba(10, 12, 18, .92);
}

.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: 64px 88px;
}

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

.lightbox__btn,
.lightbox__close {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    cursor: pointer;
}

.lightbox__btn {
    top: 50%;
    translate: 0 -50%;
    background: var(--ink-2);
    color: var(--white);
    transition: background .2s var(--ease);
}

.lightbox__btn:hover {
    background: var(--blue);
}

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

.lightbox__btn--prev .ico {
    transform: rotate(180deg);
}

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

.lightbox__close {
    top: 0;
    right: 0;
    background: var(--yellow);
    color: var(--ink);
}

.lightbox__close:hover {
    background: var(--yellow-press);
}

.lightbox__count {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0 16px;
    line-height: 52px;
    background: var(--ink-2);
    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: 60px 0 84px;
    }

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

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

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

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