/* ZIPTEH — страница «Новости и статьи».
   Все правила изолированы корнем #ztNewsHub. */

#ztNewsHub {
    --znh-ink: var(--zt-ink, #333a43);
    --znh-muted: var(--zt-ink-soft, #6b7480);
    --znh-meta: var(--zt-ink-muted, #929aa1);
    --znh-line: #e3e5e5;
    --znh-panel: #ffffff;
    --znh-soft: #f5f6f8;
    /* 07.09.2026: единственный жёлтый страницы — тот же, что у кнопки
       «Каталог» в шапке (`header-new.css:97`: `--zt-header-accent`).
       Светлый оттенок `--znh-brand-light` (#ffc928) и градиенты сняты:
       заказчик потребовал один жёлтый на всю страницу. */
    --znh-brand: var(--zt-header-accent, var(--zt-yellow, #ffb800));
    --znh-radius: var(--zt-radius-card, 12px);
    --znh-shadow: var(--zt-shadow-2, 0 8px 24px rgba(29, 34, 40, 0.06));
    position: relative;
    width: 100%;
    margin: 0;
    padding: 34px 0 58px;
    overflow: clip;
    color: var(--znh-ink);
    background: #fff;
    font-family: var(--zt-font, "Inter", Arial, sans-serif);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

#ztNewsHub,
#ztNewsHub * {
    box-sizing: border-box;
}

/* 07.09.2026, для боя: на странице раздела шаблон сайта рисует свой
   заголовок «Новости» (`.zt-page-heading--content`), а модуль — свой
   «Новости и статьи ZIPTEH». Два H1 на странице не нужны, поэтому
   заголовок шаблона гасится ровно там, где отрисовался модуль.
   На детальных страницах `/news/<код>/` модуля нет и заголовок
   остаётся на месте. Тот же приём применён на вакансиях. */
body:has(#ztNewsHub) .zt-page-heading--content {
    display: none !important;
}

/* Ответ формы подписки. Успех показывается только после реальной
   записи адреса — модуль не рисует «спасибо», если подписка
   не сработала, поэтому состояний два и они выглядят по-разному. */
#ztNewsHub .znh-subscribe output:empty {
    display: none;
}

#ztNewsHub .znh-subscribe output {
    display: block;
    margin-top: 8px;
    font: 700 11px/1.35 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
}

#ztNewsHub .znh-output--ok {
    color: #1d2228;
}

#ztNewsHub .znh-output--error {
    color: #8f2a2a;
}

#ztNewsHub [hidden] {
    display: none !important;
}

#ztNewsHub .znh-topic-grid a,
#ztNewsHub .znh-badges span,
#ztNewsHub .znh-text-action,
#ztNewsHub .znh-pagination__button,
#ztNewsHub .znh-pagination__more {
    font-family: var(--zt-font-btn, "Manrope", "Inter", Arial, sans-serif) !important;
}

/* Кнопки «Читать далее» и «Подписаться» переведены на гарнитуру шапки
   (Tektur, `--zt-font`) — ту же, что у «Каталога» и «Заказать запчасти».
   `!important` здесь по той же причине, что и у соседей: легаси-CSS
   боевого домена красит `a` и `button` по имени тега.

   У «Подписаться» гарнитуру пришлось вешать на `span` внутри кнопки:
   правило боевого домена держит именно тег `button` и не уступает даже
   селектору с двумя идентификаторами и `!important` (проверено —
   `#ztNewsHub #znh-email ~ button` проигрывает). На `span` легаси
   не распространяется. Тот же обход применён в карточке товара
   (`.zt-product-card__cart-label`). */
#ztNewsHub .znh-hero-content > a,
#ztNewsHub .znh-card a,
#ztNewsHub .znh-form-row button span {
    font-family: var(--zt-font, "Tektur", "Inter", Arial, sans-serif) !important;
}

#ztNewsHub .znh-shell {
    width: 100%;
    max-width: calc(var(--container-max, 1992px) + 2 * var(--page-gutter, 28px));
    margin: 0 auto;
    padding-right: var(--page-gutter, var(--zt-site-shell-gutter, 28px));
    padding-left: var(--page-gutter, var(--zt-site-shell-gutter, 28px));
}

/* 07.09.2026, по замеру боя. На странице раздела модуль лежит внутри
   `.container` шаблона, а у того уже есть боковые поля. Свои поля
   оболочки складывались с ними, и модуль оказывался уже шапки на 28 px
   с каждой стороны: заголовок начинался с 56 px против 28 у логотипа
   и хлебных крошек.

   Внутри контейнера поля и ограничение ширины снимаются — ширину задаёт
   сам контейнер, тот же, что у шапки. Поэтому модуль повторяет её поля
   автоматически на любой ширине (замер после правки: 1920 → 28, 1440 → 20,
   1024 → 20, 390 → 14 — везде вровень с логотипом и крошками).

   Вес селектора выше базового (1-2-0 против 1-1-0), порядок правил роли
   не играет. На стенде модуль лежит без контейнера, там правило
   не срабатывает и оболочка держит поля сама. */
