/* ============================================================
   Карусели: нативный scroll-snap
   ------------------------------------------------------------
   Поведение, одинаковое на всех экранах:
     · первая карточка отступает от левого края
     · последняя отступает от правого края
     · следующая карточка всегда выглядывает на заданную величину
     · за один свайп пролистывается ровно одна карточка
   ============================================================ */

:root {
    --carousel-edge: 20px;   /* отступ от края экрана */
    --carousel-peek: 48px;   /* насколько выглядывает следующая */
    --carousel-gap: 24px;    /* расстояние между карточками */
}

/* --- Общее поведение --- */
.cases-carousel,
.industries-carousel,
.plugin-gallery__track {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--carousel-edge);
    padding-right: var(--carousel-edge);
}

.cases-carousel > *,
.industries-carousel > *,
.plugin-gallery__track > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* --- Перетаскивание мышью: snap мешает --- */
.cases-carousel.dragging,
.industries-carousel.dragging,
.plugin-gallery__track.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* ============================================================
   Мобильные: ширина карточки считается от ширины экрана,
   поэтому соседняя выглядывает одинаково и на 320px, и на 430px
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --carousel-edge: 20px;
        --carousel-peek: 44px;
        --carousel-gap: 16px;
    }

    .cases-carousel,
    .industries-carousel {
        gap: var(--carousel-gap);
        padding-left: var(--carousel-edge);
        padding-right: var(--carousel-edge);
        margin-left: 0;
    }

    .cases-carousel > .case-card,
    .industries-carousel > * {
        flex: 0 0 calc(100vw - var(--carousel-edge) - var(--carousel-peek));
        max-width: 340px;
    }
}

@media (max-width: 480px) {
    :root {
        --carousel-edge: 16px;
        --carousel-peek: 40px;
    }
}

@media (max-width: 360px) {
    :root {
        --carousel-peek: 32px;
        --carousel-gap: 12px;
    }
}

/* --- Тач-устройства: курсор-«рука» ни к чему --- */
@media (hover: none) and (pointer: coarse) {
    .cases-carousel,
    .industries-carousel,
    .plugin-gallery__track {
        cursor: default;
    }
}

/* --- Системная настройка «уменьшить движение» --- */
@media (prefers-reduced-motion: reduce) {
    .cases-carousel,
    .industries-carousel,
    .plugin-gallery__track {
        scroll-behavior: auto;
    }
}