/* ==========================================================================
   Промо-полоса — узкий блок во всю ширину: текст слева, кнопки рядом,
   картинка свисает за правый край и обрезается по краю блока.
   В макете таких две, различаются только заливкой и размерами:

     --az     «Ищете конкретный материал?»  тёмная, каталог
              Figma: 139:2396 — десктоп 1440 × 180 (от y = 2198)
                     275:4873 — мобильный 375 × 320
     --offer  «Нужны цены и условия оптовой поставки?» светлая, подраздел
              Figma: 190:4445 — десктоп 1440 × 240 (от y = 2222)
                     275:6267 — мобильный 375 × 430
     --ask    «Подберём систему покрытий под условия эксплуатации»
              светлая же, страница «Объекты». Отличается от --offer только
              шириной текста и вылетами картинки — фотография, тень и ромб
              те же самые
              Figma: 181:2920  — десктоп 1440 × 218 (от y = 2430)
                     279:11266 — мобильный 375 × 417
     --news   «Нужна консультация по материалам?» светлая, страница
              «Новости». Картинка стоит там же, где у --ask, отличается
              только ширина текста
              Figma: 144:5222  — десктоп 1440 × 202 (от y = 1780)
                     279:11928 — мобильный 375 × 408
     --about  «Подберём систему покрытий для вашего объекта» светлая,
              страница «О компании». От --ask отличается только шириной
              текста и размером картинки — она здесь мельче на 10%
              Figma: 190:4508  — десктоп 1440 × 218 (от y = 2510)
                     279:11458 — мобильный 375 × 439
     --doc    «Не нашли нужный документ?» страницы «Сертификаты»
              и «Доставка и оплата». Единственная полоса, которая лежит
              внутри контейнера, а не во всю ширину экрана, поэтому серую
              заливку несёт .promo-strip__box. Картинка и узор здесь свои
              Figma: 145:5758  — десктоп 1320 × 202 (от y = 1545)
                     280:12851 — мобильный 343 × 424
     --calc   «Нужно рассчитать поставку?» страница «Доставка и оплата».
              От --news отличается только шириной текста: банки, их тень
              и ромб стоят там же
              Figma: 169:7333  — десктоп 1440 × 202 (от y = 1923)
                     281:13815 — мобильный 375 × 386
     --warehouse «Склад «Финсервис»» там же. Вторая полоса внутри
              контейнера: содержимое стоит по центру, вместо картинки
              по краям уходят два поля ромбов
              Figma: 168:7157  — десктоп 1320 × 180 (от y = 839)
                     281:13697 — мобильный 343 × 211

   WP: template-parts/blocks/promo-strip.php
   ========================================================================== */

.promo-strip {
    position: relative;
    /* картинка и узор в макете свисают за край блока, лишнее срезается здесь */
    overflow: hidden;
    padding: 56px 0;
}

.promo-strip__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 56px;
}

.promo-strip__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.promo-strip__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.promo-strip__photo,
.promo-strip__decor,
.promo-strip__shadow {
    position: absolute;
    /* картинки шире экрана, поэтому общий для страницы max-width снимаем */
    max-width: none;
    pointer-events: none;
}

/* ==========================================================================
   Тёмная — «Ищете конкретный материал?»
   ========================================================================== */

.promo-strip--az {
    background-color: #1a1a1c;
    /* свечение слева — повёрнутый эллиптический градиент, который CSS
       выразить не может, поэтому он вынесен в отдельный SVG */
    background-image: url("../../img/az-glow.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.promo-strip--az .promo-strip__text {
    width: 464px;
}

.promo-strip--az .promo-strip__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-white);
}

.promo-strip--az .promo-strip__desc {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-400);
}

/* у обеих кнопок боковые поля 32px вместо стандартных 24px */
.promo-strip--az .promo-strip__buttons .btn {
    padding-left: 32px;
    padding-right: 32px;
}

.promo-strip--az .promo-strip__photo {
    right: calc(55px + var(--container-offset));
    bottom: -1px;
    width: 340px;
    height: 170px;
}

.promo-strip--az .promo-strip__decor {
    top: -8px;
    right: calc(-34.66px + var(--container-offset));
    width: 276.944px;
    height: 237.001px;
}

/* ==========================================================================
   Светлые — «Нужны цены и условия оптовой поставки?» и «Подберём систему»
   Внешность у них общая, различаются только ширина текста и вылеты картинки
   ========================================================================== */

.promo-strip--offer,
.promo-strip--ask,
.promo-strip--news,
.promo-strip--about,
.promo-strip--calc {
    background-color: var(--c-grey-200);
}

.promo-strip--offer .promo-strip__text {
    width: 534px;
}

