/**
 * Главная: слайдер коллекций.
 * Все селекторы с префиксом .pl-home-slider, глобальные стили сайта не меняются.
 */

/* ---------- Каркас ---------- */

.pl-home-slider {
    position: relative;
    display: block;
    margin: 0 0 8px;
}

.pl-home-slider .pl-home-slider__inner {
    position: relative;
}

/* Слайдер: пропорция 2:1, но не выше 640px (как у hero). */
/* Слайдер — контейнер для cqw: 1cqw = 1% ширины слайда (дизайн-сетка 1600). */
.pl-home-slider .pl-home-slider__swiper {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 800px;
    overflow: hidden;
    background: #eceef2;
    z-index: 1;
    container-type: inline-size;
}

.pl-home-slider .pl-home-slider__slide {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(125deg, #202638 0%, #39415a 55%, #202638 100%);
}

/* Легкое затемнение внизу — чтобы точки пагинации читались на любом фото. */
.pl-home-slider .pl-home-slider__slide::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(32, 38, 56, 0) 0%, rgba(32, 38, 56, .45) 100%);
    pointer-events: none;
}

.pl-home-slider__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pl-home-slider .pl-home-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    transition: transform 620ms cubic-bezier(.2, .7, .2, 1);
}

/* Перебиваем глобальные правила сайта img[width][height] (cls-optimization-soft.css)
   и .block1 img (template_styles.css): иначе картинка не заполняет слайд. */
.pl-home-slider .pl-home-slider__picture img.pl-home-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
}


@media (hover: hover) and (pointer: fine) {
    .pl-home-slider__slide:hover .pl-home-slider__image {
        transform: scale(1.02);
    }
}

/* Кликабельная область картинки: отдельная ссылка-оверлей, не обёртка. */
.pl-home-slider .pl-home-slider__media-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    outline-offset: -4px;
}

.pl-home-slider .pl-home-slider__media-link:focus-visible {
    outline: 3px solid #fbb738;
    outline-offset: -3px;
}

/* Слайд без картинки: градиент и текст справа — слева снизу стоит карточка-подпись. */
.pl-home-slider .pl-home-slider__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 8% 8% 8% 42%;
    text-align: right;
    background:
        radial-gradient(120% 120% at 12% 18%, rgba(251, 183, 56, .34) 0%, rgba(251, 183, 56, 0) 58%),
        linear-gradient(125deg, #202638 0%, #39415a 55%, #202638 100%);
}

.pl-home-slider .pl-home-slider__placeholder-title {
    display: block;
    max-width: 100%;
    font-family: inherit;
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
}

/* ---------- Карточка-подпись ---------- */

/* Слой подписей вынесен из .swiper, поэтому карточка может выступать за край фото. */
.pl-home-slider .pl-home-slider__captions {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.pl-home-slider .pl-home-slider__caption {
    position: absolute;
    left: -48px;
    top: 56px;
    bottom: auto;
    width: min(46%, 620px);
    box-sizing: border-box;
    padding: 32px 36px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(32, 38, 56, .18);
    opacity: 0;
    transform: translateX(-56px);
    transition:
        opacity 520ms cubic-bezier(.2, .7, .2, 1),
        transform 520ms cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}

/* На узких десктопах выступ ужимается, чтобы блок не вызывал горизонтальный скролл. */
@supports (left: max(0px, 1px)) {
    .pl-home-slider .pl-home-slider__caption {
        left: max(-48px, calc(16px - (100vw - 100%) / 2));
    }
}

.pl-home-slider .pl-home-slider__caption--active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.pl-home-slider .pl-home-slider__title {
    margin: 0 0 12px;
    font-family: inherit;
    font-size: clamp(28px, 3.2vw, 46px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #202638;
    opacity: 0;
    transform: translateX(-24px);
    transition:
        opacity 480ms cubic-bezier(.2, .7, .2, 1) 80ms,
        transform 480ms cubic-bezier(.2, .7, .2, 1) 80ms;
}

.pl-home-slider .pl-home-slider__subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0 0 24px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: #5a6272;
    opacity: 0;
    transform: translateX(-24px);
    transition:
        opacity 480ms cubic-bezier(.2, .7, .2, 1) 120ms,
        transform 480ms cubic-bezier(.2, .7, .2, 1) 120ms;
}

.pl-home-slider .pl-home-slider__caption--active .pl-home-slider__title,
.pl-home-slider .pl-home-slider__caption--active .pl-home-slider__subtitle {
    opacity: 1;
    transform: translateX(0);
}

/* Кнопка: настоящая ссылка, акцент сайта #fbb738 на hover. */
.pl-home-slider .pl-home-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 4px;
    background: #202638;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-16px);
    transition:
        background-color .2s ease,
        color .2s ease,
        opacity 480ms cubic-bezier(.2, .7, .2, 1) 160ms,
        transform 480ms cubic-bezier(.2, .7, .2, 1) 160ms;
}