.container #ztNewsHub .znh-shell {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* Вид крошек приведён к эталону страницы «Сертификаты» (01.09.2026):
   кегль 13 px, приглушённый серый, разделитель светлее, текущий темнее. */
/* Одна строка на любой ширине (03.09.2026): перенос запрещён,
   заголовок материала в последнем пункте сворачивается многоточием. */
#ztNewsHub .znh-breadcrumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 0 14px;
    overflow: hidden;
    color: #909090;
    font: 400 var(--zt-crumbs-font, clamp(11px, 0.55vw + 8.5px, 13px))/1.3 var(--zt-font, "Inter", Arial, sans-serif);
}

/* reset.css правилом `* { font-size: 16px }` перебивает наследование
   от <nav>, поэтому кегль задаём и вложенным элементам. */
#ztNewsHub .znh-breadcrumbs * {
    font-size: var(--zt-crumbs-font, clamp(11px, 0.55vw + 8.5px, 13px));
}

#ztNewsHub .znh-breadcrumbs > a,
#ztNewsHub .znh-breadcrumbs > span:not([aria-current]) {
    flex: none;
    white-space: nowrap;
}

#ztNewsHub .znh-breadcrumbs > [aria-current="page"] {
    flex: 0 1 auto;
    min-width: 4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ztNewsHub .znh-breadcrumbs > span:not([aria-current]) {
    color: #e3e5e5;
}

#ztNewsHub .znh-breadcrumbs [aria-current="page"] {
    color: #555f69;
}

#ztNewsHub .znh-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

#ztNewsHub .znh-breadcrumbs a:hover,
#ztNewsHub .znh-breadcrumbs a:focus-visible {
    color: var(--znh-brand);
}

#ztNewsHub .znh-page-head {
    margin: 25px 0 30px;
}

/* 07.09.2026: бренд в заголовке выделен жёлтым — тем же приёмом, что
   «для спецтехники» в H1 каталога (`catalog-grid.css`, `.poisk-results__title-accent`).
   Отдельный узел нужен потому, что покрасить часть текстового узла нечем. */
#ztNewsHub .znh-page-head h1 .znh-accent {
    /* Легаси-CSS боевого домена задаёт `span` свои 16 px Tektur: без
       наследования бренд выпадал из заголовка мелкой строчкой. `font:
       inherit` возвращает кегль, но гарнитуру легаси удерживает —
       её приходится наследовать отдельно с `!important`, иначе «ZIPTEH»
       набирается Tektur вместо Russo One заголовка. */
    font: inherit;
    font-family: inherit !important;
    letter-spacing: inherit;
    color: var(--znh-brand);
}

#ztNewsHub .znh-page-head h1 {
    margin: 0 0 14px;
    color: var(--znh-ink);
    font: 400 clamp(34px, 2.45vw, 42px)/1.04 var(--zt-font-head, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

#ztNewsHub .znh-page-head p {
    max-width: 920px;
    margin: 0;
    color: var(--znh-muted);
    font: 500 15px/1.55 var(--zt-font, "Inter", Arial, sans-serif);
}

/* 07.09.2026: `align-items: start` снят намеренно. Правая колонка должна
   тянуться на всю высоту ряда, иначе прилипшему блоку «Остались вопросы?»
   некуда ехать: ход sticky ограничен родительским боксом. */
#ztNewsHub .znh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
}

#ztNewsHub .znh-main {
    min-width: 0;
}

/* Колонка сделана flex, а не grid: у элемента grid-раскладки содержащий
   блок — его собственная ячейка, и `position: sticky` внутри неё никуда
   не едет. У flex-элемента содержащий блок — вся колонка. */
#ztNewsHub .znh-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 20px;
}

#ztNewsHub .znh-panel {
    padding: 22px;
    border: 1px solid var(--znh-line);
    border-radius: var(--znh-radius);
    background: var(--znh-panel);
    box-shadow: var(--znh-shadow);
}

#ztNewsHub .znh-panel h2,
#ztNewsHub .znh-subscribe h2 {
    margin: 0;
    color: var(--znh-ink);
    font: 400 18px/1.2 var(--zt-font-head, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: 0;
    text-transform: uppercase;
}

#ztNewsHub .znh-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
}

/* 07.09.2026: кнопки тем приведены к виду плашки «О компании
   «ЗИПТЕХ СЕРВИС»» с главной (`company-map.css:47`, модуль принят
   заказчиком и здесь не трогается — значения только скопированы):
   прозрачный фон, жёлтая рамка 1 px, скругление 8, иконка 17 px,
   подпись капсом Manrope 700 12/0.08em. Плашка на главной набрана
   жёлтым по белому — это 1,9:1 при норме 4,5:1; для декоративной
   надписи это терпимо, для шести ссылок навигации нет, поэтому
   подпись оставлена тёмной (#333a43), а фирменный жёлтый держат
   рамка и иконка. Так же читается и присланный скрин. */
#ztNewsHub .znh-topic-grid a {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--znh-brand);
    border-radius: 8px;
    color: var(--znh-ink);
    background: transparent;
    font: 700 12px/1.2 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#ztNewsHub .znh-topic-grid a:hover,
