/* ==========================================================================
   Страница «О компании»
   Четыре своих блока: шапка страницы с цифрами, история компании,
   партнёры и преимущества. Ниже идёт общая промо-полоса (promo-strip.css).

   Figma: 194:4730  — десктоп 1440 × 3232
          197:5033  — цифры, 648 × 106
          197:5209  — «История компании», 1440 × 400
          197:5216  — «Партнёры», 1440 × 714
          279:11568 — «Преимущества», 1440 × 684
          279:11300 — мобильный 375 × 4651

   WP: template-parts/blocks/about-*.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шапка страницы: слева заголовок и цифры, справа фотография
   -------------------------------------------------------------------------- */

.about-intro {
    /* 24px — отбивка от шапки сайта: крошки в макете стоят ровно на 128px */
    padding: 24px 0 56px;
}

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

/* Цифры прижаты к низу фотографии, поэтому колонка растянута по её высоте */
.about-intro__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    /* в макете текст начинается на 24px ниже верхнего края фотографии */
    padding-top: 24px;
}

/* заголовок здесь во всю колонку, общее ограничение в 645px мешает */
.about-intro__head {
    max-width: none;
}

.about-intro__head .section-head__desc {
    max-width: 632px;
}

.about-intro__media {
    position: relative;
    overflow: hidden;
}

/* Пропорция из макета: 648 × 432 и 343 × 229 — это одно и то же 3 : 2.
   Распорка, а не aspect-ratio: колонка тянется по высоте текста,
   и фотография должна тянуться вместе с ней, а не обрываться */
.about-intro__media::before {
    content: "";
    display: block;
    padding-top: 66.667%;
}

.about-intro__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Цифра с подписью
   Встречается на странице дважды: светлая в шапке и тёмная на фотографии
   в блоке «История компании»
   -------------------------------------------------------------------------- */

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Колонки равной ширины; линейка снизу — у каждой своя,
   поэтому колонки растянуты по самой высокой */
.stats .stat {
    flex: 1 0 0;
    min-width: 0;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-grey-300);
}

.stat__value {
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: var(--c-red-500);
}

/* единица измерения рядом с числом набрана мельче */
.stat__unit {
    font-size: 20px;
}

.stat__label {
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-500);
}

.stat--on-dark {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.stat--on-dark .stat__value {
    color: var(--c-red-400);
}

.stat--on-dark .stat__label {
    color: var(--c-white);
}

/* --------------------------------------------------------------------------
   История компании
   Фотография занимает левую колонку и уходит за край контейнера,
   поэтому сетка построена от края экрана, а не внутри .container
   -------------------------------------------------------------------------- */

.history {
    position: relative;
    display: grid;
    /* поле контейнера | фотография 648 | 25 | текст 647 | поле контейнера */
    grid-template-columns:
        calc(var(--container-offset) + var(--container-pad))
        minmax(0, 648fr)
        25px
        minmax(0, 647fr)
        calc(var(--container-offset) + var(--container-pad));
    background-color: var(--c-grey-200);
    /* до «Партнёров» в макете 56px фона страницы */
    margin-bottom: 56px;
}

.history__media {
    position: relative;
    grid-area: 1 / 1 / 2 / 3;
    overflow: hidden;
}

/* 708 × 400 в макете; распорка задаёт ряду минимальную высоту.
   Выше 1440px фотография уже не растёт: она выходит за контейнер,
   и её пропорция растянула бы блок вместе с промежутками в тексте */
.history__media::before {
    content: "";
    display: block;
    padding-top: min(56.497%, 400px);
}

/* затемнение фотографии из макета */
.history__media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.history__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Метка и цифра лежат поверх фотографии, но стоят по сетке контейнера,
   поэтому вынесены в отдельную ячейку и наложены на фотографию */
.history__over {
    position: relative;
    z-index: 1;
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 56px 0;
}

.history__stat {
    width: 424px;
    max-width: 100%;
}

.history__text {
    grid-area: 1 / 4 / 2 / 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    max-width: 632px;
    padding: 56px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-800);
}

