/*
 * The gallery lightbox, shared by the project pages and the news
 * articles. The grid of thumbnails is styled per page, because a
 * project mosaic and a news gallery want different shapes, but the
 * dialog they open is the same everywhere.
 *
 * Paired with core/js/gallery.js, which drives it.
 */

.gallery-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    background: rgb(7 12 10 / 97%);
    color: #ffffff;
    border: 0;
}

.gallery-dialog::backdrop {
    background: rgb(7 12 10 / 82%);
    backdrop-filter: blur(8px);
}

.gallery-dialog[open] {
    animation: gallery-fade-in 180ms ease;
}

.gallery-dialog-content {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.gallery-dialog-toolbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.gallery-counter {
    color: rgb(255 255 255 / 70%);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gallery-close,
.gallery-navigation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgb(255 255 255 / 10%);
    color: #ffffff;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    cursor: pointer;
    transition:
        background 180ms ease,
        transform 180ms ease;
}

.gallery-close {
    width: 46px;
    height: 46px;
    font-size: 30px;
    line-height: 1;
}

.gallery-dialog-stage {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 30px 100px 50px;
}

.gallery-dialog-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 156px);
    object-fit: contain;
    border-radius: 10px;
}

.gallery-navigation {
    position: absolute;
    top: 50%;
    width: 54px;
    height: 54px;
    font-size: 38px;
    transform: translateY(-50%);
}

.gallery-previous {
    inset-inline-start: 24px;
}

.gallery-next {
    inset-inline-end: 24px;
}

.gallery-close:hover,
.gallery-navigation:hover {
    background: rgb(255 255 255 / 22%);
}

.gallery-close:hover {
    transform: rotate(5deg);
}

.gallery-navigation:hover {
    transform: translateY(-50%) scale(1.06);
}

.gallery-close:focus-visible,
.gallery-navigation:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

@keyframes gallery-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .gallery-dialog-toolbar {
        min-height: 66px;
        padding: 10px 14px;
    }

    .gallery-close {
        width: 42px;
        height: 42px;
    }

    .gallery-dialog-stage {
        padding: 20px 62px 35px;
    }

    .gallery-navigation {
        width: 44px;
        height: 44px;
        font-size: 31px;
    }

    .gallery-previous {
        inset-inline-start: 9px;
    }

    .gallery-next {
        inset-inline-end: 9px;
    }

    .gallery-dialog-image {
        max-height: calc(100dvh - 125px);
        border-radius: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-dialog[open] {
        animation: none;
    }

    .gallery-close,
    .gallery-navigation {
        transition: none;
    }
}
@media (max-width: 720px) {
    .gallery-dialog-stage {
        padding: 12px 8px 24px;
    }

    .gallery-dialog-image {
        max-width: 100%;
        max-height: calc(100dvh - 110px);
        border-radius: 6px;
        touch-action: pinch-zoom;
    }

    .gallery-navigation {
        z-index: 2;
        background: rgb(7 12 10 / 72%);
        backdrop-filter: blur(8px);
    }

    .gallery-previous {
        inset-inline-start: 12px;
    }

    .gallery-next {
        inset-inline-end: 12px;
    }
}