.promo-strip--offer .promo-strip__title,
.promo-strip--ask .promo-strip__title,
.promo-strip--news .promo-strip__title,
.promo-strip--about .promo-strip__title,
.promo-strip--doc .promo-strip__title,
.promo-strip--calc .promo-strip__title,
.promo-strip--warehouse .promo-strip__title {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

.promo-strip--offer .promo-strip__desc,
.promo-strip--ask .promo-strip__desc,
.promo-strip--news .promo-strip__desc,
.promo-strip--about .promo-strip__desc,
.promo-strip--doc .promo-strip__desc,
.promo-strip--calc .promo-strip__desc,
.promo-strip--warehouse .promo-strip__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

/* в макете у этих кнопок текст 16px и боковые отступы 40px */
.promo-strip--offer .promo-strip__buttons .btn,
.promo-strip--ask .promo-strip__buttons .btn,
.promo-strip--news .promo-strip__buttons .btn,
.promo-strip--about .promo-strip__buttons .btn,
.promo-strip--doc .promo-strip__buttons .btn,
.promo-strip--calc .promo-strip__buttons .btn {
    padding-left: 40px;
    padding-right: 40px;
    font-size: 16px;
}

/* Банки с веером: сама фотография, её тень и большой ромб позади.
   Все три отмерены от правого края контейнера */
.promo-strip--offer .promo-strip__photo {
    right: calc(-21px + var(--container-offset));
    bottom: -34px;
    width: 375px;
    height: 250px;
}

/* Тень нарисована отдельной картинкой и лежит под фотографией */
.promo-strip--offer .promo-strip__shadow {
    right: calc(50.5px + var(--container-offset));
    bottom: -1.5px;
    width: 277.5px;
    height: 117.5px;
}

.promo-strip--offer .promo-strip__decor {
    right: calc(-74px + var(--container-offset));
    bottom: -186px;
    width: 402px;
    height: 402px;
}

.promo-strip--ask .promo-strip__text {
    width: 613px;
}

/* Те же три слоя, что и у --offer. Здесь они отмерены от верхнего края:
   в макете эта полоса встречается двух высот (218px на «Объектах»
   и 180px на карточке объекта), и картинка в обеих стоит одинаково сверху */
.promo-strip--ask .promo-strip__photo,
.promo-strip--news .promo-strip__photo,
.promo-strip--calc .promo-strip__photo {
    top: 4px;
    right: calc(13px + var(--container-offset));
    width: 375px;
    height: 250px;
}

.promo-strip--ask .promo-strip__shadow,
.promo-strip--news .promo-strip__shadow,
.promo-strip--calc .promo-strip__shadow {
    top: 104px;
    right: calc(84.5px + var(--container-offset));
    width: 277.5px;
    height: 117.5px;
}

.promo-strip--ask .promo-strip__decor,
.promo-strip--news .promo-strip__decor,
.promo-strip--calc .promo-strip__decor {
    top: 4px;
    right: calc(-40px + var(--container-offset));
    width: 402px;
    height: 402px;
}

.promo-strip--news .promo-strip__text {
    width: 575px;
}

/* в макете описание уже колонки текста — так делится на две строки */
.promo-strip--news .promo-strip__desc {
    max-width: 460px;
}

.promo-strip--about .promo-strip__text {
    width: 702px;
}

/* Те же три слоя, но выведены мельче — 0.9 от размера у --ask */
.promo-strip--about .promo-strip__photo {
    top: 26px;
    right: calc(-30.75px + var(--container-offset));
    width: 336.754px;
    height: 224.502px;
}

.promo-strip--about .promo-strip__shadow {
    top: 114.98px;
    right: calc(32.63px + var(--container-offset));
    width: 250.83px;
    height: 107.148px;
}

.promo-strip--about .promo-strip__decor {
    top: 26px;
    right: calc(-78.35px + var(--container-offset));
    width: 361px;
    height: 361px;
}

/* «Нужно рассчитать поставку?»: от --news отличается только шириной текста —
   при 449px описание делится на две строки так же, как в макете */
.promo-strip--calc .promo-strip__text {
    width: 449px;
}

/* --------------------------------------------------------------------------
   «Не нашли нужный документ?» — полоса внутри контейнера
   Заливку, поля и обрезку декора несёт .promo-strip__box: сама секция
   задаёт только расстояние до соседних блоков
   -------------------------------------------------------------------------- */

.promo-strip--doc {
    /* 96px — отбивка до подвала, сверху её задаёт предыдущий блок */
    padding: 0 0 96px;
}

.promo-strip__box {
    position: relative;
    /* картинка и узор свисают за край полосы, лишнее срезается здесь */
    overflow: hidden;
    padding: 56px 60px;
    background-color: var(--c-grey-200);
}

.promo-strip--doc .promo-strip__text {
    width: 451px;
}

/* Конверт с документами, его тень и полоса ромбов — всё отмерено
   от краёв самой полосы, контейнер здесь уже учтён */
.promo-strip--doc .promo-strip__photo {
    top: 24px;
    right: 56px;
    width: 373px;
    height: 248px;
}

.promo-strip--doc .promo-strip__shadow {
    top: 63px;
    right: 52px;
    width: 359px;
    height: 161px;
}

.promo-strip--doc .promo-strip__decor {
    top: 56px;
    left: -255px;
    width: 687px;
    height: 236px;
}

/* --------------------------------------------------------------------------
   «Склад «Финсервис»» — вторая полоса внутри контейнера
   Картинки здесь нет: по краям полосы уходят два поля ромбов,
   а текст с кнопкой стоят по центру
   -------------------------------------------------------------------------- */

.promo-strip--warehouse {
    /* сверху и снизу отбивку даёт сама секция, как у полос во всю ширину */
    padding: 56px 0;
}

.promo-strip--warehouse .promo-strip__inner {
    justify-content: center;
}

.promo-strip--warehouse .promo-strip__text {
    width: 402px;
}

/* У этой кнопки поля шире обычных и справа стоит стрелка */
.promo-strip--warehouse .promo-strip__buttons .btn {
    padding-left: 40px;
    padding-right: 36px;
    font-size: 16px;
}

.promo-strip--warehouse .promo-strip__buttons .btn img {
    flex-shrink: 0;
}

/* Два поля ромбов: левое опущено, правое поднято — оба обрезаются
   краями полосы */
.promo-strip--warehouse .promo-strip__decor {
    top: 18px;
    left: -280px;
    width: 829.9px;
    height: 284.6px;
}

.promo-strip--warehouse .promo-strip__decor--right {
    top: -105px;
    right: -217.9px;
    left: auto;
    width: 829.9px;
    height: 284.6px;
}

/* --------------------------------------------------------------------------
   Планшет: картинка мешает кнопкам, поэтому уезжает за правый край
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .promo-strip--az .promo-strip__text {
        width: auto;
        flex: 0 1 464px;
    }

    .promo-strip--offer .promo-strip__text {
        width: auto;
        flex: 0 1 534px;
    }

    .promo-strip--ask .promo-strip__text {
        width: auto;
        flex: 0 1 613px;
    }

    .promo-strip--news .promo-strip__text {
        width: auto;
        flex: 0 1 575px;
    }

    .promo-strip--about .promo-strip__text {
        width: auto;
        flex: 0 1 702px;
    }

    .promo-strip--calc .promo-strip__text {
        width: auto;
        flex: 0 1 449px;
    }
}

@media (max-width: 1023px) {
    .promo-strip__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .promo-strip--az .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 464px;
    }

    /* Светлой полосе картинка мешает уже здесь: текст с кнопкой встают
       в колонку, а под ними освобождается место под банки — так же,
       как это нарисовано в мобильном макете */
    .promo-strip--offer {
        padding-bottom: 144px;
    }

    .promo-strip--offer .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 534px;
    }

    .promo-strip--offer .promo-strip__photo {
        right: calc(-15.83px + var(--container-offset));
        bottom: -31.89px;
        width: 248.832px;
        height: 165.888px;
    }

    .promo-strip--offer .promo-strip__shadow {
        right: calc(31.61px + var(--container-offset));
        bottom: -10.32px;
        width: 184.136px;
        height: 77.967px;
    }

    /* на узких экранах ромб другой — вытянутый, из мобильного макета */
    .promo-strip--offer .promo-strip__decor {
        right: auto;
        bottom: auto;
        left: calc(-45px + var(--container-offset));
        top: 285px;
        width: 482px;
        height: 268px;
    }

    /* Светлые полосы «Подберём систему» и «Нужна консультация» ведут себя так же */
    .promo-strip--ask,
    .promo-strip--news,
    .promo-strip--about,
    .promo-strip--calc {
        padding-bottom: 144px;
    }

    .promo-strip--ask .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 613px;
    }

    .promo-strip--news .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 575px;
    }

    .promo-strip--about .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 702px;
    }

    .promo-strip--calc .promo-strip__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 449px;
    }

    .promo-strip--ask .promo-strip__photo,
    .promo-strip--news .promo-strip__photo,
    .promo-strip--about .promo-strip__photo,
    .promo-strip--calc .promo-strip__photo {
        top: auto;
        right: calc(-15.83px + var(--container-offset));
        bottom: -32.89px;
        width: 248.832px;
        height: 165.888px;
    }

    .promo-strip--ask .promo-strip__shadow,
    .promo-strip--news .promo-strip__shadow,
    .promo-strip--about .promo-strip__shadow,
    .promo-strip--calc .promo-strip__shadow {
        top: auto;
        right: calc(31.61px + var(--container-offset));
        bottom: -11.32px;
        width: 184.136px;
        height: 77.967px;
    }

    .promo-strip--ask .promo-strip__decor,
    .promo-strip--news .promo-strip__decor,
    .promo-strip--about .promo-strip__decor,
    .promo-strip--calc .promo-strip__decor {
        top: auto;
        right: calc(-62px + var(--container-offset));
        bottom: -124px;
        width: 482px;
        height: 268px;
    }

    /* «Не нашли нужный документ?»: текст и кнопка встают по центру
       колонкой, под ними освобождается место под конверт — так же,
       как это нарисовано в мобильном макете.
       160px снизу дают ровно ту высоту полосы, что и в макете (424px) */
    .promo-strip--doc {
        padding-bottom: 56px;
    }

    .promo-strip--doc .promo-strip__box {
        padding: 56px var(--container-pad) 160px;
    }

    .promo-strip--doc .promo-strip__inner {
        align-items: center;
    }

    .promo-strip--doc .promo-strip__text {
        width: 100%;
        max-width: 451px;
        text-align: center;
    }

    /* Те же три слоя, но выведены мельче — 0.804 от размера на десктопе */
    .promo-strip--doc .promo-strip__photo {
        top: auto;
        right: 21px;
        bottom: -53px;
        width: 300px;
        height: 200px;
    }

    .promo-strip--doc .promo-strip__shadow {
        top: auto;
        right: 18.91px;
        bottom: -13.84px;
        width: 288.74px;
        height: 129.49px;
    }

    /* на узких экранах полоса ромбов другая — ниже, из мобильного макета */
    .promo-strip--doc .promo-strip__decor {
        top: auto;
        left: -69px;
        bottom: -43px;
        width: 687px;
        height: 176px;
    }

    /* «Склад «Финсервис»»: текст и кнопка встают в колонку,
       кнопка растягивается на всю ширину полосы, как в макете.
       Сверху отбивка в мобильном макете меньше — 32px вместо 56px */
    .promo-strip--warehouse {
        padding-top: 32px;
    }

    .promo-strip--warehouse .promo-strip__box {
        padding: 32px var(--container-pad);
    }

    .promo-strip--warehouse .promo-strip__inner {
        justify-content: flex-start;
    }

    .promo-strip--warehouse .promo-strip__text,
    .promo-strip--warehouse .promo-strip__buttons {
        width: 100%;
    }

    .promo-strip--warehouse .promo-strip__buttons .btn {
        width: 100%;
    }

    /* в мобильном макете поле ромбов одно и лежит под текстом */
    .promo-strip--warehouse .promo-strip__decor {
        top: 56.7px;
        left: -85px;
        width: 522px;
        height: 179px;
    }

    .promo-strip--warehouse .promo-strip__decor--right {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .promo-strip--az {
        background-image: url("../../img/az-glow-mobile.svg");
    }

    /* колонка шириной с самую широкую кнопку — вторая растягивается до неё,
       как в макете (194px) */
    .promo-strip--az .promo-strip__buttons {
        flex-direction: column;
        align-items: stretch;
        width: max-content;
    }

    .promo-strip--az .promo-strip__photo {
        right: -64.08px;
        bottom: -8.5px;
        width: 260.077px;
        height: 130.038px;
    }

    .promo-strip--az .promo-strip__decor {
        top: 163px;
        right: -132.67px;
        width: 209.674px;
        height: 162.311px;
    }

    .promo-strip--offer .promo-strip__title,
    .promo-strip--ask .promo-strip__title,
    .promo-strip--news .promo-strip__title,
    .promo-strip--about .promo-strip__title,
    .promo-strip--doc .promo-strip__title,
    .promo-strip--calc .promo-strip__title {
        font-size: 28px;
        line-height: 1.1;
    }

    /* у полосы склада заголовок в мобильном макете мельче остальных — 20px */
    .promo-strip--warehouse .promo-strip__title {
        font-size: 20px;
    }

    /* в мобильном макете текст занимает всю ширину полосы */
    .promo-strip--doc .promo-strip__text {
        max-width: none;
    }

    .promo-strip--offer .promo-strip__buttons .btn,
    .promo-strip--ask .promo-strip__buttons .btn,
    .promo-strip--news .promo-strip__buttons .btn,
    .promo-strip--about .promo-strip__buttons .btn,
    .promo-strip--calc .promo-strip__buttons .btn {
        padding-left: 24px;
        padding-right: 24px;
    }
}