.history__lead {
    font-size: 24px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Партнёры — «Проверенные производители»
   -------------------------------------------------------------------------- */

.producers {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background-color: #1a1a1c;
    /* радиальное свечение из макета: матричное преобразование градиента
       средствами CSS не выражается, поэтому вынесено в отдельный SVG */
    background-image: url("../../img/producers-glow.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Узор из ромбов в правом верхнем углу, повёрнут на 180°.
   В макете он шире экрана и обрезается секцией, поэтому общий
   max-width из base.css здесь снимается — иначе узор сжимался бы
   по ширине окна (заметно на мобильном: 463.69 → 375) */
.producers__pattern {
    position: absolute;
    top: -149px;
    right: calc(-26.06px + var(--container-offset));
    width: 782px;
    max-width: none;
    height: 382.827px;
    transform: rotate(180deg);
    pointer-events: none;
}

.producers__inner {
    position: relative;
    z-index: 1;
}

.producers__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

/* Ширины из макета: при них заголовок ложится в две строки,
   а описание — в три */
.producers__title {
    flex: 0 1 615px;
    min-width: 0;
}

/* на тёмном фоне метка светлее обычной — так же, как в блоке «Применение» */
.producers .section-head__label {
    color: #ff8e8e;
}

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

.producers__desc {
    flex: 0 1 648px;
    min-width: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-white);
    opacity: 0.6;
}

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

.producer-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* высота карточки в макете зафиксирована, но текст может быть длиннее */
    min-height: 212px;
    padding: 24px;
    background-color: #2f2f32;
}

/* Площадка под логотип: по правке заказчика логотипы приводим к фирменным
   цветам. Карточки тёмные, поэтому под каждый знак кладём светлую плашку
   (как в каталоге «Каталог по брендам»), чтобы цвет читался. Ширину задаёт
   сам логотип, высота плашки одинакова. */
.producer-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
    height: 60px;
    padding: 0 18px;
    background-color: var(--c-grey-200);
    border-radius: 8px;
}

.producer-card__logo img {
    max-height: 32px;
    width: auto;
}

/* Растровые логотипы лежат на белом фоне: режим darken сливает белое с
   плашкой Grey 200 и оставляет только сам знак — так же, как в каталоге. */
.producer-card__logo--blend img {
    mix-blend-mode: darken;
}

/* Квадратный знак (Tikkurila) — компактный, поэтому плашку делаем пошире, а
   сам знак (logo-stack из common.css) центрируем фиксированным квадратом,
   чтобы рядом с широкими логотипами он не казался мелким. */
.producer-card__logo--stack {
    min-width: 96px;
}

.producer-card__mark {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.producer-card__mark img {
    max-height: none;
    width: 100%;
    height: 100%;
}

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

/* --------------------------------------------------------------------------
   Преимущества — «Почему Финсервис»
   Фотография во всю ширину блока, поверх неё заголовок и карточки
   -------------------------------------------------------------------------- */

.advantages {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background-color: #1a1a1c;
}

.advantages__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* кадр из макета: снимок вписан по ширине и сдвинут вверх */
.advantages__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
}

/* затемнение сверху из макета */
.advantages__photo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(102, 102, 102, 0) 68.856%);
}