#ztNewsHub .znh-topic-grid a.is-active,
#ztNewsHub .znh-topic-grid a:focus-visible {
    border-color: var(--znh-brand);
    /* Кремовая подложка выведена из того же жёлтого, а не задана
       отдельным цветом: 6 % #FFB800 поверх белого. */
    background: rgba(255, 184, 0, 0.06);
}

#ztNewsHub .znh-topic-grid a:hover {
    transform: translateY(-1px);
}

#ztNewsHub .znh-topic-grid a:focus-visible,
#ztNewsHub button:focus-visible,
#ztNewsHub input:focus-visible,
#ztNewsHub .znh-hero a:focus-visible,
#ztNewsHub .znh-card a:focus-visible,
#ztNewsHub .znh-useful a:focus-visible {
    outline: 3px solid rgba(255, 184, 0, 0.35);
    outline-offset: 2px;
}

#ztNewsHub .znh-topic-grid img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

#ztNewsHub .znh-topic-grid b {
    color: var(--znh-brand);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
}

#ztNewsHub .znh-hero {
    position: relative;
    min-height: 370px;
    overflow: hidden;
    border-radius: var(--znh-radius);
    background: #19202a;
}

#ztNewsHub .znh-hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    background-image: linear-gradient(90deg, rgba(18, 24, 32, 0.96) 0%, rgba(18, 24, 32, 0.76) 42%, rgba(18, 24, 32, 0.08) 78%), var(--hero);
    background-position: center;
    background-size: cover;
    transition: opacity 260ms ease, visibility 260ms ease;
}

#ztNewsHub .znh-hero-slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
}

#ztNewsHub .znh-hero-content {
    width: min(52%, 440px);
    padding: 24px 24px 68px;
    color: #fff;
}

#ztNewsHub .znh-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 17px;
}

#ztNewsHub .znh-badges span {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 6px;
    font: 800 10px/1 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    text-transform: uppercase;
}

#ztNewsHub .znh-badges span:first-child {
    border-color: var(--znh-brand);
    color: var(--znh-ink);
    background: var(--znh-brand);
}

/* 07.09.2026: категория в герое приведена к меткам карточек — жёлтая рамка,
   жёлтая подпись, иконка темы. Отличается только масштабом: в герое кегль
   и поля крупнее, чтобы бейдж не потерялся рядом с «Главной новостью».
   Полупрозрачная белая рамка снята — на снимках со светлым верхом
   она пропадала. */
#ztNewsHub .znh-badges .znh-tag--hero {
    display: inline-block;
    padding: 8px 11px;
    border: 1px solid var(--znh-brand);
    border-radius: 6px;
    color: var(--znh-brand);
    font: 800 10px/1 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: .04em;
}

#ztNewsHub .znh-badges .znh-tag--hero img {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    object-fit: contain;
    vertical-align: -3px;
}

#ztNewsHub .znh-hero time {
    color: #d5d8dd;
    font-size: 13px;
}

#ztNewsHub .znh-hero h2 {
    max-width: 590px;
    margin: 16px 0;
    color: #fff;
    font: 400 clamp(24px, 1.8vw, 27px)/1.16 var(--zt-font-head, var(--zt-font, "Inter", Arial, sans-serif));
}

#ztNewsHub .znh-hero p {
    max-width: 500px;
    margin: 0 0 27px;
    color: #e3e6ea;
    font-size: 13px;
    line-height: 1.55;
}

/* 07.09.2026: кнопка «Читать далее» уведена к правому краю героя —
   на одну линию со стрелками и точками, которые прижаты слева.
   Содержащий блок — `.znh-hero-slide` (`inset: 0`), поэтому правый край
   кнопки совпадает с правым краем героя. Низ 20 px против 21 px у
   стрелок: высоты 46 и 44 px, так центры кнопок сходятся. */
/* 07.09.2026: подписи кнопок набраны как в шапке — Tektur 700 капсом
   (`--zt-font`, у кнопок «Каталог» и «Заказать запчасти» гарнитура именно
   она, а не Manrope из `--zt-font-btn`). Стрелки сняты по указанию
   заказчика: у кнопки с заливкой направление и так читается. */
#ztNewsHub .znh-hero-content > a {
    position: absolute;
    z-index: 3;
    right: 24px;
    bottom: 20px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: var(--zt-radius-btn, 8px);
    color: #212733;
    background: var(--znh-brand);
    font: 700 13px/1 var(--zt-font, "Tektur", "Inter", Arial, sans-serif);
    letter-spacing: .012em;
    text-transform: uppercase;
    text-decoration: none;
}

#ztNewsHub .znh-hero-content > a img {
    width: 18px;
    height: 18px;
}

/* 07.09.2026: стрелки убраны по указанию заказчика, правило под них снято
   вместе с отступами, которые их обслуживали. Осталась одна полоса
   индикатора, прижатая влево — справа на той же линии стоит «Читать далее».
   Высота кнопок оставлена 44 px, чтобы центр полосы совпал с центром
   кнопки (обе на 43 px от низа героя) и цель нажатия не съёжилась
   до 4 px. */
