/*
====================================================================

DD Slider

Общий движок слайдеров главной страницы. Отвечает только за
структуру навигации (viewport/track/стрелки/точки) и её базовый
неоформленный вид. Визуал карточек задаёт потребитель блока -
здесь карточки не оформляются.

Разметка и data-конфиг движка описаны в assets/js/slider.js.

====================================================================
*/


.dd-slider {
    position: relative;

    --dd-slider-items: 1;
}

.dd-slider__viewport {
    overflow: hidden;

    touch-action: pan-y;
}

.dd-slider__track {
    display: flex;

    will-change: transform;
}

.dd-slider__item {
    flex: 0 0 calc(100% / var(--dd-slider-items, 1));
    min-width: 0;
}

.dd-slider.is-dragging .dd-slider__track {
    transition: none !important;
    cursor: grabbing;
}


/* ================================================================
   Стрелки
   ================================================================ */

.dd-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    padding: 0;

    /*
     * Единый вид стрелок всех слайдеров (утверждён на баннере):
     * крупный тонкий шеврон без круглой подложки. Цвет и позицию
     * блок может переопределить токенами/правилами у себя.
     */
    color: var(--dd-slider-arrow-color, rgba(0, 16, 19, .55));
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .18s ease, transform .18s ease;
}

.dd-slider__arrow:hover,
.dd-slider__arrow:focus-visible {
    color: var(--dd-slider-arrow-hover-color, rgba(0, 16, 19, .85));
    transform: translateY(-50%) scale(1.06);
}

.dd-slider__arrow:disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.dd-slider__arrow--prev {
    left: 0;
}

.dd-slider__arrow--next {
    right: 0;
}

.dd-slider__arrow::before {
    content: "";

    width: 26px;
    height: 26px;

    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
}

.dd-slider__arrow--prev::before {
    transform: rotate(135deg) translate(-1px, -1px);
}

.dd-slider__arrow--next::before {
    transform: rotate(-45deg) translate(-1px, -1px);
}


/* ================================================================
   Точки
   ================================================================ */

.dd-slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
}

.dd-slider__dots[hidden] {
    display: none;
}

.dd-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;

    background: var(--dd-slider-dot-color, var(--dd-primary-grey));
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.dd-slider__dot.is-active {
    background: var(--dd-slider-dot-active-color, var(--dd-primary));
    transform: scale(1.2);
}