/* ==========================================================================
   Страница «Доставка и оплата» — три своих блока:

     .delivery       «Способы доставки» — шапка и три карточки
     .delivery-flow  «Как проходит отгрузка» — тёмная полоса с этапами
     .delivery-pay   «Оплата заказа» — текст, список условий и сноска

   Между ними стоят общие промо-полосы (promo-strip.css), заголовки —
   общий .section-head--sm из common.css.

   Figma: 279:12754 — «Способы доставки», десктоп 1320 × 418 (от y = 365)
          168:7213  — «Как проходит отгрузка», десктоп 1440 × 442
          175:2002  — «Оплата заказа», десктоп 1320 × 294
          281:13636 — «Способы доставки», мобильный 343 × 1224
          281:13749 — «Как проходит отгрузка», мобильный 375 × 1238
          281:13788 — «Оплата заказа», мобильный 343 × 611

   WP: template-parts/blocks/delivery-methods.php, delivery-flow.php,
       delivery-payment.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Способы доставки
   -------------------------------------------------------------------------- */

.delivery {
    /* 56px — отбивка от шапки страницы; снизу отбивку даёт промо-полоса */
    padding: 56px 0 0;
}

.delivery__head {
    display: flex;
    /* описание справа выровнено с заголовком по нижнему краю */
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.delivery__head .section-head {
    flex: 0 1 329px;
}

/* Описание отделено от заголовка вертикальной линией — она ровно
   по высоте текста, поэтому рисуется рамкой самого текста */
.delivery__desc {
    flex: 0 1 648px;
    padding-left: 24px;
    border-left: 1px solid var(--c-grey-300);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

.delivery__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

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

.delivery-card {
    position: relative;
    /* узор из ромбов выходит за правый край карточки */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* высота карточки в макете задана компонентом: у короткой карточки
       снизу остаётся пустое поле, длинные растягиваются по тексту */
    min-height: 332px;
    padding: 24px;
    background-color: var(--c-grey-200);
}

.delivery-card__decor {
    position: absolute;
    top: 0;
    /* узор шире карточки и обрезается её правым краем */
    right: -45.4px;
    width: 108.4px;
    height: 176px;
    max-width: none;
    pointer-events: none;
}

/* Значок и текст: высота этой части задана в макете, поэтому линия
   под ней стоит в трёх карточках на одном уровне */
.delivery-card__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 208px;
}

.delivery-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--c-red-500);
}

.delivery-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delivery-card__title {
    font-size: 20px;
    font-weight: 700;
    /* 23px из макета, а не «normal»: браузер округляет его до 24px, и тогда
       двухстрочный заголовок второй карточки не помещается в отведённые
       208px, а линия под ним съезжает относительно соседних карточек */
    line-height: 1.15;
    color: var(--c-grey-800);
}

.delivery-card__text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

/* Условие внизу карточки. Отбивка в макете отмерена от середины линии,
   поэтому сверху 16px до неё и 15px после */
.delivery-card__note {
    position: relative;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--c-grey-300);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-red-500);
}

/* --------------------------------------------------------------------------
   Как проходит отгрузка — тёмная полоса с фотографией
   -------------------------------------------------------------------------- */