.pl-home-slider .pl-home-slider__caption--active .pl-home-slider__button {
    opacity: 1;
    transform: translateX(0);
}

.pl-home-slider .pl-home-slider__button::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateX(0) rotate(45deg);
    transition: transform .2s ease;
}

.pl-home-slider .pl-home-slider__button:hover,
.pl-home-slider .pl-home-slider__button:focus-visible {
    background: #fbb738;
    color: #202638;
}

.pl-home-slider .pl-home-slider__button:hover::after,
.pl-home-slider .pl-home-slider__button:focus-visible::after {
    transform: translateX(4px) rotate(45deg);
}

.pl-home-slider .pl-home-slider__button:focus-visible {
    outline: 3px solid #202638;
    outline-offset: 3px;
}

/* ---------- Навигация ---------- */

.pl-home-slider .pl-home-slider__nav {
    position: absolute;
    right: 0;
    bottom: 56px;
    z-index: 4;
    display: flex;
    gap: 12px;
}

.pl-home-slider .pl-home-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #202638;
    box-shadow: 0 10px 24px rgba(32, 38, 56, .16);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.pl-home-slider .pl-home-slider__arrow:hover,
.pl-home-slider .pl-home-slider__arrow:focus-visible {
    background: #fbb738;
    color: #202638;
}

.pl-home-slider .pl-home-slider__arrow:focus-visible {
    outline: 3px solid #202638;
    outline-offset: 3px;
}

.pl-home-slider .pl-home-slider__arrow:active {
    transform: scale(.96);
}

.pl-home-slider .pl-home-slider__arrow.swiper-button-disabled {
    opacity: .45;
    cursor: default;
    background: #fff;
}

/* Точки: снизу по центру поверх фото. */
.pl-home-slider .pl-home-slider__inner > .pl-home-slider__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    margin: 0;
}

.pl-home-slider .pl-home-slider__pagination.swiper-pagination-horizontal {
    left: 0;
    width: auto;
}

.pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet {
    display: block;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    min-width: 8px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(32, 38, 56, .18), 0 2px 10px rgba(32, 38, 56, .35);
    opacity: 1;
    cursor: pointer;
    transition: width .25s ease, background-color .2s ease;
}

.pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet-active {
    width: 26px;
    min-width: 26px;
    background: #fff;
}

.pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #fbb738;
    outline-offset: 3px;
}

/* ---------- Планшет ---------- */

@media (min-width: 768px) and (max-width: 991px) {
    .pl-home-slider .pl-home-slider__caption {
        width: min(62%, 520px);
        bottom: 32px;
        padding: 24px 26px;
    }

    .pl-home-slider .pl-home-slider__title {
        font-size: clamp(24px, 4vw, 34px);
    }

    .pl-home-slider .pl-home-slider__subtitle {
        margin-bottom: 18px;
        font-size: 14px;
    }

    .pl-home-slider .pl-home-slider__button {
        min-height: 46px;
        padding: 0 20px;
        font-size: 13px;
    }

    .pl-home-slider .pl-home-slider__nav {
        bottom: 32px;
    }

    .pl-home-slider .pl-home-slider__arrow {
        width: 44px;
        height: 44px;
    }
}

/* ---------- Мобильные: карточка под картинкой, стрелки скрыты ---------- */

