/* ==========================================================================
   Карусель работ
   Горизонтальная лента карточек со scroll-snap. Работает и без JS:
   лента прокручивается пальцем, колесом и клавишами. JS добавляет стрелки.
   ========================================================================== */

.work-carousel {
    position: relative;
    min-width: 0;
}

.work-carousel__viewport {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    /* Запас под тень карточки: overflow-x обрезает всё, что выходит за
       padding-box, поэтому отступы должны покрывать разлёт тени
       (0 22px 46px на hover — это ~23px вверх и вбок и ~45px вниз).
       Отрицательные margin возвращают ленту на прежнее место, ширина
       контента не меняется. */
    padding: 24px 24px 48px;
    margin: -24px -24px -48px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
}

.work-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.work-carousel__viewport:focus-visible {
    outline: 2px solid var(--resin-deep);
    outline-offset: 4px;
    border-radius: 20px;
}

.work-carousel__item {
    flex: 0 0 calc((100% - clamp(16px, 2vw, 24px)) / 2);
    min-width: 0;
    scroll-snap-align: start;
}

/* Стрелки живут в шапке секции рядом со ссылкой «Все проекты». */
.work-carousel__controls {
    display: none;
    align-items: center;
    gap: 8px;
}

.work-carousel__controls.is-visible {
    display: inline-flex;
}

.work-carousel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 252, 247, 0.9);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.work-carousel__arrow:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--resin-deep);
}

.work-carousel__arrow:focus-visible {
    outline: 2px solid var(--resin-deep);
    outline-offset: 3px;
}

.work-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.work-carousel__arrow svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1000px) {
    .work-carousel__item {
        flex-basis: min(78%, 460px);
    }
}

@media (max-width: 760px) {
    .work-carousel__item {
        flex-basis: min(86%, 420px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-carousel__arrow:hover:not(:disabled) {
        transform: none;
    }
}