#ztNewsHub .znh-hero-controls {
    position: absolute;
    z-index: 3;
    left: 24px;
    bottom: 21px;
    display: flex;
    align-items: center;
}

#ztNewsHub .znh-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

#ztNewsHub .znh-dots button {
    width: 28px;
    height: 44px;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Полоски повторяют баннер главной (`glavnaya.html:1166`): 28 × 4,
   скруглённые до капсулы, белые с прозрачностью 0.9; активная —
   фирменный жёлтый. Промежуток 8 px — как margin 0 4px у Swiper. */
#ztNewsHub .znh-dots button::after {
    width: 28px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    content: "";
    transform: translate(-50%, -50%);
}

#ztNewsHub .znh-dots button.is-active::after {
    background: var(--znh-brand);
}

#ztNewsHub .znh-news {
    margin-top: 26px;
}

#ztNewsHub .znh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

#ztNewsHub .znh-section-head h2 {
    margin: 0;
    color: var(--znh-ink);
    font: 400 26px/1.16 var(--zt-font-head, var(--zt-font, "Inter", Arial, sans-serif));
    text-transform: uppercase;
}

#ztNewsHub .znh-text-action {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    color: var(--znh-ink);
    background: transparent;
    font: 700 13px/1.2 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    text-decoration: none;
    cursor: pointer;
}

#ztNewsHub .znh-text-action span,
#ztNewsHub .znh-card a span,
#ztNewsHub .znh-side-more span {
    margin-left: 8px;
    color: var(--znh-brand);
}

#ztNewsHub .znh-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#ztNewsHub .znh-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--znh-line);
    border-radius: var(--znh-radius);
    background: #fff;
    box-shadow: var(--znh-shadow);
}

#ztNewsHub .znh-card > img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    background: var(--znh-soft);
}

/* 07.09.2026: в карточку добавлен анонс на две строки, высота карточки
   при этом не изменилась — 267 px, как было. Место набрано внутри
   прежних 138 px тела: заголовок укорочен с трёх строк до двух
   (третья строка почти нигде не использовалась — из восьми карточек
   первой страницы её занимала одна), подпись даты прижата на 4 px
   ближе, отступ над «Читать далее» уменьшен с 15 до 4 px, нижнее поле
   тела с 13 до 10. Замер после правки: тело 138 px, карточка 267 px —
   ровно как до появления анонса. */
#ztNewsHub .znh-card > div {
    min-height: 138px;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 8px;
}

/* Перенос запрещён намеренно: строка меты — дата плюс метка, и стоит ей
   встать в две строки, карточка вырастает на 22 px. Дата держит свою
   ширину, метка ужимается и при нехватке места обрезается многоточием.
   На стенде до обрезки не доходит, но категорию в инфоблоке можно
   назвать как угодно, и раскладка не должна от этого ломаться. */
#ztNewsHub .znh-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--znh-meta);
    font-size: 10px;
    text-transform: uppercase;
}

/* 07.09.2026: дата уменьшена с 10 до 9 px — служебная подпись не должна
   спорить с заголовком. Высоту строки меты она не задаёт: ряд держит
   метка (16 px), поэтому карточка от этого не меняется. */
#ztNewsHub .znh-meta time {
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 9px;
}

/* 07.09.2026: категория в карточке была обычным текстом рядом с датой —
   заказчик попросил кнопку, как в «Быстром доступе к темам». Тот же приём:
   жёлтая рамка, иконка темы, подпись капсом; размеры уменьшены под строку
   меты (иконка 12 px, кегль 10, поля 1/7, скругление 6). Метка выросла
   с 12 до 16 px — четыре пикселя возвращены отступом меты (6 → 4)
   и верхним полем тела (14 → 12), поэтому карточка осталась 267 px. */
/* `inline-block`, а не `inline-flex`: у флексбокса текстовый узел
   становится безымянным элементом, и `text-overflow` до него не достаёт —
   длинная категория обрезалась бы по краю рамки без многоточия. */
#ztNewsHub .znh-tag {
    min-width: 0;
    flex: 0 1 auto;
    display: inline-block;
    overflow: hidden;
    padding: 1px 6px;
    border: 1px solid var(--znh-brand);
    border-radius: 6px;
    /* Подпись жёлтая по прямому указанию заказчика (07.09.2026).
       На белом это контраст 1,9:1 при норме 4,5:1 — метка вспомогательная,
       категория дублируется рамкой, иконкой и фильтром тем, но знать об этом
       нужно: см. [[Доступность]]. */
    color: var(--znh-brand);
    font: 700 10px/1.2 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: .04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#ztNewsHub .znh-tag img {
    width: 11px;
    height: 11px;
    margin-right: 4px;
    object-fit: contain;
    vertical-align: -2px;
}

/* 07.09.2026: заголовок укрупнён с 14 до 16 px. Две строки выросли
   с 37,8 до 43,2 px — 5,4 px возвращены внутри тела (интерлиньяж анонса
   1,35 → 1,3, отступ анонса 4 → 3, отступ ссылки 4 → 3, нижнее поле
   10 → 8), поэтому карточка осталась прежней высоты. */