@media (max-width: 767px) {
    .pl-home-slider .pl-home-slider__swiper {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .pl-home-slider .pl-home-slider__slide::after {
        display: none;
    }

    /* Подпись встаёт под картинку, точки — под карточкой. */
    .pl-home-slider .pl-home-slider__inner {
        padding-bottom: 34px;
    }

    .pl-home-slider .pl-home-slider__captions {
        position: static;
        pointer-events: auto;
    }

    .pl-home-slider .pl-home-slider__caption {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        padding: 20px 18px 24px;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 16px 34px rgba(32, 38, 56, .10);
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pl-home-slider .pl-home-slider__caption:not(.pl-home-slider__caption--active) {
        display: none;
    }

    .pl-home-slider .pl-home-slider__title {
        margin-bottom: 10px;
        font-size: clamp(20px, 6vw, 28px);
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pl-home-slider .pl-home-slider__subtitle {
        -webkit-line-clamp: 4;
        margin-bottom: 18px;
        font-size: 14px;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pl-home-slider .pl-home-slider__button {
        display: flex;
        width: 100%;
        min-height: 48px;
        padding: 0 18px;
        font-size: 13px;
        opacity: 1;
        transform: none;
        transition: background-color .2s ease, color .2s ease;
    }

    .pl-home-slider .pl-home-slider__placeholder {
        justify-content: flex-start;
        padding: 8%;
        text-align: left;
    }

    .pl-home-slider .pl-home-slider__nav {
        display: none;
    }

    .pl-home-slider .pl-home-slider__inner > .pl-home-slider__pagination {
        bottom: 8px;
    }

    .pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        min-width: 6px;
        background: rgba(32, 38, 56, .25);
        box-shadow: none;
    }

    .pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet-active {
        width: 22px;
        min-width: 22px;
        background: #202638;
    }
}

/* ---------- Без анимации ---------- */

@media (prefers-reduced-motion: reduce) {
    .pl-home-slider .pl-home-slider__caption,
    .pl-home-slider .pl-home-slider__title,
    .pl-home-slider .pl-home-slider__subtitle,
    .pl-home-slider .pl-home-slider__button,
    .pl-home-slider .pl-home-slider__button::after,
    .pl-home-slider .pl-home-slider__image,
    .pl-home-slider .pl-home-slider__arrow,
    .pl-home-slider .pl-home-slider__el,
    .pl-home-slider .pl-home-slider__pagination .swiper-pagination-bullet {
        transition: none;
        animation: none;
    }

    .pl-home-slider .pl-home-slider__caption,
    .pl-home-slider .pl-home-slider__title,
    .pl-home-slider .pl-home-slider__subtitle,
    .pl-home-slider .pl-home-slider__button {
        transform: none;
    }
}

/* ---------- Страховка: Swiper не загрузился или слайд один ---------- */

.pl-home-slider--static .pl-home-slider__nav,
.pl-home-slider--static .pl-home-slider__inner > .pl-home-slider__pagination,
.pl-home-slider--static .pl-home-slider__caption:not(.pl-home-slider__caption--active) {
    display: none;
}

.pl-home-slider--static .pl-home-slider__swiper {
    overflow: hidden;
}

.pl-home-slider--static .pl-home-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pl-home-slider--static .pl-home-slider__slide:not(:first-child) {
    display: none;
}


/* =========================================================================
   Конструктор слайда (LAYOUT)
   Элементы расставлены в процентах от слайда, шрифты/радиусы/отступы — в cqw:
   1cqw = 1% ширины слайда, дизайн-сетка 1600 => fontSize 46 = calc(46/16*1cqw).
   ========================================================================= */

.pl-home-slider .pl-home-slider__layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Слой элементов выше ссылки-оверлея (z-index 2), но не перехватывает клики:
   кликабельна только кнопка, остальное проваливается на баннер. */
.pl-home-slider .pl-home-slider__el {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity 480ms cubic-bezier(.2, .7, .2, 1),
        transform 480ms cubic-bezier(.2, .7, .2, 1);
    /* Каскад по порядку элементов, но не дольше ~440мс даже при 20 элементах. */
    transition-delay: calc(min(var(--pl-el-index, 0), 8) * 55ms);
}

.pl-home-slider .swiper-slide-active .pl-home-slider__el,
.pl-home-slider .swiper-slide-duplicate-active .pl-home-slider__el,
.pl-home-slider--static .pl-home-slider__slide:first-child .pl-home-slider__el,
.pl-home-slider:not([data-pl-ready]) .pl-home-slider__slide:first-child .pl-home-slider__el {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---------- Плашка ---------- */

.pl-home-slider .pl-home-slider__el--plate {
    border-radius: calc(var(--pl-r, 0) / 16 * 1cqw);
}

/* ---------- Текст: заголовок, подзаголовок, абзац ---------- */

.pl-home-slider .pl-home-slider__el--title,
.pl-home-slider .pl-home-slider__el--subtitle,
.pl-home-slider .pl-home-slider__el--text {
    overflow-wrap: break-word;
    word-break: break-word;
    font-family: inherit;
    font-size: calc(var(--pl-fs, 16) / 16 * 1cqw);
    text-size-adjust: 100%;
}

.pl-home-slider .pl-home-slider__el--title {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.pl-home-slider .pl-home-slider__el--subtitle {
    font-weight: 400;
    line-height: 1.3;
}

.pl-home-slider .pl-home-slider__el--text {
    font-weight: 400;
    line-height: 1.5;
}

.pl-home-slider .pl-home-slider__el--align-left {
    text-align: left;
}

.pl-home-slider .pl-home-slider__el--align-center {
    text-align: center;
}

.pl-home-slider .pl-home-slider__el--align-right {
    text-align: right;
}

/* ---------- Кнопка: настоящая ссылка, только она ловит клики ---------- */

.pl-home-slider .pl-home-slider__el--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    box-sizing: border-box;
    padding: .72em 1.5em;
    border: 0;
    border-radius: calc(var(--pl-r, 0) / 16 * 1cqw);
    font-family: inherit;
    font-size: calc(var(--pl-fs, 16) / 16 * 1cqw);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: auto;
    transition:
        filter .2s ease,
        box-shadow .2s ease,
        opacity 480ms cubic-bezier(.2, .7, .2, 1),
        transform 480ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(min(var(--pl-el-index, 0), 8) * 55ms);
}

.pl-home-slider .pl-home-slider__el--button.pl-home-slider__el--align-left {
    justify-content: flex-start;
    text-align: left;
}

.pl-home-slider .pl-home-slider__el--button.pl-home-slider__el--align-right {
    justify-content: flex-end;
    text-align: right;
}

.pl-home-slider .pl-home-slider__el--button:hover {
    filter: brightness(1.12);
}

/* Кнопка без адреса (нет ни link, ни LINK слайда) — визуально кнопка,
   но не притворяется кликабельной. */
.pl-home-slider .pl-home-slider__el--button-static,
.pl-home-slider .pl-home-slider__el--button-static:hover {
    cursor: default;
    filter: none;
    pointer-events: none;
}

.pl-home-slider .pl-home-slider__el--button:focus-visible {
    outline: 3px solid #fbb738;
    outline-offset: 3px;
}

/* Тень включается только у plate/button (shadow: true). */
.pl-home-slider .pl-home-slider__el--shadow {
    box-shadow: 0 calc(10 / 16 * 1cqw) calc(30 / 16 * 1cqw) rgba(32, 38, 56, .22);
}

/* Если контейнерные запросы не поддерживаются — резервный масштаб от вьюпорта.
   На десктопе ширина слайда ограничена сеткой/1600, поэтому min(1vw, 16px). */
@supports not (container-type: inline-size) {
    .pl-home-slider .pl-home-slider__el--title,
    .pl-home-slider .pl-home-slider__el--subtitle,
    .pl-home-slider .pl-home-slider__el--text,
    .pl-home-slider .pl-home-slider__el--button {
        font-size: calc(var(--pl-fs, 16) / 16 * min(1vw, 16px));
    }

    .pl-home-slider .pl-home-slider__el--plate,
    .pl-home-slider .pl-home-slider__el--button {
        border-radius: calc(var(--pl-r, 0) / 16 * min(1vw, 16px));
    }

    .pl-home-slider .pl-home-slider__el--shadow {
        box-shadow: 0 calc(10 / 16 * min(1vw, 16px)) calc(30 / 16 * min(1vw, 16px)) rgba(32, 38, 56, .22);
    }
}

/* ---------- Планшет и мобильные: LAYOUT-слой отключается ----------
   При ширине <992px пропорциональный cqw-масштаб делает подзаголовок 20px
   равным ~5px, а текст — нечитаемым. Поэтому на узких экранах показываем
   привычную карточку (.pl-home-slider__caption--layout) с текстом из LAYOUT. */

.pl-home-slider .pl-home-slider__caption--layout {
    display: none;
}

@media (max-width: 991px) {
    .pl-home-slider .pl-home-slider__layer {
        display: none;
    }

    .pl-home-slider .pl-home-slider__caption--layout {
        display: block;
    }
}

/* ---------- Без анимации: элементы сразу на месте ---------- */

@media (prefers-reduced-motion: reduce) {
    .pl-home-slider .pl-home-slider__el {
        transition: none;
        transform: none;
    }

    .pl-home-slider .pl-home-slider__el--button {
        transition: none;
    }
}



/* ---------- Характеристики коллекции справа (SPECS) ---------- */

.pl-home-slider .pl-home-slider__specs {
    position: absolute;
    top: 8%;
    right: 2.2%;
    z-index: 4;
    box-sizing: border-box;
    width: min(32%, 470px);
    padding: calc(20 / 16 * 1cqw) calc(24 / 16 * 1cqw);
    background: rgba(255, 255, 255, .94);
    border-radius: calc(6 / 16 * 1cqw);
    box-shadow: 0 14px 40px rgba(32, 38, 56, .16);
    color: #202638;
    font-family: inherit;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1);
}

.pl-home-slider__slide.swiper-slide-active .pl-home-slider__specs {
    opacity: 1;
    transform: translateX(0);
}

.pl-home-slider .pl-home-slider__spec-line {
    font-size: calc(21 / 16 * 1cqw);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .04em;
}

.pl-home-slider .pl-home-slider__spec-line + .pl-home-slider__spec-line {
    margin-top: calc(4 / 16 * 1cqw);
}

@media (max-width: 991px) {
    .pl-home-slider .pl-home-slider__specs {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pl-home-slider .pl-home-slider__specs {
        transition: none;
        transform: none;
    }
}