/* Hidden Roots – Gallery lightbox */

.lightbox {
    width:      100vw;
    height:     100dvh;
    max-width:  none;
    max-height: none;
    margin:     0;
    padding:    0;
    border:     0;
    background: rgb(20 16 13 / 96%);
    color:      var(--color-paper);
    overflow:   hidden;

    &::backdrop {
        background: transparent;
    }

    &[open] {
        display:     grid;
        place-items: center;
        animation:   lightbox-in .4s var(--ease-out);
    }
}

@keyframes lightbox-in {
    from { opacity: 0; }
}

.lightbox__stage {
    display:     grid;
    place-items: center;
    width:       100%;
    height:      100%;
    padding:     64px 16px;

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

@media (min-width: 768px) {
    .lightbox__image {
        max-width: calc(100vw - 192px);
    }
}

.lightbox__image {
    /* Sized against the viewport: a percentage would resolve against the
       stage's auto grid row and be ignored, letting tall photos overflow. */
    max-width:     calc(100vw - 32px);
    max-height:    calc(100dvh - 128px);
    width:         auto;
    height:        auto;
    object-fit:    contain;
    border-radius: var(--radius-md);
    box-shadow:    0 30px 80px -20px rgb(0 0 0 / 70%);
    transition:    opacity .35s var(--ease-out), transform .5s var(--ease-out);

    &.is-loading {
        opacity:   0;
        transform: scale(.97);
    }
}

.lightbox__count {
    position:       absolute;
    left:           50%;
    bottom:         20px;
    margin:         0;
    font:           var(--text-12ms);
    letter-spacing: 0.18em;
    transform:      translateX(-50%);
    color:          var(--color-paper-70);
}

.lightbox__button {
    position:      absolute;
    display:       grid;
    place-items:   center;
    width:         52px;
    height:        52px;
    border:        1px solid var(--color-paper-16);
    border-radius: 50%;
    color:         var(--color-paper);
    transition:    background-color var(--transition-fast), color var(--transition-fast);

    svg {
        width:  20px;
        height: 20px;
    }

    &:hover {
        background: var(--color-paper);
        color:      var(--color-bark);
    }
}

.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
    .lightbox__prev,
    .lightbox__next {
        top:       auto;
        bottom:    10px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox[open],
    .lightbox__image {
        animation:  none;
        transition: none;
    }
}