#ztNewsHub .znh-card h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--znh-ink);
    font: 400 16px/1.35 var(--zt-font-head, var(--zt-font, "Inter", Arial, sans-serif));
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Анонс приходит из `PREVIEW_TEXT` инфоблока (фолбэк — `DETAIL_TEXT`),
   как на главной. Ровно две строки: и когда текста больше — обрезается
   многоточием, и когда меньше — карточка не «схлопывается», потому что
   высоту держит `min-height` тела. Кегль 12 px — нижняя граница
   шрифтовой системы, мельче на странице ничего нет. */
#ztNewsHub .znh-card__text {
    display: -webkit-box;
    overflow: hidden;
    margin: 3px 0 0;
    color: var(--znh-muted);
    font: 400 12px/1.3 var(--zt-font, "Inter", Arial, sans-serif);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#ztNewsHub .znh-card a {
    margin-top: auto;
    padding-top: 3px;
    color: var(--znh-ink);
    font: 700 11px/1.2 var(--zt-font, "Tektur", "Inter", Arial, sans-serif);
    letter-spacing: .012em;
    text-transform: uppercase;
    text-decoration: none;
}

#ztNewsHub .znh-empty {
    margin: 18px 0 0;
    padding: 24px;
    border: 1px dashed var(--znh-line);
    border-radius: var(--znh-radius);
    color: var(--znh-muted);
    text-align: center;
}

#ztNewsHub .znh-pagination {
    margin-top: 24px;
}

/* 07.09.2026: счётчик «Новости 1–8 из 20» снят с глаз по требованию
   заказчика. Узел оставлен и спрятан визуально: это `aria-live`-область,
   через которую программы чтения с экрана сообщают о смене страницы
   и о догрузке. Видимого следа на странице он не оставляет. */
#ztNewsHub .znh-pagination__info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 07.09.2026: раскладка ряда взята у каталога (`catalog-grid.css:354`-`417`):
   слева «Назад», номера и «Вперёд», справа — жёлтая «Показать ещё».
   Четвёртая колонка держит свою ширину и когда догружать больше нечего,
   поэтому ряд не прыгает между страницами.
   N-770: внешняя обводка, подложка и внутренние поля сняты — крайние
   кнопки встают ровно по краям колонки новостей, без отступа рамки. */
#ztNewsHub .znh-pagination__controls {
    display: grid;
    grid-template-columns: auto auto auto minmax(150px, 1fr);
    align-items: center;
    justify-items: start;
    gap: 8px;
}

#ztNewsHub .znh-pagination__button--prev { grid-column: 1; grid-row: 1; }
#ztNewsHub .znh-pagination__pages { grid-column: 2; grid-row: 1; }
#ztNewsHub .znh-pagination__button--next { grid-column: 3; grid-row: 1; }

#ztNewsHub .znh-pagination__pages {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    max-width: 100%;
    gap: 6px;
}

#ztNewsHub .znh-pagination__button,
#ztNewsHub .znh-pagination__ellipsis {
    min-width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid var(--znh-line);
    border-radius: var(--zt-radius-btn, 8px);
    color: var(--znh-ink);
    background: #fff;
    font: 700 13px/1 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    text-decoration: none;
}

#ztNewsHub .znh-pagination__button:hover,
#ztNewsHub .znh-pagination__button:focus-visible {
    border-color: var(--znh-brand);
}

#ztNewsHub .znh-pagination__button[aria-current="page"] {
    border-color: var(--znh-brand);
    background: var(--znh-brand);
}

#ztNewsHub .znh-pagination__button[aria-disabled="true"] {
    opacity: 0.42;
}

/* N-506: у кнопок «Назад» и «Вперёд» по два потомка — стрелка и подпись.
   Общее правило кнопки — inline-grid в одну колонку, поэтому потомки вставали
   друг под друга и подписи оказывались на разной высоте. Раскладываем их
   в строку; на мобильном подпись скрыта и остаётся одна стрелка. */
#ztNewsHub .znh-pagination__button--direction {
    min-width: 132px;
    grid-auto-flow: column;
    gap: 8px;
}

/* Кнопка «Назад» в неактивном состоянии — <span>, «Вперёд» — <a>. Их
   внутренние span-ы ловили чужой кегль из старого шаблона (16 px против
   13 px), из-за чего подписи вставали на разной высоте. Задаём детям
   шрифт кнопки явно. */
#ztNewsHub .znh-pagination__button--direction > * {
    font: inherit;
    line-height: 1;
}

#ztNewsHub .znh-pagination__ellipsis {
    border-color: transparent;
    background: transparent;
}

/* 07.09.2026: «Показать ещё» — жёлтая заливка; размеры, радиус и гарнитура те же,
   что у кнопки каталога `.zt-catalog-load-more`
   (`catalog-grid.css:390`-`414`). Остаётся ссылкой на следующую
   страницу: без JS это обычный переход, с JS — догрузка. */