.delivery-flow {
    position: relative;
    /* фотография свисает за верх и правый край блока */
    overflow: hidden;
    /* фотография наложена на фон в режиме «линейный осветлитель»:
       без изоляции она смешалась бы и с белым фоном страницы */
    isolation: isolate;
    padding: 56px 0;
    background-color: #1a1a1c;
    /* то же радиальное свечение, что и в блоке «Применение» на главной:
       в макете это одна и та же заливка с одинаковыми координатами */
    background-image: url("../../img/usage-glow.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Снимок обрезан мягкой рамкой — в макете маска размыта, поэтому края
   растворяются в фоне. Форма рамки лежит в отдельном SVG */
.delivery-flow__photo {
    position: absolute;
    top: -176px;
    right: var(--container-offset);
    width: 784px;
    height: 437px;
    max-width: none;
    mix-blend-mode: plus-lighter;
    -webkit-mask-image: url("../../img/delivery-truck-mask.svg");
    mask-image: url("../../img/delivery-truck-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
}

.delivery-flow__head {
    position: relative;
    z-index: 1;
    max-width: 509px;
}

/* На тёмном фоне метка светлее обычной */
.delivery-flow .section-head__label {
    color: #ff8e8e;
}

.delivery-flow .section-head__title {
    color: var(--c-white);
}

.delivery-flow .section-head__desc {
    /* 479px — ширина текста в макете, при ней описание ложится в две строки */
    max-width: 479px;
    color: var(--c-white);
    opacity: 0.6;
}

.delivery-flow__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Этап
   -------------------------------------------------------------------------- */

.flow-card {
    display: flex;
    flex-direction: column;
    /* номер прижат к верху карточки, подпись — к низу */
    justify-content: space-between;
    gap: 24px;
    /* высота ряда в макете зафиксирована */
    min-height: 184px;
    padding: 16px;
    background-color: #2f2f32;
}

/* Номер в макете набран контурами, а не шрифтом из набора,
   поэтому вынесен в картинку */
.flow-card__num {
    align-self: flex-start;
    flex-shrink: 0;
    width: auto;
    height: 40px;
}

.flow-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flow-card__title {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    overflow-wrap: break-word;
    color: var(--c-white);
}

.flow-card__text {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-white);
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Оплата заказа
   Слева заголовок и текст, справа список условий: он стоит в колонке
   на всю высоту блока, поэтому раскладка задана сеткой, а не флексом —
   в мобильном макете список идёт сразу за заголовком, перед текстом
   -------------------------------------------------------------------------- */

.delivery-pay {
    padding: 56px 0;
}

.delivery-pay__inner {
    display: grid;
    grid-template-columns: minmax(0, 648px) minmax(0, 424px);
    justify-content: space-between;
    row-gap: 24px;
}

.delivery-pay__head {
    grid-column: 1;
    grid-row: 1;
}

.delivery-pay__text {
    grid-column: 1;
    grid-row: 2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

/* Между абзацами в макете стоит пустая строка */
.delivery-pay__text p + p {
    margin-top: 22.4px;
}

.delivery-pay__terms {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* в макете колонка опущена на 6px относительно заголовка */
    margin-top: 6px;
}

.pay-term {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px 8px 8px;
    background-color: var(--c-grey-200);
}

.pay-term__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    /* в макете здесь чистый белый, а не токен White (#FBFBFB) */
    background-color: #ffffff;
}

.pay-term__text {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-grey-800);
}

/* Сноска под блоком */
.delivery-pay__note {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    /* 32px до сноски: 24px даёт сетка, 8px добавлены здесь */
    margin-top: 8px;
    padding: 12px 16px;
    background-color: var(--c-grey-200);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

.delivery-pay__note img {
    flex-shrink: 0;
}

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

@media (max-width: 1279px) {
    .delivery__head .section-head {
        flex: 0 1 auto;
    }

    .delivery-flow__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ниже 1024px раскладка становится мобильной: колонки встают друг
   под друга так же, как это нарисовано в мобильном макете */
@media (max-width: 1023px) {
    .delivery__head {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .delivery__desc {
        flex: 0 0 auto;
        padding-left: 0;
        border-left: 0;
    }

    .delivery__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .delivery-flow {
        /* фотография в мобильном макете лежит под карточками,
           её место освобождает нижнее поле блока */
        padding-bottom: 313px;
    }

    .delivery-flow__photo {
        top: auto;
        bottom: -26.8px;
        right: -13.3px;
        width: 642.1px;
        height: 357.8px;
        -webkit-mask-image: url("../../img/delivery-truck-mask-mobile.svg");
        mask-image: url("../../img/delivery-truck-mask-mobile.svg");
    }

    .delivery-flow__head {
        max-width: none;
    }

    .delivery-flow .section-head__desc {
        max-width: none;
    }

    .delivery-flow__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 24px;
    }

    .flow-card {
        gap: 16px;
        min-height: 162px;
    }

    .flow-card__num {
        height: 24px;
    }

    .delivery-pay__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .delivery-pay__head {
        grid-row: 1;
    }

    /* в мобильном макете список условий стоит между заголовком и текстом */
    .delivery-pay__terms {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }

    .delivery-pay__text {
        grid-row: 3;
    }

    /* сноска в мобильном макете занимает несколько строк,
       поэтому значок встаёт вровень с первой из них */
    .delivery-pay__note {
        grid-row: 4;
        align-items: flex-start;
        gap: 12px;
        margin-top: 0;
    }
}