/* =============================================
   QUOTE SLIDER — несколько цитат в блоке .quote-section
   Базовые стили блока — css/quote-section.css (не меняются),
   стрелки и точки — css/slider-base.css.
   Навигация: стрелки в ряд с точками под цитатой (отступы как у news_slider на планшете);
   ≤580 — стрелки к краям с отступами 25/35/20/10, как у news_slider на мобилке.
   ============================================= */

/* Расстояние между цитатой и подписью = gap блока на каждом брейкпоинте (quote-section.css) */
.quote-section--slider {
    --qs-gap: 24px;
}

@media (max-width: 1024px) {
    .quote-section--slider {
        --qs-gap: 60px;
    }
}

@media (max-width: 580px) {
    .quote-section--slider {
        --qs-gap: 35px;
    }
}

/* Фон растёт вместе с контентом, если цитата длинная */
.quote-section--slider .quote-section__background {
    max-height: none;
}

/* Селекторы стрелок/точек — с родителем .quote-slider: на сайте slider-base.css может
   подключаться после этого файла и перебивать grid-row/grid-column одноклассовыми правилами */

/* ===== Сетка: цитаты сверху, под ними в ряд [стрелка] [точки] [стрелка] =====
   Ряд навигации — как у news_slider на планшете (50px между стрелками и точками,
   с 768px — 40px). Стрелки снизу, а не по бокам: не наезжают на узор слева. */
.quote-slider {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 24px 50px;
}

.quote-slider__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    overflow: hidden;
    min-width: 0;
}

.quote-slider .quote-slider__arrow--prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: center;
}

.quote-slider .quote-slider__pagination {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

.quote-slider .quote-slider__arrow--next {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    align-self: center;
}

/* ===== Лента =====
   Сдвиг повторяет баннер на главной: там нативный smooth-скролл
   Chrome — ~0.6 с с мягким разгоном и торможением, отсюда «нажал — не сразу поехало».
   Слайды тянутся по высоте самой длинной цитаты — блок не прыгает. */
.quote-slider__track {
    display: flex;
    align-items: stretch;
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    will-change: transform;
}

.quote-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--qs-gap);
    margin: 0;
    /* уходящая цитата растворяется во время сдвига */
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.quote-slider__slide.is-active {
    opacity: 1;
}

/* ===== Смена текста: новая цитата «всплывает», подпись — следом =====
   Кривая — как у капсулы пагинации (cubic-bezier(0.4, 0, 0.2, 1)) */
.quote-slider__slide .quote-section__text,
.quote-slider__slide .quote-section__author {
    opacity: 0;
    transform: translateY(16px);
    /* уходящая: гаснет вместе со сдвигом, позицию сбрасывает уже за кадром */
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0s linear 0.6s;
}

.quote-slider__slide.is-active .quote-section__text {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.quote-slider__slide.is-active .quote-section__author {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.35s,
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}

/* Первая цитата при загрузке страницы — без анимации */
.quote-slider:not(.is-animated) .quote-slider__slide.is-active .quote-section__text,
.quote-slider:not(.is-animated) .quote-slider__slide.is-active .quote-section__author {
    transition: none;
}

.quote-section__source-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.3s ease;
}