.advantages__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.advantages__head {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

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

.advantages__list {
    /* 648px — ширина двух карточек из макета; лишнее забирает заголовок */
    flex: 0 0 648px;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.advantage {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* две карточки в ряд: 312 + 24 + 312 = 648, как в макете */
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
    /* высота ряда в макете зафиксирована */
    min-height: 274px;
    padding: 16px;
    background-color: var(--c-grey-200);
}

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

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

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

.advantage__text {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--c-grey-800);
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Ниже 1200px карточки «Преимуществ» уже не помещаются рядом с заголовком:
   блок переключается на мобильную раскладку — полоса фотографии сверху,
   под ней лента карточек, наезжающая на её низ
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .advantages__inner {
        flex-direction: column;
        /* 269px до ленты + 274px карточка: лента ложится на низ фотографии
           ровно так же, как в мобильном макете */
        min-height: 543px;
    }

    .advantages__head,
    .advantages__list {
        flex: 0 0 auto;
        width: 100%;
    }

    .advantages__photo {
        bottom: auto;
        height: 368px;
    }

    /* снизу фотография растворяется в фоне блока */
    .advantages__photo::after {
        background-image:
            linear-gradient(0deg, #1a1a1c 0%, rgba(26, 26, 28, 0) 29.467%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(102, 102, 102, 0) 68.856%);
    }

    .advantages__list {
        /* лента листается пальцем и уходит за правое поле контейнера */
        margin-top: auto;
        margin-right: calc(-1 * var(--container-pad));
        padding-right: var(--container-pad);
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .advantages__list::-webkit-scrollbar {
        display: none;
    }

    .advantage {
        flex: 0 0 312px;
    }

    /* Три цифры в узкой колонке становятся слишком тесными */
    .stats .stat {
        flex: 0 0 calc(50% - 12px);
    }
}

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

@media (max-width: 1023px) {
    .about-intro {
        padding-top: 16px;
    }

    .about-intro__grid {
        margin-top: 16px;
    }

    /* Заголовок и описание уже не встают в строку рядом друг с другом */
    .producers__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* в колонке flex-basis задал бы высоту, а не ширину */
    .producers__title,
    .producers__desc {
        flex: 0 0 auto;
        width: 100%;
    }
}

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

@media (max-width: 767px) {
    .about-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /* фотография в мобильном макете стоит первой */
    .about-intro__media {
        order: -1;
    }

    .about-intro__body {
        padding-top: 0;
    }

    /* в этом блоке мобильный заголовок мельче общего H2 - mobile */
    .about-intro__head .section-head__title {
        font-size: 24px;
        line-height: normal;
    }

    .stats {
        gap: 16px 7px;
    }

    .stats .stat {
        /* два столбца: 168 + 7 + 168 = 343, как в макете */
        flex: 0 0 calc(50% - 3.5px);
    }

    /* в мобильном макете снимок шире экрана и прижат к левому краю */
    .advantages__photo {
        width: 206.667%;
    }

    .stat__label {
        font-size: 12px;
    }

    .history {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        /* на мобильном отбивка до «Партнёров» лежит внутри блока */
        margin-bottom: 0;
        padding-bottom: 56px;
    }

    .history__media {
        grid-area: 1 / 1 / 2 / 2;
    }

    .history__over {
        grid-area: 1 / 1 / 2 / 2;
        padding: 16px var(--container-pad);
    }

    .history__stat {
        width: 100%;
        padding-bottom: 8px;
    }

    .history__text {
        grid-area: 2 / 1 / 3 / 2;
        gap: 16px;
        max-width: none;
        padding: 0 var(--container-pad);
    }

    .history__lead {
        font-size: 20px;
    }

    /* Заголовки этих блоков в мобильном макете набраны без сжатия строки */
    .producers .section-head__title,
    .advantages .section-head__title {
        line-height: normal;
    }

    .advantages .section-head__title {
        font-size: 24px;
    }

    .producers {
        background-image: url("../../img/producers-glow-mobile.svg");
    }

    .producers__pattern {
        top: -75px;
        right: calc(-33.69px + var(--container-offset));
        width: 463.694px;
        height: 227px;
    }

    .producers__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 32px;
    }

    .producer-card {
        gap: 16px;
        padding: 16px;
    }

    .producer-card__logo {
        height: 56px;
    }

    .producer-card__logo--stack {
        width: 56px;
    }
}