/* ==========================================================================
   Шапка внутренней страницы — общий блок
   Фото на всю ширину, поверх него хлебные крошки, H1 и описание.
   Такой же блок стоит на страницах «Новости», «Объекты», «Контакты»,
   поэтому он вынесен отдельно от стилей самих страниц.
   На каталоге к нему добавляется карточка «Инженерный подбор».

   Figma: 135:1587  — каталог, десктоп 1440 × 372 (от y = 40)
          274:4564  — каталог, мобильный 375 × 520
   ========================================================================== */

.page-hero {
    position: relative;
    overflow: hidden;
    /* 128px = верхняя строка шапки (40) + основная строка (64) + 24px отбивки,
       57px снизу — столько фото видно под карточкой в макете */
    padding: 128px 0 57px;
    color: var(--c-white);
}

/* Фото начинается не от нуля, а под верхней строкой шапки: она непрозрачная
   и в макете фото под неё не заходит */
.page-hero__bg {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение фотографии из макета.
   Есть не везде: на «Контактах» и «Доставке» снимок в макете стоит
   без него — там фотографии сами по себе достаточно тёмные */
.page-hero__bg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.page-hero__inner {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Заголовок и описание
   Ширина текста 760px и карточки 424px в сумме с полями контейнера дают
   ровно то расстояние между ними, что и в макете
   -------------------------------------------------------------------------- */

.page-hero__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
}

.page-hero__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 760px;
    /* в макете текст начинается чуть ниже карточки */
    padding-top: 19px;
}

/* Метка над заголовком — «{ Практика применения }» на «Объектах».
   Те же значения, что и у метки блока на главной, но там она элемент
   .section-head, а здесь — часть шапки страницы */
.page-hero__label {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    color: var(--c-red-400);
}

.page-hero__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-white);
}

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

/* --------------------------------------------------------------------------
   Карточка «Инженерный подбор»
   -------------------------------------------------------------------------- */

.page-hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
    width: 424px;
    padding: 24px;
    overflow: hidden;
    background-color: #ffffff;
}

.page-hero__card-pattern {
    position: absolute;
    top: -85px;
    right: -43px;
    width: 161px;
    height: 261.384px;
    pointer-events: none;
}

.page-hero__card-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

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

.page-hero__card-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-grey-500);
}