#ztNewsHub .znh-pagination__more {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    min-width: 132px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--znh-brand);
    border-radius: var(--zt-radius-btn, 8px);
    background: var(--znh-brand);
    color: #1d2228;
    font: 700 13px/1 var(--zt-font-btn, "Manrope", "Inter", Arial, sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

/* Наведение повторяет кнопку «Каталог» в шапке (`header-new.css:111`):
   жёлтый не меняется, добавляются тень и подъём на 1 px. Каталожная
   `.zt-catalog-load-more` темнеет до #e8a600 — этот оттенок снят по
   требованию «один жёлтый на странице». */
#ztNewsHub .znh-pagination__more:hover,
#ztNewsHub .znh-pagination__more:focus-visible {
    box-shadow: 0 8px 20px rgba(255, 184, 0, 0.25);
    transform: translateY(-1px);
}

#ztNewsHub .znh-useful > a:not(.znh-side-more) {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: var(--znh-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

#ztNewsHub .znh-useful > a img {
    width: 82px;
    height: 56px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--znh-soft);
}

#ztNewsHub .znh-useful small {
    display: block;
    margin-bottom: 5px;
    color: #858d97;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
}

#ztNewsHub .znh-side-more {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    color: var(--znh-ink);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

/* 07.09.2026: оффер должен и ехать при прокрутке, и в конце вставать вровень
   с низом «Показать ещё». Порознь это несовместимо: прилипание к шапке
   оставляло под карточкой пустое место, когда страница кончалась раньше,
   чем блок успевал доехать; прижатие к низу (`margin-top: auto`) убирало
   пустоту, но лишало блок хода — его статическая позиция совпадала с нижней
   границей колонки.

   Решение — обёртка `.znh-side-tail`, которая забирает весь остаток высоты
   колонки. Оффер прилипает к шапке внутри неё, поэтому при прокрутке едет
   вместе с лентой и отпускается ровно на нижней границе обёртки, а она
   совпадает с низом ряда пагинации: доехав, блок встаёт вровень с кнопкой
   «Показать ещё».

   Прилипание именно к верху, а не к низу экрана: вариант `bottom` в этой
   раскладке браузер не отрабатывает — проверено перебором, `top` смещает
   блок, `bottom` не даёт сдвига ни при `display: block` у обёртки и колонки,
   ни при `overflow: visible` у модуля. Обёртка при этом остаётся полезной:
   она ограничивает ход снизу низом пагинации, а не концом колонки.

   Там же, от 901 px, форма перестраивается под узкую колонку: иконка, текст
   и форма идут вертикально, поле и кнопка — друг под другом. Ниже 900 px
   блок снова во всю ширину и работают базовые правила. */
@media (min-width: 901px) {
    #ztNewsHub .znh-side-tail {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    #ztNewsHub .znh-subscribe--side {
        position: sticky;
        top: var(--znh-sticky-top, 88px);
    }

    /* `margin: auto 0 0` именно здесь, а не отдельным правилом: у правила
       раскладки ниже вес больше (два класса против одного), и `margin: 0`
       гасил бы автоотступ. */
    #ztNewsHub .znh-subscribe.znh-subscribe--side {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        margin: 0;
        padding: 22px;
    }

    #ztNewsHub .znh-subscribe--side .znh-mail {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.11);
    }

    #ztNewsHub .znh-subscribe--side .znh-mail img {
        width: 27px;
        height: 27px;
    }

    #ztNewsHub .znh-subscribe--side h2 {
        font-size: 19px;
    }

    #ztNewsHub .znh-subscribe--side p {
        margin-top: 7px;
        font-size: 12px;
    }

    #ztNewsHub .znh-subscribe--side .znh-form-row {
        display: grid;
        gap: 8px;
    }

    #ztNewsHub .znh-subscribe--side .znh-form-row input,
    #ztNewsHub .znh-subscribe--side .znh-form-row button {
        width: 100%;
        min-width: 0;
        height: 44px;
        border-radius: var(--zt-radius-btn, 8px);
    }
}

/* Блок живёт в правой колонке; отдельного нижнего CTA на странице
   больше нет, поэтому верхний отступ секции снят — его задаёт колонка. */
#ztNewsHub .znh-subscribe {
    display: grid;
    grid-template-columns: 82px 310px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    width: 100%;
    margin: 0;
    padding: 27px 34px;
    border-radius: var(--znh-radius);
    background: var(--znh-brand);
}

#ztNewsHub .znh-mail {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.23);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.11);
}

#ztNewsHub .znh-mail img {
    width: 37px;
    height: 37px;
}

#ztNewsHub .znh-subscribe p {
    margin: 9px 0 0;
    color: var(--znh-ink);
    font-size: 13px;
    line-height: 1.45;
}

#ztNewsHub .znh-form-row {
    display: flex;
}

#ztNewsHub .znh-form-row input {
    min-width: 0;
    height: 48px;
    flex: 1;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--zt-radius-btn, 8px) 0 0 var(--zt-radius-btn, 8px);
    color: var(--znh-ink);
    background: #fff;
    font: 500 14px/1 var(--zt-font, "Inter", Arial, sans-serif);
}

