/* ==========================================================================
   ZIPTEH SERVICE — страница «Сертификаты», концепт 4
   ТЗ версии 1.0 от 31.08.2026, эталон «Концепт 4 — сертификаты.png»

   ТЗ §3.3: весь код ограничен корнем #ztCertificatesPage, префикс классов
   zcp-. Глобальные h1, h2, .card, .item, img, button без префикса
   не используются.
   ========================================================================== */

#ztCertificatesPage {
    /* Цвета и шрифты — по принятой главной (правило заказчика 31.08.2026:
       все модули равняются на главную). ТЗ §5 даёт близкие значения,
       расхождения помечены:
         текст      #27313B (ТЗ) -> #333a43  --black
         приглушён. #8B939B (ТЗ) -> #909090  --gray-dark
         жёлтый     #FFB800 — совпадает с --yellow
         граница    #E0E4E8 (ТЗ) -> #e3e5e5  как у карточки товара главной
       Вторичный #555F69 оставлен из ТЗ: у главной нет промежуточной
       ступени между основным и приглушённым текстом. */
    --zcp-ink: var(--black, #333a43);
    --zcp-ink-2: #555f69;
    --zcp-muted: var(--gray-dark, #909090);
    --zcp-amber: var(--yellow, #ffb800);
    --zcp-amber-hover: var(--yellow-hover, #e8a600);
    --zcp-border: #e3e5e5;
    --zcp-plate: #f2f3f4;
    --zcp-surface: #fff;
    --zcp-page: #fbfbfb;

    /* ТЗ §5: тёмный CTA #28313B с допустимым градиентом до #252E38 */
    --zcp-dark: #28313b;
    --zcp-dark-2: #252e38;

    --zcp-radius-card: 4px;
    --zcp-radius-cta: 12px;

    /* Шрифты по ролям из zt-fonts.css */
    --zcp-font-head: var(--zt-font-head, 'Russo One', 'Tektur', system-ui, Arial, sans-serif);
    --zcp-font-btn: var(--zt-font-btn, 'Manrope', 'Inter', system-ui, Arial, sans-serif);

    /* Отступ от шапки — как у модуля вакансий и героя главной */
    padding-top: 24px;
    padding-bottom: 40px;
    color: var(--zcp-ink);
    font-size: 14px;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Стыковка с боевым шаблоном
   --------------------------------------------------------------------------

   На стенде модуль лежит в странице сам по себе, на бою — внутри
   обёрток шаблона. Замер по снимку боевой страницы
   (Стенд/бой/sertifikaty.html):

       <section class="content-area zt-page-content-area">
         <div class="container">
           <h1 class="zt-page-heading zt-page-heading--content">Сертификаты</h1>
           <section class="content-area-white">
             <div class="container">          <- сюда встаёт наш модуль

   Отсюда две правки, обе срабатывают только когда модуль на странице.

   1. Заголовок «Сертификаты» рисует шаблон, а у модуля есть свой H1
      «СЕРТИФИКАТЫ, ДИПЛОМЫ И НАГРАДЫ ZIPTEH SERVICE». Два H1 на странице —
      и дубль для поиска, и лишний заголовок для читателя. Прячем шаблонный.

   2. Колонку задаёт сам модуль через .zt-shell. Если оставить поля
      и ширину у .container, они сложатся с полями .zt-shell, и модуль
      станет уже шапки — а «по ширине шапки» заказчик проверяет первым.

   Через :has, поэтому остальных страниц правила не касаются. В браузере
   без :has они просто не сработают: будет лишний заголовок и модуль уже
   шапки, но вёрстка не развалится. */
body:has(#ztCertificatesPage) .zt-page-heading--content {
    display: none;
}

.content-area-white > .container:has(#ztCertificatesPage),
.zt-page-content-area > .container:has(#ztCertificatesPage) {
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* 16.09.2026, замер на бою. Обнуления полей у .container выше не хватило:
   колонку шапки обёртке шаблона задаёт site-shell.css ещё выше по дереву —
   section.content-area-white на 1440 px уже стоит 20…1405, как логотип
   и крошки. А модуль внутри неё добавлял свои поля .zt-shell ещё раз —
   и держал их через !important из zt-home-unify.css
   (`.zt-shell { padding-left: var(--page-gutter) !important }`).

   Итог на бою: контент модуля начинался с 40 px при логотипе и крошках
   на 20 px, на телефоне 360 px — с 28 px при 14 px, то есть модуль
   терял 28 px ширины. Разъезд по краю с шапкой — первое, что проверяет
   заказчик.

   Внутри обёртки шаблона модулю свои поля не нужны: колонка уже задана.
   !important — ответ на !important чужого правила; селектор с id и
   цепочкой обёрток срабатывает только на боевой странице, на стенде
   обёртки нет и .zt-shell работает как раньше.

   Проверено пробой на бою: край модуля совпал с логотипом и крошками
   на 2560 (277…2269), 1920 (28…1877), 1440 (20…1405), 1024 (20…989),
   768 (20…733) и 360 (14…346), горизонтальной прокрутки нет. */
.content-area-white > .container > #ztCertificatesPage.zt-shell {
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#ztCertificatesPage *,
#ztCertificatesPage *::before,
#ztCertificatesPage *::after {
    box-sizing: border-box;
}

#ztCertificatesPage img {
    max-width: 100%;
}

/* <picture> не участвует в раскладке — иначе абсолютное позиционирование
   и flex видят обёртку, а не картинку. */
#ztCertificatesPage picture {
    display: contents;
}

.zcp-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Обводка задаётся на ссылающемся <svg>, а не внутри спрайта: селектор
   вида «.zcp-sprite symbol» не попадает в теневое дерево <use>, а эти
   свойства наследуемые и доходят до него. Правило общее для всех svg
   модуля — иначе иконки без класса .zcp-icon рисуются чёрной заливкой. */
#ztCertificatesPage svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zcp-icon {
    flex: none;
    color: var(--zcp-amber);
}

/* Короткая жёлтая линия под заголовками разделов — общий элемент концепта.
   Из hero убрана правкой N-649, у «СЕРТИФИКАТОВ СООТВЕТСТВИЯ» и «ДИПЛОМОВ
   И НАГРАД» осталась. */
.zcp-rule {
    width: 46px;
    height: 3px;
    margin-top: 14px;
    background: var(--zcp-amber);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Хлебные крошки
   -------------------------------------------------------------------------- */

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

/* Одна строка на любой ширине (03.09.2026): перенос запрещён,
   нехватка ширины гасится многоточием у текущего пункта.
   Те же правила, что у сквозных крошек в site-shell.css. */
.zcp-crumbs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.zcp-crumbs__item {
    display: flex;
    flex: 0 1 auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    color: var(--zcp-muted);
    white-space: nowrap;
}

.zcp-crumbs__item:last-child {
    flex: 0 200 auto;
    min-width: 4em;
}

/* Ссылки-предки ужимаются вторыми и не короче самого длинного слова. */
.zcp-crumbs__item:not(:last-child) {
    min-width: min-content;
}

.zcp-crumbs__item + .zcp-crumbs__item::before {
    flex: none;
    color: var(--zcp-border);
    content: "›";
}

.zcp-crumbs__item > a,
.zcp-crumbs__item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ссылки крошек приходится защищать от боевых стилей.

   Страница /sertifikaty-kachestva/ выводится компонентом
   `news/sertifikati`, и его собственный `style.css` задаёт ссылкам
   `display: block`, `overflow: hidden`, кегль 16 px и высоту в одну
   строку. Наши крошки набраны 13-м кеглем — строка получалась 18 px
   в коробке 16 px, и у букв с выносными элементами срезался низ.
   Замер на бою: `a` в крошках 67×16 px при `scrollHeight` 18 px.

   Отсюда явные значения и хак специфичности, принятый в проекте. */
#ztCertificatesPage .zcp-crumbs a:not(#zt_):not(#zt_),
#ztCertificatesPage .zcp-crumbs [aria-current="page"]:not(#zt_):not(#zt_) {
    height: auto;
    font-size: var(--zt-crumbs-font, clamp(11px, 0.55vw + 8.5px, 13px));
    line-height: 1.3;

    /* 03.09.2026: было `overflow: visible` — оно защищало выносные
       элементы букв от обрезки по высоте. Высоту держит `height: auto`
       вместе с `line-height: 1.3`, а горизонтальное «hidden» нужно,
       чтобы длинный пункт сворачивался многоточием, а не переносился. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zcp-crumbs a {
    color: var(--zcp-muted);
    text-decoration: none;
}

.zcp-crumbs a:hover {
    color: var(--zcp-amber);
}

.zcp-crumbs [aria-current="page"] {
    color: var(--zcp-ink-2);
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

/* Правки 03.09.2026: коллаж, жёлтый круг и точечный паттерн убраны (N-638),
   hero стал одноколоночным, под лидом — полоса фактов (N-639). */
.zcp-hero {
    position: relative;
    min-height: 0;
    margin-top: 18px;
}

.zcp-hero__copy {
    position: relative;
    z-index: 3;
    padding: 8px 0 0;
}

.zcp-hero__title {
    margin: 0;
    color: var(--zcp-ink);
    /* Правки N-637 и N-640: «СЕРТИФИКАТЫ, ДИПЛОМЫ И НАГРАДЫ ZIPTEH SERVICE»
       капсом, приписка бренда корпоративным жёлтым.

       Кегль вписан в ширину через clamp, без white-space: nowrap. Nowrap
       здесь опасен: он не переносит строку, а выталкивает её за экран и
       тянет горизонтальную прокрутку всей страницы, а запаса нет — после
       приписки бренда и капса строка стала в полтора раза длиннее.
       Худший случай без nowrap — перенос на вторую строку, а не поехавшая
       вёрстка. Верх шкалы снижен с 44 до 40 px по той же причине. */
    font-family: var(--zcp-font-head);
    font-size: clamp(22px, 1.9vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Правка N-640: приписка бренда корпоративным жёлтым.

   !important и хак :not(#zt_) — не украшательство. В zt-redesign.css:521
   стоит глобальное правило `body *:not(i):not(...) { font-family:
   var(--zt-font) !important }`, а заголовки перекрыты отдельным правилом
   на h1…h6 (zt-redesign.css:1701). Span внутри H1 под второе правило
   не попадает и наследование не спасает: приписка набиралась шрифтом
   основного текста, а не заголовочным. Приём и запись — те же, что
   уже приняты в проекте для таких случаев. */
#ztCertificatesPage .zcp-hero__brand:not(#zt_):not(#zt_) {
    font: inherit;
    font-family: var(--zcp-font-head, 'Russo One', Arial, sans-serif) !important;
    color: var(--zcp-amber);
    white-space: nowrap;
}

/* Правки N-650 и N-651: лид поднят на место убранной жёлтой линии, а затем
   ещё выше. Было 39 px от H1 (14 отступ + 3 линия + 22), стало 12 px. */
.zcp-hero__lead {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--zcp-ink-2);
    font-size: 15px;
    line-height: 1.55;
}

/* Полоса фактов. Пришла на место блока «Почему нам доверяют»: та же
   раскладка колонками с разделителями, но пунктов пять — к четырём
   показателям добавилось преимущество «Прозрачность и ответственность».
   Показатель «100%» и преимущество «Гарантия качества» слиты в один
   пункт: у них был один и тот же текст. */
/* Указание 03.09.2026: на ПК полоса опущена ниже — лид и цифры стояли
   вплотную и читались одним куском. Отступ плавный: 60 px на 1920,
   46 на 1440, 41 на 1280, 33 на 1024 и прежние 30 на планшете
   и телефоне, где лишний воздух только удлиняет прокрутку. */
.zcp-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: clamp(30px, 3.2vw, 60px);
}

/* Размеры внутри пункта плавные, а не ступенчатые.

   Пять пунктов в строку — это на 1280 px колонка в 248 px, из которых
   под текст оставалось 148: описания разъезжались на четыре строки,
   и полоса выглядела рваной. Ступеньки по брейкпоинтам чинили это
   рывками, поэтому иконка, поля и все три кегля вписаны в ширину окна
   через clamp — полоса сжимается плавно и на любой ширине держит
   описание в две строки. Нижние границы clamp — 12 px для текста
   (минимум шрифтовой шкалы проекта) и 30 px для иконки. */
.zcp-fact {
    display: grid;
    grid-template-columns: clamp(30px, 2.2vw, 38px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 4px clamp(12px, 1.2vw, 22px) 4px 0;
}

.zcp-fact + .zcp-fact {
    padding-left: clamp(14px, 1.4vw, 24px);
    border-left: 1px solid var(--zcp-border);
}

.zcp-fact__icon {
    width: clamp(30px, 2.2vw, 38px);
    height: clamp(30px, 2.2vw, 38px);
}

/* Правка N-648: число и название стоят на одной строке, описание уходит
   под них. Строка первая — flex по базовой линии, чтобы «100%» 24-го кегля
   и «Гарантия качества» 14-го сели на общую линию шрифта, а не по центру
   коробок. Описание занимает всю ширину и потому переносится само.
   У остальных пунктов есть только число или только название — раскладка
   для них не меняется. */
.zcp-fact__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
}

.zcp-fact__value {
    margin: 0;
    font-family: var(--zcp-font-head);
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 700;
    line-height: 1.1;
}

.zcp-fact__title {
    margin: 0;
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 700;
    line-height: 1.2;
}

.zcp-fact__text {
    flex: 0 0 100%;
    margin: 5px 0 0;
    color: var(--zcp-ink-2);
    font-size: clamp(12px, 0.85vw, 13px);
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   2. Галерея сертификатов
   -------------------------------------------------------------------------- */

/* Правки 03.09.2026 и N-647: на ПК разделы разведены сильнее. Прежние
   34 px читались как один сплошной блок — и над «СЕРТИФИКАТАМИ
   СООТВЕТСТВИЯ», и между двумя группами. Отступ один и тот же в обоих
   местах: заголовки одинаковые по весу, разный воздух перед ними
   выглядел бы ошибкой. На планшете шаг меньше, на телефоне прежний:
   там строк больше и лишний воздух только удлиняет прокрутку. */
.zcp-section {
    margin-top: 72px;
}

/* Правки N-641, N-642 и указание 03.09.2026: заголовки разделов набраны
   тем же кеглем, что H1 (та же шкала clamp — меняются синхронно с ним),
   и тоже капсом. */
.zcp-section__title {
    margin: 0;
    font-family: var(--zcp-font-head);
    font-size: clamp(22px, 1.9vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.zcp-gallery__frame {
    position: relative;
    margin-top: 20px;
}

.zcp-gallery__viewport {
    /* Решение заказчика 03.09.2026: все документы выводятся на страницу
       целиком, без прокрутки. Раньше здесь была карусель с горизонтальной
       лентой и стрелками — она уехала вместе со стрелками и скриптом.

       --zcp-cols — сколько карточек в строке на этой ширине (ТЗ §10).
       Строк столько, сколько нужно: 5 сертификатов занимают одну,
       12 дипломов — три. Ширина карточки в обеих сетках одна.

       --zcp-shot — пропорция окошка документа, приходит инлайном из
       разметки: самый высокий скан группы. Так внутри группы все окошки
       одного размера, а сканы влезают целиком. */
    --zcp-cols: 5;
    --zcp-gap: 16px;

    display: grid;
    grid-template-columns: repeat(var(--zcp-cols), minmax(0, 1fr));
    gap: 20px var(--zcp-gap);
}

/* Карточка — одна кнопка, без вложенных ссылок (ТЗ §6.2) */
.zcp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--zcp-border);
    border-radius: var(--zcp-radius-card);
    background: var(--zcp-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    /* Правка N-646: по карточке ничего не происходит — курсор обычный. */
    transition: border-color .18s ease-in-out, box-shadow .28s ease,
        transform .28s ease, opacity .28s ease, filter .28s ease;
}

/* Наведение.

   Карточка приподнимается и увеличивается целиком — не документ внутри
   неё, как было сперва. Подъём и тень взяты у карточек товаров главной
   (catalog-grid.css:908–966), масштаб перенесён с картинки на карточку.

   z-index поднимается, иначе выросшая карточка уходила бы под соседние:
   в сетке они идут после неё в порядке документа. Прибавка ширины
   от масштаба 1,03 — от 5 px на 360 px до 11 px на 1920 px, то есть
   всегда меньше промежутка между карточками (12–16 px), и соседи
   не перекрываются.

   Увеличение работает на всех устройствах — по указанию заказчика
   03.09.2026 на планшете и телефоне оно остаётся. :active добавлен
   к :hover ради тача: там :hover срабатывает по касанию и залипает,
   пока не тронешь другую карточку, а :active даёт отклик сразу
   в момент нажатия. */
.zcp-card:hover,
.zcp-card:active {
    z-index: 2;
    border-color: var(--zcp-amber);
    box-shadow: 0 10px 26px rgb(33 39 43 / 7%);
    transform: translateY(-3px) scale(1.03);
}

/* Приглушение остальных документов — только на ПК.

   Указание заказчика 03.09.2026: на планшете и телефоне приглушения
   быть не должно, остаётся одно увеличение. Отсюда два условия:
   min-width от 1181 px — та же граница «ПК», что у отступов секций,
   и (hover: hover) — на тач-экранах :hover залипает после касания,
   и соседние документы остались бы тусклыми до следующего касания.

   Селектор :has стоит на корне модуля, поэтому приглушаются обе группы
   разом: наводишь на сертификат — тускнеют и дипломы. В браузерах
   без :has эффект просто не срабатывает, вёрстка не меняется.

   Сила приглушения подобрана заказчиком за четыре пробы:
     0,48 / saturate(0,5)  — «не сильно выделяются»
     0,25 / saturate(0,1)  — «сейчас слишком»
     0,40 / saturate(0,35) — «слишком блекло всё»
     0,55 / saturate(0,7)  — принято
   Выделение держится не одним приглушением: наведённая карточка ещё
   и подрастает, поднимается и получает жёлтую рамку, поэтому соседние
   можно гасить мягко. Меняются только эти два числа. */
@media (hover: hover) and (min-width: 1181px) {
    #ztCertificatesPage:has(.zcp-card:hover) .zcp-card:not(:hover) {
        opacity: .55;
        filter: saturate(.7);
    }
}

/* Окошко документа.

   Картинка позиционируется абсолютно, а не лежит в потоке: при
   aspect-ratio у родителя процентная высота у картинки не разрешается,
   она падает в auto, берёт свою натуральную высоту и вылезает за
   коробку — а overflow: hidden срезает низ. Так у сертификатов
   пропадала нижняя четверть листа с печатью и подписями.
   Абсолютная вставка с inset: 0 даёт картинке определённый размер,
   и object-fit: contain отрабатывает как задумано.

   Пропорция окошка — --zcp-shot, самый высокий скан группы. */
.zcp-card__shot {
    position: relative;
    display: block;
    aspect-ratio: var(--zcp-shot, 3 / 4);
    overflow: hidden;
    background: var(--zcp-page);
}

.zcp-card__shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Правка N-644: в карточке полное название документа. min-height снят —
   названия длиннее двух строк, а высоту строк всё равно равняет сетка. */
.zcp-card__title {
    margin: 12px 0 0;
    font-family: var(--zcp-font-btn);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.zcp-empty {
    margin-top: 20px;
    padding: 28px;
    border: 1px dashed var(--zcp-border);
    border-radius: var(--zcp-radius-cta);
    background: var(--zcp-page);
    color: var(--zcp-ink-2);
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Адаптив (ТЗ §10)
   -------------------------------------------------------------------------- */

/* Полоса фактов переходит на три колонки раньше, чем документы.

   Замер: при пяти колонках под описание остаётся 216 px на 1440 px окна
   (описания в две строки — нормально) и уже 188 px на 1280 (три строки,
   полоса выглядит рваной). Порог поставлен на 1400: ниже него три колонки
   дают под описание 338 px и одну-две строки. Документы при этом остаются
   в пяти колонках до 1180 — там карточка ужимается предсказуемо. */
@media (max-width: 1399px) {
    .zcp-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 0;
    }

    /* Пять пунктов в три колонки дают строки 3 + 2. Разделитель слева
       убираем у первого пункта каждой строки, иначе он висит у края. */
    .zcp-fact:nth-child(3n+1) {
        padding-left: 0;
        border-left: 0;
    }
}

/* 1024–1180: 4 карточки в строке */
@media (max-width: 1180px) {
    .zcp-gallery__viewport {
        --zcp-cols: 4;
    }

    .zcp-section {
        margin-top: 48px;
    }
}

/* Полоса фактов переходит на две колонки на 860, а не на 767.

   Замер на 768 px при трёх колонках: под описание остаётся 184 px, и три
   пункта из пяти уходят в три строки — полоса опять рваная. На двух
   колонках там же под описание 297 px и одна-две строки. Пять пунктов
   дают строки 2 + 2 + 1. */
@media (max-width: 860px) {
    .zcp-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 0;
    }

    .zcp-fact {
        padding-right: 16px;
    }

    /* Сброс разделителя переезжает с каждого третьего на каждый нечётный */
    .zcp-fact:nth-child(3n+1) {
        padding-left: clamp(14px, 1.4vw, 24px);
        border-left: 1px solid var(--zcp-border);
    }

    .zcp-fact:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

/* До 780: 3 карточки в строке */
@media (max-width: 780px) {
    .zcp-gallery__viewport {
        --zcp-cols: 3;
    }
}

@media (max-width: 767px) {
    #ztCertificatesPage {
        padding-top: 18px;
    }

    .zcp-gallery__viewport {
        --zcp-cols: 2;
    }

    .zcp-section {
        margin-top: 34px;
    }

    /* Указание 03.09.2026: на телефоне название документа занимает не больше
       трёх строк. Карточка тут 160–187 px, и самые длинные названия уходили
       в пять-шесть строк — плитки разъезжались по высоте. Сами названия
       заодно сокращены в конфиге, так что обрезка почти не срабатывает:
       это страховка на случай нового документа с длинным именем.

       -webkit-box со строчным клампом — единственный способ, который
       работает во всех целевых браузерах; нестандартное свойство
       line-clamp продублировано на будущее. */
    .zcp-card__title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .zcp-hero__lead {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* 414/412/360 px: две карточки в строке, промежуток уже */
    .zcp-gallery__viewport {
        --zcp-cols: 2;
        --zcp-gap: 12px;
    }

    /* 12 px вместо 13 — нижняя ступень шрифтовой шкалы проекта. На 360 px
       карточка 160 px, и два названия с длинными английскими словами
       («Construction», «Technology») не влезали в три строки: слова
       не переносятся, а резать их дефисом хуже, чем убавить кегль. */
    .zcp-card__title {
        font-size: 12px;
    }

    /* Факты в один столбец: вертикальные разделители меняются на
       горизонтальные, иначе на 360 px пункт остаётся в 130 px шириной. */
    .zcp-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .zcp-fact {
        padding: 14px 0;
    }

    .zcp-fact:nth-child(3n+1),
    .zcp-fact:nth-child(odd),
    .zcp-fact + .zcp-fact {
        padding-left: 0;
        border-left: 0;
    }

    .zcp-fact + .zcp-fact {
        border-top: 1px solid var(--zcp-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    #ztCertificatesPage * {
        transition: none !important;
    }
}