/* =====================================================================
   zvk-hero.css — единый первый экран страниц (27.10.2026). Эталон — /stati (одобрен владельцем):
   крошки слева (breadcrumb.js, #breadcrumbsContainer), мятный надзаголовок с точкой, H1 слева
   с мятной подложкой-выделением как на главной (.highlight), подзаголовок слева,
   на фоне топографический узор .zvk-tex (assets/css/zvk-texture.css) и мятное свечение справа.

   Разметка:
     <section class="zvk-hero zvk-tex">            ← свой класс страницы можно оставить рядом
       <div class="container">                     ← контейнер страницы (ширину задаёт страница)
         <div id="breadcrumbsContainer"></div>
         <span class="zvk-hero__eyebrow">Раздел</span>
         <h1 class="zvk-hero__title">Заголовок <span class="highlight">акцент</span></h1>
         <p class="zvk-hero__lead">Подзаголовок</p>
         …кнопки, чипы, фото — как у страницы
       </div>
     </section>
   Модификаторы: .zvk-hero--split (текст + медиа справа — сетка задаёт страница), .zvk-hero--compact
   (документы, меньше отступы), .zvk-hero--dark (тёмный первый экран: + .zvk-tex--dark).
   Подключение: <link rel="stylesheet" href="/assets/css/zvk-hero.css?v=20261028"> после стилей страницы.
   ===================================================================== */

.zvk-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 22px 0 clamp(52px, 6vw, 84px);
    background-color: #fff;
    border-bottom: 1px solid #eef1f5;
}
/* мятное свечение справа (под контентом, над текстурой) */
.zvk-hero::after {
    content: ""; position: absolute; z-index: -1; right: -12%; top: -30%; width: 60%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(0, 229, 164, .16), rgba(0, 229, 164, 0) 62%);
    pointer-events: none;
}
.zvk-hero #breadcrumbsContainer { min-height: 32px; margin-bottom: clamp(18px, 2.4vw, 30px); }

.zvk-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
    color: #00B884; text-decoration: none;
}
.zvk-hero__eyebrow::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: #00E5A4; box-shadow: 0 0 0 4px rgba(0, 229, 164, .15);
}
a.zvk-hero__eyebrow:hover { color: #00805c; }

:root body .zvk-hero .zvk-hero__title,
:root body .zvk-hero h1.zvk-hero__title {
    margin: 0; color: #0a0a0a; text-align: left;
    text-wrap: balance; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
.zvk-hero__lead {
    margin: 22px 0 0; text-align: left; color: #3b4552;
}
/* акцент слов в H1 — как в H1 главной: мятная полоса 35 % */
.zvk-hero .highlight {
    background: linear-gradient(120deg, #00E5A4 0%, #00E5A4 100%); background-repeat: no-repeat;
    background-size: 100% 35%; background-position: 0 80%; padding: 0 6px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.zvk-hero--compact { padding-bottom: clamp(36px, 4.4vw, 56px); }


.zvk-hero--dark { background-color: #0a0a0a; border-bottom-color: rgba(255, 255, 255, .06); }
.zvk-hero--dark::after { background: radial-gradient(circle, rgba(0, 229, 164, .2), rgba(0, 229, 164, 0) 62%); }
:root body .zvk-hero--dark .zvk-hero__title { color: #fff; }
.zvk-hero--dark .zvk-hero__eyebrow { color: #00E5A4; }
.zvk-hero--dark .zvk-hero__lead { color: rgba(255, 255, 255, .72); }
.zvk-hero--dark .highlight { color: #0a0a0a; }

@media (max-width: 640px) {
    .zvk-hero { padding: 16px 0 44px; }
    .zvk-hero__lead { margin-top: 16px; }
}
@media print { .zvk-hero::after { display: none; } }