#ztNewsHub .znh-form-row button {
    min-width: 152px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 0 var(--zt-radius-btn, 8px) var(--zt-radius-btn, 8px) 0;
    color: #fff;
    background: #232b36;
    font: 700 13px/1 var(--zt-font, "Tektur", "Inter", Arial, sans-serif);
    letter-spacing: .012em;
    text-transform: uppercase;
    cursor: pointer;
}

#ztNewsHub .znh-form-row button span {
    font: inherit;
    letter-spacing: inherit;
}

/* 07.09.2026: согласие вставало в две строки по двум причинам сразу.
   Первая — `display: flex`: текстовый узел «Я согласен на» и ссылка
   становились отдельными элементами раскладки и вставали в две колонки,
   а не в одно предложение. Вторая — ссылка набиралась 16 px Tektur:
   легаси-CSS боевого домена красит `a` по имени тега, а здесь было задано
   только `color: inherit`, кегль и гарнитура до ссылки не доходили.
   Возвращаем обычный поток текста и наследование шрифта. */
#ztNewsHub .znh-consent {
    display: block;
    margin-top: 10px;
    color: var(--znh-ink);
    font-size: 10px;
    line-height: 1.3;
}

#ztNewsHub .znh-consent input {
    margin: 0 6px 0 0;
    vertical-align: -2px;
}

#ztNewsHub .znh-consent a {
    color: inherit;
    /* Без `font: inherit` ссылка забирает 16 px Tektur из легаси-CSS
       боевого домена и ломает строку. */
    font: inherit;
    text-decoration: underline;
}

#ztNewsHub .znh-subscribe output {
    display: block;
    margin-top: 7px;
    color: var(--znh-ink);
    font-size: 11px;
}

#ztNewsHub .znh-honeypot,
#ztNewsHub .znh-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#ztNewsHub .znh-noscript-pagination {
    margin-top: 20px;
    text-align: center;
}

#ztNewsHub .znh-noscript-pagination a {
    color: var(--znh-ink);
}

@media (min-width: 1321px) {
    #ztNewsHub .znh-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    #ztNewsHub .znh-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 18px;
    }

    #ztNewsHub .znh-hero-content {
        width: 64%;
    }

    #ztNewsHub .znh-subscribe {
        grid-template-columns: 70px 270px minmax(0, 1fr);
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    #ztNewsHub .znh-topic-grid {
        grid-template-columns: 1fr;
    }

    #ztNewsHub .znh-hero {
        min-height: 420px;
    }
}

@media (max-width: 900px) {
    #ztNewsHub {
        padding-top: 28px;
        padding-bottom: 46px;
    }

    #ztNewsHub .znh-layout {
        display: flex;
        flex-direction: column;
    }

    #ztNewsHub .znh-main,
    #ztNewsHub .znh-side {
        width: 100%;
    }

    #ztNewsHub .znh-side {
        margin-top: 2px;
    }

    #ztNewsHub .znh-topic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #ztNewsHub .znh-subscribe {
        grid-template-columns: 70px 1fr;
    }

    #ztNewsHub .znh-subscribe form {
        grid-column: 1 / -1;
    }

    /* 07.09.2026: как в каталоге на 900 px (`catalog-grid.css:479`-`513`): широкие
       подписи «Назад» и «Вперёд» перестают помещаться рядом с номерами
       и жёлтой кнопкой, остаются одни стрелки, номера — по центру. */
    #ztNewsHub .znh-pagination__controls {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    #ztNewsHub .znh-pagination__pages {
        justify-content: center;
    }

    #ztNewsHub .znh-pagination__button--prev { justify-self: start; }
    #ztNewsHub .znh-pagination__button--next { justify-self: end; }

    #ztNewsHub .znh-pagination__button--direction {
        min-width: 42px;
        padding: 0;
    }

    #ztNewsHub .znh-pagination__button--direction span:not([aria-hidden]) {
        display: none;
    }
}