.page-hero__card-btn {
    position: relative;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Вариант для подраздела каталога: карточки нет, заголовок мельче,
   а сам блок ниже — 222px вместо 372px
   Figma: 137:2344 — десктоп 1440 × 222 (от y = 40)
          275:5039 — мобильный 375 × 231
   -------------------------------------------------------------------------- */

.page-hero--sub {
    padding-bottom: 17px;
}

.page-hero--sub .page-hero__text {
    /* карточки справа нет, поэтому и подгонки по её верху не нужно */
    padding-top: 0;
    max-width: 645px;
}

.page-hero--sub .page-hero__desc,
.page-hero--news .page-hero__desc,
.page-hero--cert .page-hero__desc,
.page-hero--contacts .page-hero__desc,
.page-hero--delivery .page-hero__desc {
    font-size: 14px;
}

.page-hero--sub .page-hero__title {
    font-size: 32px;
    line-height: normal;
}

.page-hero--sub .page-hero__desc {
    max-width: 566px;
}

/* --------------------------------------------------------------------------
   Вариант для «Новостей»: карточки нет, заголовок общий (48px),
   описание — мелкое, как в подразделе каталога
   Figma: 144:4670  — десктоп 1440 × 269 (от y = 40)
          279:11735 — мобильный 375 × 209
   -------------------------------------------------------------------------- */

.page-hero--news,
.page-hero--cert,
.page-hero--contacts,
.page-hero--delivery {
    padding-bottom: 56px;
}

.page-hero--news .page-hero__text,
.page-hero--cert .page-hero__text,
.page-hero--contacts .page-hero__text,
.page-hero--delivery .page-hero__text {
    padding-top: 0;
    max-width: 645px;
}

/* В макете описание уже колонки текста — так делится на две строки, —
   и набрано с обычным межстрочным интервалом, а не с 1.4 */
.page-hero--news .page-hero__desc,
.page-hero--cert .page-hero__desc,
.page-hero--contacts .page-hero__desc,
.page-hero--delivery .page-hero__desc {
    line-height: normal;
}

.page-hero--news .page-hero__desc {
    max-width: 447px;
}

/* Кадр из макета: снимок вписан по ширине, в полосу попадает его низ */
.page-hero--news .page-hero__bg img {
    object-position: center 79.3%;
}

/* --------------------------------------------------------------------------
   Вариант для «Сертификатов»: геометрия та же, что у «Новостей»,
   отличаются только фотография и ширина описания
   Figma: 145:5730  — десктоп 1440 × 269 (от y = 40)
          279:12531 — мобильный 375 × 209
   -------------------------------------------------------------------------- */

.page-hero--cert .page-hero__desc {
    max-width: 489px;
}

/* Кадр здесь свой: снимок так же вписан по ширине, но взят ниже */
.page-hero--cert .page-hero__bg img {
    object-position: center 77.5%;
}

/* --------------------------------------------------------------------------
   Вариант для «Контактов»: та же геометрия, что у «Новостей»,
   отличается фотография и ширина описания — оно длиннее и в мобильном
   макете занимает четыре строки, отчего шапка там выше (231px)
   Figma: 158:6223  — десктоп 1440 × 269 (от y = 40)
          281:13076 — мобильный 375 × 231
   -------------------------------------------------------------------------- */

.page-hero--contacts .page-hero__desc {
    max-width: 511px;
}

/* В макете этой страницы затемнения над фотографией нет */
.page-hero--contacts .page-hero__bg::after {
    content: none;
}

/* Кадр из макета: снимок вписан по ширине с небольшим увеличением,
   поэтому рамка задана процентами от блока */
.page-hero--contacts .page-hero__bg img {
    position: absolute;
    /* Заказчик попросил поднять конверт выше на тёмном фоне (было -161.33%) */
    top: -184%;
    left: 0;
    width: 114.444%;
    height: 297.471%;
    max-width: none;
    object-position: center;
}

/* --------------------------------------------------------------------------
   Вариант для «Доставки и оплаты»: та же геометрия, что у «Новостей».
   Описание здесь длиннее и занимает три строки, поэтому поле снизу
   меньше — высота полосы в макете осталась прежней, 269px
   Figma: 168:6778  — десктоп 1440 × 269 (от y = 40)
          281:13399 — мобильный 375 × 275
   -------------------------------------------------------------------------- */

.page-hero--delivery {
    padding-bottom: 40px;
}

.page-hero--delivery .page-hero__desc {
    max-width: 625px;
}

/* Затемнения над фотографией в макете этой страницы тоже нет */
.page-hero--delivery .page-hero__bg::after {
    content: none;
}

/* Кадр из макета: снимок вписан по ширине, в полосу попадает его низ */
.page-hero--delivery .page-hero__bg img {
    object-position: center 75.5%;
}

/* --------------------------------------------------------------------------
   Вариант для «Объектов»: карточки справа нет, зато над заголовком метка
   Figma: 177:2034  — десктоп 1440 × 305 (от y = 40)
          278:10256 — мобильный 375 × 286
   -------------------------------------------------------------------------- */

.page-hero--objects {
    padding-bottom: 55px;
}

/* Фотография та же, что на каталоге, но кадр в макете взят ниже:
   в полосу попадают веер и стопка образцов, а не только тёмный фон */
.page-hero--objects .page-hero__bg img {
    object-position: center 65%;
}

/* 835px — ширина заголовка в макете: в 760px колонки он бы переносился
   на вторую строку, а в макете стоит в одну */
.page-hero--objects .page-hero__text {
    padding-top: 0;
    max-width: 835px;
}

/* в макете описание уже колонки текста — так делится на две строки */
.page-hero--objects .page-hero__desc {
    max-width: 694px;
}

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

@media (max-width: 1279px) {
    .page-hero__title {
        font-size: 40px;
    }

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

/* Ниже 1024px карточка уже не помещается рядом с текстом */
@media (max-width: 1023px) {
    .page-hero {
        /* шапка здесь в потоке страницы, поэтому сверху только отбивка макета */
        padding-top: 16px;
    }

    .page-hero__bg {
        top: 0;
    }

    .page-hero__body {
        flex-direction: column;
        gap: 40px;
        margin-top: 16px;
    }

    .page-hero__text {
        padding-top: 0;
    }

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

    /* в мобильном макете поле снизу такое же, как у остальных страниц */
    .page-hero--delivery {
        padding-bottom: 56px;
    }
}

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

@media (max-width: 767px) {
    .page-hero__title {
        font-size: 28px;
    }

    .page-hero__card {
        gap: 16px;
        max-width: none;
        padding: 16px;
    }

    .page-hero__card-title {
        font-size: 20px;
    }
}

/* Подраздел каталога: на мобильном заголовок и описание крупнее,
   чем на десктопе — по токенам «H2 - mobile» и Body 1 */
@media (max-width: 767px) {
    /* 56px — столько фотографии видно под текстом в мобильном макете */
    .page-hero--sub {
        padding-bottom: 56px;
    }

    .page-hero--sub .page-hero__title {
        font-size: 28px;
        line-height: 1.1;
    }

    .page-hero--sub .page-hero__desc,
    .page-hero--news .page-hero__desc,
    .page-hero--cert .page-hero__desc,
    .page-hero--contacts .page-hero__desc,
    .page-hero--delivery .page-hero__desc {
        max-width: none;
        font-size: 16px;
    }

    /* в мобильном макете интервал обычный для всех страниц */
    .page-hero--news .page-hero__desc,
    .page-hero--cert .page-hero__desc,
    .page-hero--contacts .page-hero__desc,
    .page-hero--delivery .page-hero__desc {
        line-height: 1.4;
    }
}

/* «Новости»: в мобильном макете кадр взят крупнее и правее, чем влезает
   по object-fit: cover, поэтому рамка задана процентами от блока */
@media (max-width: 767px) {
    .page-hero--news .page-hero__bg img {
        position: absolute;
        top: 0;
        left: -20.81%;
        width: 126.4%;
        height: 110.05%;
        max-width: none;
        object-position: center;
    }
}

/* «Сертификаты»: то же самое — в мобильном макете кадр взят крупнее
   и правее, чем влезает по object-fit: cover */
@media (max-width: 767px) {
    .page-hero--cert .page-hero__bg img {
        position: absolute;
        top: -62.02%;
        left: -96.08%;
        width: 221.98%;
        height: 190.82%;
        max-width: none;
        object-position: center;
    }
}

/* «Контакты»: в мобильном макете кадр другой — крупнее и правее */
@media (max-width: 767px) {
    .page-hero--contacts .page-hero__bg img {
        top: -9.91%;
        left: -20.435%;
        width: 152.092%;
        height: 119.891%;
    }
}

/* «Объекты»: на мобильном описание во всю ширину, поле снизу то же */
@media (max-width: 767px) {
    .page-hero--objects .page-hero__desc {
        max-width: none;
    }

    /* Кадр в мобильном макете взят крупнее и правее, чем влезает
       по object-fit: cover, поэтому рамка задана процентами от блока —
       так же, как кадрирование широкой карточки новостей */
    .page-hero--objects .page-hero__bg img {
        position: absolute;
        top: -32.02%;
        left: -45.55%;
        width: 186.48%;
        height: 164.04%;
        max-width: none;
        object-position: center;
    }
}