:root {
    --overlay: rgb(0 8 22 / 0.96);
    --text-gallery-counter: 18px;
}

.gallery {
    --gallery-slide-w: clamp(280px, 27vw, 460px);
    --gallery-gap: 24px;
    --gallery-nav-shift: calc(1.5 * var(--gallery-slide-w) + 1.5 * var(--gallery-gap));

    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 64px 0;

    @media (max-width: 1023px) {
        --gallery-slide-w: 56vw;
        --gallery-gap: 16px;
        --gallery-nav-shift: calc(0.5 * var(--gallery-slide-w) + 0.5 * var(--gallery-gap));
    }

    @media (max-width: 767px) {
        --gallery-slide-w: 78vw;
        --gallery-gap: 12px;

        gap: 32px;
        padding: 40px 0;
    }
}

.gallery__title {
    font-size: clamp(40px, 6vw, var(--text-section-title));
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.gallery__slider {
    position: relative;
}

.gallery__slide {
    width: var(--gallery-slide-w);
}

.gallery__item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-card);
    background: var(--dark-blue);
    cursor: zoom-in;

    &:focus-visible {
        outline: 2px solid var(--white);
        outline-offset: 4px;
    }

    &.is-silent-focus:focus-visible {
        outline: none;
    }
}

.gallery__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;

    @media (hover: hover) {
        .gallery__item:hover & {
            transform: scale(1.04);
        }
    }
}

.gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    translate: -50% -50%;

    &.gallery__nav--prev {
        left: calc(50% - var(--gallery-nav-shift));
    }

    &.gallery__nav--next {
        left: calc(50% + var(--gallery-nav-shift));
    }
}

.slider-arrow {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: var(--white);
    background: var(--main-blue);
    cursor: pointer;
    transition: box-shadow 0.2s, opacity 0.2s;

    @media (hover: hover) {
        &:hover {
            box-shadow: var(--shadow-pill-hover);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--white);
        outline-offset: 3px;
    }

    &:disabled {
        opacity: 0.4;
        cursor: default;
        box-shadow: none;
    }

    @media (max-width: 767px) {
        width: 40px;
        height: 40px;

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

html:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    color: var(--white);
    background: var(--overlay);

    &[open] {
        display: grid;
        grid-template-rows: auto 1fr;
    }

    &::backdrop {
        background: transparent;
    }

    @media (prefers-reduced-motion: no-preference) {
        opacity: 0;
        transition:
            opacity 0.25s ease,
            overlay 0.25s allow-discrete,
            display 0.25s allow-discrete;

        &[open] {
            opacity: 1;
        }

        @starting-style {
            &[open] {
                opacity: 0;
            }
        }
    }
}

.lightbox__bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--margin);

    @media (max-width: 767px) {
        padding: 12px 16px;
    }
}

.lightbox__counter {
    font-size: var(--text-gallery-counter);
    font-variant-numeric: tabular-nums;
    color: var(--gray);
}

.lightbox__close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: var(--white);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s;

    @media (hover: hover) {
        &:hover {
            background: var(--dark-blue);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--white);
        outline-offset: 2px;
    }

    &.is-silent-focus:focus-visible {
        outline: none;
    }
}

.lightbox__swiper {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.lightbox__slide {
    padding: 0 calc(var(--margin) + 72px) 40px;

    @media (max-width: 767px) {
        padding: 0 0 24px;
    }
}

.lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-card);

    @media (max-width: 767px) {
        border-radius: 0;
    }
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    translate: 0 -50%;

    &.lightbox__nav--prev {
        left: var(--margin);
    }

    &.lightbox__nav--next {
        right: var(--margin);
    }

    @media (max-width: 767px) {
        display: none;
    }
}