@media (max-width: 600px) {
    #ztNewsHub {
        padding-top: 22px;
        padding-bottom: 38px;
    }

    #ztNewsHub .znh-page-head {
        margin: 20px 0 24px;
    }

    #ztNewsHub .znh-page-head h1 {
        font-size: clamp(29px, 9vw, 36px);
    }

    #ztNewsHub .znh-page-head p {
        font-size: 13px;
    }

    #ztNewsHub .znh-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #ztNewsHub .znh-panel {
        padding: 20px;
    }

    #ztNewsHub .znh-hero {
        min-height: 510px;
    }

    #ztNewsHub .znh-hero-slide {
        background-image: linear-gradient(0deg, rgba(18, 24, 32, 0.97) 0%, rgba(18, 24, 32, 0.72) 62%, rgba(18, 24, 32, 0.18) 100%), var(--hero);
    }

    #ztNewsHub .znh-hero-content {
        width: 100%;
        padding: 95px 20px 82px;
    }

    #ztNewsHub .znh-badges {
        margin-bottom: 18px;
    }

    #ztNewsHub .znh-hero h2 {
        font-size: 25px;
    }

    #ztNewsHub .znh-hero p {
        font-size: 14px;
    }

    #ztNewsHub .znh-hero-controls {
        left: 20px;
    }

    /* На узких экранах баннер главной уменьшает полоски до 18 × 3
       (`glavnaya.html:1712`) — здесь тот же размер. */
    #ztNewsHub .znh-dots button {
        width: 18px;
    }

    #ztNewsHub .znh-dots button::after {
        width: 18px;
        height: 3px;
    }

    /* На телефоне герой занимает всю ширину, стрелки и точки съедают
       низ слева. Кнопку возвращаем в поток и прижимаем вправо
       отступом — правый край тот же, но на стрелки она не наезжает. */
    #ztNewsHub .znh-hero-content > a {
        position: static;
        /* Одного `margin-left: auto` мало: базовое правило делает кнопку
           `inline-flex`, а у строчного элемента авто-поля не работают.
           Переводим в блочный `flex` с шириной по содержимому. */
        display: flex;
        width: fit-content;
        margin-left: auto;
    }

    #ztNewsHub .znh-grid {
        grid-template-columns: 1fr;
    }

    #ztNewsHub .znh-card {
        display: grid;
        grid-template-columns: minmax(116px, 36%) minmax(0, 1fr);
    }

    #ztNewsHub .znh-card > img {
        height: 100%;
        min-height: 158px;
        aspect-ratio: auto;
    }

    #ztNewsHub .znh-card > div {
        min-height: 158px;
        padding: 13px 12px;
    }

    /* 07.09.2026: четвёртая строка заголовка снята — её место занял анонс.
       Замер: тело 158 px, содержимое при трёхстрочном заголовке 147 px;
       с четырьмя строками оно вышло бы за карточку на 18 px, а `min-height`
       рост не удерживает. */
    #ztNewsHub .znh-card h3 {
        font-size: 14px;
        -webkit-line-clamp: 3;
    }

    #ztNewsHub .znh-section-head {
        align-items: flex-start;
    }

    #ztNewsHub .znh-section-head h2 {
        font-size: 21px;
    }

    #ztNewsHub .znh-text-action {
        max-width: 118px;
        padding-top: 0;
        font-size: 11px;
        text-align: right;
    }

    #ztNewsHub .znh-pagination__button--edge,
    #ztNewsHub .znh-pagination__button--wide-only,
    #ztNewsHub .znh-pagination__ellipsis {
        display: none;
    }

    /* 07.09.2026: как в каталоге на 620 px (`catalog-grid.css:515`-`537`): жёлтая
       кнопка уходит во вторую строку на всю ширину, номера
       прокручиваются. Подписи направлений уже сняты блоком 900 px. */
    #ztNewsHub .znh-pagination__controls {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    #ztNewsHub .znh-pagination__pages {
        overflow-x: auto;
        scrollbar-width: none;
    }

    #ztNewsHub .znh-pagination__more {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
    }

    #ztNewsHub .znh-subscribe {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        padding: 24px 18px;
    }

    #ztNewsHub .znh-mail {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.11);
    }

    #ztNewsHub .znh-mail img {
        width: 27px;
        height: 27px;
    }

    #ztNewsHub .znh-form-row {
        display: grid;
        gap: 8px;
    }

    #ztNewsHub .znh-form-row input,
    #ztNewsHub .znh-form-row button {
        width: 100%;
        border-radius: var(--zt-radius-btn, 8px);
    }
}

@media (max-width: 380px) {
    #ztNewsHub .znh-topic-grid {
        grid-template-columns: 1fr;
    }

    #ztNewsHub .znh-card {
        grid-template-columns: 112px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztNewsHub *,
    #ztNewsHub *::before,
    #ztNewsHub *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------------------------------------------------------------
   21.09.2026, «Конструктор новостей»: облако меток в правой колонке.
   Метки ставит редакция; клик открывает ленту по метке
   (/news/?tag=…), повторный клик по выбранной — сброс.
   Вид — кнопки тем, только скруглённые: жёлтая рамка, подложка из
   того же #FFB800 прозрачностью. Подпись — Manrope: подстрока
   «__tag» в классе включает роль бейджа из zt-redesign.css.
   --------------------------------------------------------------- */

#ztNewsHub .znh-tagcloud__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

#ztNewsHub .znh-tagcloud__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--znh-brand);
    border-radius: 999px;
    color: var(--znh-ink);
    background: transparent;
    font: 700 12px/1.2 var(--zt-font-btn, var(--zt-font, "Inter", Arial, sans-serif));
    letter-spacing: .02em;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

#ztNewsHub .znh-tagcloud__tag b {
    color: var(--znh-meta);
    font: inherit;
    font-weight: 700;
    letter-spacing: 0;
}

#ztNewsHub .znh-tagcloud__tag:hover,
#ztNewsHub .znh-tagcloud__tag.is-active,
#ztNewsHub .znh-tagcloud__tag:focus-visible {
    color: var(--znh-ink);
    background: rgba(255, 184, 0, 0.14);
}

#ztNewsHub .znh-tagcloud__tag:hover {
    transform: translateY(-1px);
}

#ztNewsHub .znh-tagcloud__tag:focus-visible {
    outline: 3px solid rgba(255, 184, 0, 0.35);
    outline-offset: 2px;
}