.quote-section__source-link:hover {
    color: var(--slider-dot-red, #E61734);
}

@media (max-width: 768px) {
    .quote-slider {
        gap: 20px 40px;
    }
}

/* ===== Планшет и мобилка (≤1024): мышь-узор «уходит вниз» =====
   На ≤1024 узор стоит слева внизу и по высоте попадает в ряд навигации.
   Привязываем его к низу листа так, чтобы верх мыши был на 70px выше края листа
   (как на мобилке в исходной вёрстке), а ряд навигации поднимаем над ней
   (padding-bottom 80px). Отступ секции снизу = свес узора + 30px, как на мобилке
   (240px при свесе 210px). Высоты узора — из quote-section.css. */
@media (max-width: 1024px) {
    .quote-section--slider .quote-section__content {
        padding-bottom: 80px;
    }

    .quote-section--slider .quote-section__patterns {
        top: auto;
        bottom: -315px; /* высота 385 − 70 */
    }

    .quote-section.quote-section--slider,
    .quote-person > .quote-section.quote-section--slider {
        margin-bottom: 345px;
    }
}

@media (max-width: 850px) {
    .quote-section--slider .quote-section__patterns {
        bottom: -270px; /* 340 − 70 */
    }

    .quote-section.quote-section--slider,
    .quote-person > .quote-section.quote-section--slider {
        margin-bottom: 300px;
    }
}

@media (max-width: 768px) {
    .quote-section--slider .quote-section__patterns {
        bottom: -230px; /* 300 − 70 */
    }

    .quote-section.quote-section--slider,
    .quote-person > .quote-section.quote-section--slider {
        margin-bottom: 260px;
    }
}

@media (max-width: 680px) {
    .quote-section--slider .quote-section__patterns {
        bottom: -210px; /* 280 − 70 */
    }

    .quote-section.quote-section--slider,
    .quote-person > .quote-section.quote-section--slider {
        margin-bottom: 240px;
    }
}

/* На мобилке отступы секции — исходные (240px на главной), узор уже был внизу */
@media (max-width: 580px) {
    .quote-section.quote-section--slider {
        margin-bottom: 240px;
    }

    .quote-person > .quote-section.quote-section--slider {
        margin-bottom: 60px;
    }
}

/* ===== ≤580 — мобилка: стрелки к краям, как у products_slider =====
   У товаров стрелка от края экрана = отступ контейнера + margin стрелки:
   541–580: 24+25=49 · 481–540: 16+25=41 · 421–480: 16+35=51 · 361–420: 16+20=36 · ≤360: 12+10=22.
   Здесь ряд стоит внутри листа (левый край ряда от экрана: 48 / 36 / 34px),
   поэтому margin = нужный отступ − край ряда. Точки по центру — расстояние до них такое же, как у товаров. */
@media (max-width: 580px) {
    .quote-slider {
        grid-template-columns: auto 1fr auto;
        gap: 20px 0;
    }

    .quote-slider .quote-slider__arrow--prev {
        justify-self: start;
        margin: 0 0 0 1px; /* 49 − 48 */
    }

    .quote-slider .quote-slider__pagination {
        justify-self: center;
    }

    .quote-slider .quote-slider__arrow--next {
        justify-self: end;
        margin: 0 1px 0 0;
    }

    .quote-section--slider .quote-section__patterns {
        bottom: -210px; /* 280 − 70 */
    }

}

@media (max-width: 540px) {
    .quote-slider .quote-slider__arrow--prev {
        margin: 0 0 0 -7px; /* 41 − 48 */
    }

    .quote-slider .quote-slider__arrow--next {
        margin: 0 -7px 0 0;
    }
}

@media (max-width: 480px) {
    .quote-slider .quote-slider__arrow--prev {
        margin: 0 0 0 15px; /* 51 − 36 */
    }

    .quote-slider .quote-slider__arrow--next {
        margin: 0 15px 0 0;
    }
}

@media (max-width: 420px) {
    .quote-slider .quote-slider__arrow--prev {
        margin: 0; /* 36 − 36 */
    }

    .quote-slider .quote-slider__arrow--next {
        margin: 0;
    }
}

@media (max-width: 400px) {
    .quote-slider .quote-slider__arrow--prev {
        margin: 0 0 0 2px; /* 36 − 34 */
    }

    .quote-slider .quote-slider__arrow--next {
        margin: 0 2px 0 0;
    }

    .quote-section--slider .quote-section__patterns {
        bottom: -170px; /* 240 − 70 */
    }
}

@media (max-width: 360px) {
    .quote-slider .quote-slider__arrow--prev {
        margin: 0 0 0 -12px; /* 22 − 34 */
    }

    .quote-slider .quote-slider__arrow--next {
        margin: 0 -12px 0 0;
    }

    .quote-section--slider .quote-section__patterns {
        bottom: -145px; /* как в исходной вёрстке: верх мыши на 55px выше края листа */
    }
}