/**
 * wm:slider — общий CSS-движок.
 *
 * DOM-контракт см. webcreator/docs/wm-slider-contract.md.
 *
 * В этом файле ТОЛЬКО структурная механика слайдера:
 *   • viewport (overflow-x scroll, scroll-snap)
 *   • track (flex row, gap)
 *   • slide (flex 0 0 calc(...) по --wm-slider-per-view)
 *   • стрелки (top-right / inside / under позиционирование)
 *   • точки (uk-dotnav расширение)
 *   • bleed-модификатор
 *
 * НЕТ декора карточек — это работа шаблонов (templates/<tpl>/style.css).
 * НЕТ цвета/радиуса/тени — только структура.
 */

/* === Корневой контейнер ================================================
 * --wm-slider-gap по умолчанию наследует токен модуля --wintra-module-gap
 * (через CSS-переменную в template_styles.css). Если шеф явно задал
 * data-gap="N" в шестерёнке — JS перетрёт это inline-стилем. Пусто = токен.
 */
.wm-slider {
    --wm-slider-per-view: 3;
    --wm-slider-gap: var(--wintra-module-gap, 24px);
    position: relative;
    width: 100%;
}

/* === Viewport: overflow-x scroll-snap ================================== */
/* ВНИМАНИЕ: CSS-спека насильно превращает overflow-y:visible в clipping
 * когда overflow-x != visible. То есть лифт/scale карточек при hover
 * (из настроек модуля «06 · Эффекты») обрезается по верху и низу даже
 * при явном overflow-y:visible. Лечится padding+negative margin парой —
 * viewport получает 16px воздуха вверх/вниз, layout снаружи остаётся
 * на месте (negative margin компенсирует). 16px хватает на translateY(-8px)
 * и scale(1.04) с тенью shadow-lg (48px размах). */
.wm-slider__viewport {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: -16px;
    margin-bottom: -16px;
}
.wm-slider__viewport::-webkit-scrollbar { display: none; }

/* BLEED: правый край уходит за viewport — peek-эффект (как v14 #products). */
.wm-slider--bleed .wm-slider__viewport {
    margin-right: calc(-1 * ((100vw - 100%) / 2));
    padding-right: calc(((100vw - 100%) / 2) + var(--wm-slider-gap));
}
@media (max-width: 768px) {
    .wm-slider--bleed .wm-slider__viewport {
        margin-right: 0;
        padding-right: var(--wm-slider-gap);
    }
}

/* === Track: горизонтальная лента ======================================= */
.wm-slider__track {
    display: flex;
    gap: var(--wm-slider-gap);
    align-items: stretch;
}

/* === Slide: ширина по --wm-slider-per-view + snap ====================== */
.wm-slider__slide {
    flex: 0 0 calc((100% - var(--wm-slider-gap) * (var(--wm-slider-per-view) - 1)) / var(--wm-slider-per-view));
    width:    calc((100% - var(--wm-slider-gap) * (var(--wm-slider-per-view) - 1)) / var(--wm-slider-per-view));
    scroll-snap-align: start;
    min-width: 0;
}

/* === Навигация (стрелки) =============================================== */
.wm-slider__nav {
    display: flex;
    gap: 12px;
    margin-bottom: var(--wintra-module-gap, 24px);
}
.wm-slider[data-arrows="top-right"] .wm-slider__nav {
    justify-content: flex-end;
}
.wm-slider[data-arrows="under"] .wm-slider__nav {
    justify-content: center;
    margin-top: var(--wintra-module-gap, 24px);
    margin-bottom: 0;
    order: 99; /* ставим под viewport через flex order на корне */
}
.wm-slider[data-arrows="inside"] .wm-slider__nav {
    /* В этом режиме стрелки рисуются по бокам viewport через absolute */
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    justify-content: space-between;
    margin: 0;
}
.wm-slider[data-arrows="inside"] .wm-slider__btn {
    pointer-events: auto;
}
.wm-slider[data-arrows="none"] .wm-slider__nav {
    display: none;
}

/* Корень в режиме under стрелок и/или dots — flex column для order. */
.wm-slider[data-arrows="under"],
.wm-slider[data-dots="under"]:not([data-arrows="under"]):not([data-arrows="top-right"]):not([data-arrows="inside"]) {
    display: flex;
    flex-direction: column;
}

.wm-slider__btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    padding: 0;
}
.wm-slider__btn:hover:not(:disabled) { opacity: 1; }
.wm-slider__btn:disabled { opacity: 0.25; cursor: default; }

@media (max-width: 768px) {
    .wm-slider[data-arrows="top-right"] .wm-slider__nav {
        justify-content: flex-end;
        margin-bottom: 16px;
    }
}

/* === Точки (uk-dotnav расширение) ====================================== */
.wm-slider__dots {
    margin: var(--wintra-module-gap, 24px) 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}
.wm-slider[data-dots="over"] .wm-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 2;
}
.wm-slider[data-dots="none"] .wm-slider__dots {
    display: none;
}

/* === Адаптив дефолтный (можно переопределить в шаблоне) ================ */
/* Дополнительная страховка: на @s сужаем минимум до 1.1, чтоб карточка
   всегда занимала почти весь экран без выползания. Шаблоны могут
   переопределять --wm-slider-per-view вручную через media. */