/*
 * Многоуровневые хлебные крошки (.breadcrumbs) для hub-страниц раздела «Компания»
 *
 * Для чего: CSS для классов, которых НЕТ в компилированном бандле без
 *           scope-атрибута [data-v-9aa13783] (Vue-компонент Breadcrumbs)
 * Зачем: Используется в company-hero, events-hero, event-detail-hero,
 *        partnership-hero, support-hero и их детальных подстраницах
 */

.section-hero-block,
.support-detail-body-block,
.content-sections-body-block,
.product-feature-detail-block {
    padding-top: 74px;
}

/* .page__header-banner--split задаёt padding-top:15px!important (см. ниже) — рассчитан
   на section-hero.php, где режим --split сейчас используется только на «О компании»
   БЕЗ заполненных крошек (это top-level хаб, sh_breadcrumbs пусто). У product-feature-
   detail крошки ВСЕГДА заполнены (родитель → хаб → текущая страница) — 74px (снаружи)
   + 15px (внутри) оказывается недостаточно, крошки утыкаются под фикс-хедер и
   визуально пропадают (z-index хедера 1100 перекрывает их). Увеличиваем внутренний
   отступ именно для этого блока до 48px — то же значение, что в оригинальном Vue-
   бандле для hero с крошками (.page__header-hero:has(.breadcrumbs){padding-top:48px},
   scoped-правило, которое к нашей неVue-разметке не применяется само по себе) */
.product-feature-detail-block .page__header-banner--split {
    padding-top: 48px !important;
}

/* .page__header{display:flex;justify-content:center} (itv-compiled.css) центрирует
   .page__header-hero целиком — в section-hero.php это не заметно, т.к. крошки там
   лежат ВНУТРИ .page__header-banner, а он уже растянут на всю ширину и даёт свой
   padding:75px по бокам (см. комментарий ниже). У support-detail-body и
   content-sections-body баннера нет: .page__header-hero — flex-item без
   собственной width, поэтому сжимается по контенту (flex-basis:auto) и
   центрируется как узкая колонка вместе со своим содержимым. Заворачивание
   крошек в <div class="container"> (в PHP-шаблоне блока) само по себе не
   помогает, пока .page__header-hero не растянут на всю ширину — иначе
   .container внутри тоже сжимается вслед за родителем. width:100% здесь
   заставляет flex-item занять всю строку, тогда .container внутри уже
   центрируется/выравнивается корректно и совпадает с H1/секциями текста */
.support-detail-body-block .page__header-hero,
.content-sections-body-block .page__header-hero {
    width: 100%;
}
/* product-feature-detail-block сюда не входит: у него крошки лежат ВНУТРИ
   .page__header-banner (режим --split, как у section-hero.php), а не напрямую
   в .page__header-hero — этот фикс ему не нужен */

/* Крошки — первый элемент ВНУТРИ .page__header-banner (см. blocks/section-hero.php),
   лежат на фоне баннера, а не в отдельной белой полосе над ним. Родитель
   .page__header-banner уже даёт padding:75px по бокам — здесь горизонтальный
   padding убираем (иначе двойной отступ), оставляем отступ снизу, чтобы
   крошки не липли к заголовку */
.breadcrumbs {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 24px;
}

.breadcrumbs__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.breadcrumbs__item {
    color: #4c565f;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

a.breadcrumbs__item:hover {
    text-decoration: underline;
}

.breadcrumbs__item--current {
    cursor: default;
    text-decoration: none;
}

.breadcrumbs__separator_wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.breadcrumbs__separator {
    width: 8px;
    height: 14px;
    color: #4c565f;
}

@media (max-width: 1023px) {
    .breadcrumbs {
        margin-bottom: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION-HERO — раздельный фон + иллюстрация (поле sh_illustration_image)
   Для чего: Опциональный режим блока section-hero — вместо одной склеенной
             фоновой картинки (sh_bg_image) можно задать отдельную иллюстрацию
             (sh_illustration_image), прижатую к правому краю на всю высоту
   Зачем: sh_bg_image в этом режиме становится просто заливкой фона (обычно
          растянутый кроп реального фото/паттерна), а иллюстрация с
          прозрачностью накладывается сверху независимым слоем — упрощает
          переиспользование фона и замену/анимацию иллюстрации отдельно
   Как: класс .page__header-banner--split добавляется в section-hero.php
        автоматически, ТОЛЬКО если sh_illustration_image заполнено — на
        остальных страницах (Мероприятия/Партнёрство/Поддержка и т.д.)
        поведение блока не меняется
   ══════════════════════════════════════════════════════════════════════════ */

.page__header-banner--split {
    /* .page__header-banner уже имеет border-radius:20px в бандле —
       overflow:hidden обрезает абсолютно спозиционированную иллюстрацию
       точно по этому скруглению, position:relative — точка отсчёта для неё */
    position: relative;
    overflow: hidden;
    /* Бандл задаёт padding-top:75px (базовый) / 10px / 15px в разных медиа-
       запросах — здесь верхний паддинг капаем на 15px на ВСЕХ брейкпоинтах,
       !important нужен, чтобы перебить более специфичные медиа-правила бандла */
    padding-top: 15px !important;
}


/* Текст занимает свою половину, не наезжая на иллюстрацию справа —
   та вне потока (position:absolute), поэтому ширину текстовой колонки
   задаём явно, а не через flex у соседа.
   position:relative + z-index:1 — явно поднимаем текст/кнопки НАД
   иллюстрацией: у position:absolute элементов z-index:auto по умолчанию
   и без этого правила они красились бы поверх обычного (static) контента
   независимо от порядка в DOM (см. правила стекинг-контекста CSS 2.1) */
.page__header-banner--split .page__header-banner__main {
    max-width: 50%;
    position: relative;
    z-index: 1;
}

/*
 * Иллюстрация растянута на всю высоту и ширину правой половины БЕЗ отступов
 * padding родителя (.page__header-banner: padding:75px и медиа-варианты) —
 * position:absolute считает inset от padding-box родителя, а не от
 * content-box, поэтому padding здесь автоматически игнорируется.
 * height:100% берётся от ФАКТИЧЕСКОЙ высоты баннера (задаётся текстом
 * и min-height:420px из бандла) — сама иллюстрация эту высоту не задаёт.
 */
.page__header-banner__icon--split {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 55%;
    object-fit: cover;
    object-position: top;
}

/* У product-feature-detail иллюстрация — квадратная иконка-пиктограмма (720×720,
   например «лупа»), а не широкое 3D-фото товара как у «О компании»/«Решения»
   (те заведомо шире, чем высота баннера, — object-fit:cover обрезает их по бокам
   без потери сути картинки). Квадратную иконку object-fit:cover в узкой высокой
   колонке обрезает так, что видна только часть — переключаем на contain, чтобы
   иконка была видна целиком */
.product-feature-detail-block .page__header-banner__icon--split {
    object-fit: contain;
    object-position: right;
}

@media (max-width: 1023px) {
    .page__header-banner--split .page__header-banner__main {
        max-width: 100%;
    }

    .page__header-banner__icon--split {
        position: static;
        width: 100%;
        height: 220px;
        margin-top: 24px;
    }
}