/* Union Motors — Hyundai: layout rules the donor theme is missing.
   Ported 17.08.2026 from the BMW copy of the same file, which in turn was extracted
   from Mercedes' main.css/custom.css. This site's own CSS has none of .um-sec, .wc-*,
   .akpp-note, .mobile-hide, h2.cs-heading or the case-page chrome, so everything the
   cases panel renders would be unstyled without this file.

   🔴 Brand values are written literally: --main-color in main.css is still the donor
   theme's GREEN #31B939, the live value #103a71 is printed by head.php. Never reach
   for var(--main-color) here.
   🔴 Faces: only Inter/Raleway (theme) and 'Hyundai' (fonts plugin) really exist on
   this site. 'BMW Type Next TT', 'MBCorpoS' and 'daimlercac-regular' are phantoms —
   declaring them renders Arial without a warning. */

/* um-cases-port.css — cases/UTP/H1 render-layer styles ported from Mercedes (10.07.2026, BMW panel port Ф6). v1.0.7
   Sections extracted verbatim from MB main.css (.wc-block family) + MB custom.css (.akpp-note, .um-sec rhythm,
   .wc-compact, .wc-tight, .mobile-hide). Colors ride on var(--main-color) so the site brand blue applies. */

/* ========== Why Choose Block (.wc-block) ========== */
.wc-block {
    font-family: Inter, Arial, sans-serif;
    color: #262626;
}
.wc-heading {
    margin: 18px 0 10px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: #262626;
}
.wc-callout {
    margin: 8px 0;
    padding: 8px 10px;
    background: #f7f7f7;
    border-left: 6px solid var(--main-color);
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-list {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #262626;
}
.wc-item {
    margin-bottom: 10px;
    padding-left: 0;
}
.wc-item:last-child {
    margin-bottom: 4px;
}
.wc-dot {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
}
.wc-item-content strong {
    font-weight: 600;
}
.wc-cta {
    margin: 16px 0 12px;
    padding: 12px 8px;
    background: #f7f7f7;
    text-align: center;
    border-radius: 8px;
}
.wc-cta-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #262626;
}
.wc-cta-sub {
    margin: 0;
    font-size: 14px;
    color: #555;
}
.wc-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
    flex-wrap: nowrap;
}
.wc-btn {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700 !important;
    padding: 12px 6px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}
.wc-btn-phone {
    background: var(--main-color) !important;
    color: #fff !important;
}
.wc-btn-phone svg {
    flex-shrink: 0;
}
.wc-btn-tg {
    border: 2px dashed var(--main-color) !important;
    background: transparent;
    color: var(--main-color) !important;
    padding: 12px 10px;
}
.wc-btn-tg svg {
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .wc-heading {
        font-size: 20px;
    }
    .wc-btn {
        font-size: 14px;
        padding: 12px 25px;
    }
}

/* --- accent plaque + section rhythm (from MB custom.css) --- */
  .akpp-note{
    margin:12px 0 10px; padding:10px 12px;
    background:#f7f7f7; border-left:6px solid var(--main-color);
    border-radius:8px;
  }
  .akpp-lead{ margin:0; font-weight:800; }
  /* 04.06.2026 — unified accent section heading: reuses the shared .akpp-note card
     (same component as #STANDARD_BLOCK(strong) and the homepage). Landing pages
     /atf/, /atf/dct/, /transfer-case/ use <h2 class="akpp-note">.
     Typography matched 1:1 to the strong block's .akpp-lead/<strong> (BMW Type Next TT sans,
     16px, 700, #262626) so the heading looks identical to the homepage card —
     NOT the big serif heading default. Override the theme h2 serif font explicitly. */
  h2.akpp-note{
    font-family: Inter, Arial, sans-serif !important;
    font-size:16px; line-height:1.5; font-weight:700; color:#262626; text-align:left;
  }

  /* 04.06.2026 — uniform 15px vertical rhythm between landing sections.
     Wrap each top-level section in <div class="um-sec">. flow-root contains the
     section's internal margins; first/last child margins reset so the section box
     hugs its content; exactly 15px between consecutive sections (no margin collapse,
     no spacer blocks needed). Reusable across landings for a uniform structure. */
  .um-sec{ display:flow-root; }
  .um-sec + .um-sec{ margin-top:15px; }
  /* !important to beat inline margins inside std-blocks (e.g. otz CTA margin:12px 0) */
  .um-sec > :first-child{ margin-top:0 !important; }
  .um-sec > :last-child{ margin-bottom:0 !important; }
  /* zero the standard blocks' own inner edge margins so the visible content sits exactly
     15px from the neighbour section: priv box (#spec inline margin:8px 0),
     corp heading (#corps inline margin-top:20px). */
  .um-sec > #spec{ margin-top:0; margin-bottom:0; }
  .um-sec #corps{ margin-top:0 !important; }

/* ===== 14.06.2026 — homepage УТП (why_choose 46613) mobile compaction — ported from test2 ===== */
/* why_choose УТП — compact mobile + semantic headings.
   Final locked values (validated test2 13.06.2026, top→buttons 554–568px).
   Append to custom.css. Scoped to .wc-compact = homepage block 46613 ONLY
   (post 90525 /ac/ /engine-bay/ stays plain .wc-block, untouched).
   Prod: bump custom.css 1.1.12 -> 1.1.13. */
/* 🔴 03.08.2026 — «BMW Type Next TT» (донорский стек) здесь не подключён (usWeightClass 400,
   no bold file anywhere on the server), so font-weight:700 was a no-op: the УТП
   subheads measured EXACTLY the same width at 400 and at 700 (207.46px both) and
   read as plain body text (owner: «выделение жирным подзаголовков малозаметно»).
   Bold now comes from Inter, which the theme already self-hosts in Regular+Bold
   (main.css @font-face, assets/fonts/Inter/) and already uses in the desktop header.
   BMW Type Next TT stays as the fallback for anything Inter lacks. */
.wc-compact .wc-item-title{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.3;font-weight:700;color:#111;margin:0 0 2px}
.wc-compact .wc-item-text{color:#262626;font-weight:400;margin:0}
.wc-compact h2.akpp-note{margin:0 0 12px;line-height:1.3}
/* same dead-bold story as .wc-item-title above — the plate heading and the CTA line
   would otherwise look LIGHTER than the subheads under them. !important because the
   global h2.akpp-note font-family rule carries !important. */
.wc-compact h2.akpp-note{font-family:Inter,Arial,sans-serif !important;font-weight:700}
.wc-compact .wc-cta-title{font-family:Inter,Arial,sans-serif;font-weight:700;margin:0;text-align:center}
@media (max-width:699px){
 .wc-compact .wc-item-text{font-size:15px;line-height:1.35}
 .wc-compact .wc-item{margin-bottom:6px}
 .wc-compact .wc-item:last-child{margin-bottom:0}
 .wc-compact .wc-list{margin:0}
 .wc-compact .wc-cta-title{font-size:12.5px;line-height:1.3}
 .wc-compact .wc-cta{margin:8px 0 6px;padding:8px 12px}
 .wc-compact .wc-buttons{margin:8px 0 0}
 .wc-compact h2.akpp-note{margin:0 0 10px;padding:10px 12px;line-height:1.25}
}

/* mobile-hide hero banner: hide the desktop H1 hero on phones (global; replaces fragile per-page inline <style> that kept getting stripped). 2026-06-14 */
@media (max-width:768px){.mobile-hide{display:none !important}}

/* wc-tight: extra-compact УТП (opt-in via .wc-tight on .wc-block) — ~30-45% tighter vertical gaps than .wc-compact, to fit УТП+CTA+buttons closer to one mobile screen. Overrides .wc-compact (same specificity, later source). 2026-06-14 */
@media (max-width:699px){
 .wc-tight h2.akpp-note{margin:0 0 6px;padding:7px 12px;line-height:1.2}
 .wc-tight .wc-item{margin-bottom:3px}
 .wc-tight .wc-item-title{line-height:1.18;margin-bottom:1px}
 .wc-tight .wc-item-text{line-height:1.22}
 .wc-tight .wc-cta{margin:6px 0 3px;padding:6px 12px}
 .wc-tight .wc-cta-title{line-height:1.2}
 .wc-tight .wc-buttons{margin:5px 0 0}
}

/* 26.06.2026 — um («галочки») УТП: vertical gap between checkmark items so they don't
   glue together (parity with .wc-compact .wc-item ≈10px). Targets ONLY the direct <p>
   bullets that follow the akpp-note heading inside an um-sec. wc-compact uses .wc-list
   (no direct <p> siblings of akpp-note) and ТО uses .uo-to-utp — neither is matched.
   The note plaque (.um-plate > p) is nested, not a sibling, so it is untouched. */
.um-sec > h2.akpp-note ~ p { margin: 0 0 10px; }


/* ── Cases-block section headings — mirror MB .editor h2 proportions (10.07.2026,
   owner: «интервалы как у мерседеса»). BMW main.css has no .editor h2 rules, so
   «Примеры работ» rendered 24px with no bottom margin and looked glued to the
   28px case title. Scoped to the cases headings only — BMW global h2 untouched. ── */
h2.cs-heading{font-size:50px;line-height:60px;text-align:left;margin:0 0 20px;letter-spacing:0}
h2.cs-case-heading{margin-bottom:20px}
@media (max-width:699px){
  h2.cs-heading{font-size:26px;line-height:40px;margin-bottom:18px}
}

/* ── House menu item: hidden in the BURGER only (10.07.2026, owner 16:29: MB's
   horizontal ribbon DOES show the house — earlier «no house on mobile» call was
   burger-only). Ribbon item (.scroll-menu-list-item--um-home-item) stays visible.
   display:none avoids the hidden-item phantom-margin trap. ── */
@media (max-width:768px){
  .nav-item--um-home-item{display:none!important}
}

/* ── Hero title ACF↔template swap (= MB custom.css 18.06 rules; needed by the
   custom_test2.php hero-H1 port, 10.07.2026): wide desktop shows the ACF <h2>,
   narrow desktop windows swap to the template-H1 div; on mobile UA PHP renders
   a real <h1> server-side instead (neither of these two is output). ── */
.um-hero-tpl{display:none}
@media (max-width:768px){.um-hero-acf{display:none}.um-hero-tpl{display:block}}


/* ── Ритм секций: 15px даже через чужеродного соседа (24.07.2026) ──
   `.um-sec + .um-sec` работает только для СМЕЖНЫХ секций. Блок отзывов (SmartWidgets
   `.sw-app`) вставляется скриптом МЕЖДУ секциями и разрывает цепочку — следующий за ним
   .um-sec (кейсы) прилипал к отзывам в 0px. Правило ниже задаёт тот же 15px любому
   .um-sec в контентной колонке, кроме первого; margin не суммируется с `.um-sec + .um-sec`
   (одно и то же свойство), поэтому существующие 15px не задваиваются. ── */
.editor .wrapper > .um-sec:not(:first-child) { margin-top: 15px; }
/* Пустая секция (например #CASES# на лендинге, у которого ещё нет кейсов) не должна
   съедать 15px пустоты — сама секция схлопывается, а как только кейсы появятся,
   она отрисуется снова без правок контента. */
.editor .wrapper > .um-sec:empty { display: none; }

@media (max-width: 768px) {
  /* Мобильный первый экран (.section-main — фото/видео шапки) стыковался с контентом
     в 0px: .editor не является .um-sec, поэтому ритм 15px на этот стык не распространялся.
     На ПК стыка нет (.section-main не рендерится), поэтому правило только для мобилы.
     Соседний селектор `+` не годится: между секциями тема печатает <style>, поэтому
     берём общий соседний `~` (на странице ровно один .editor). */
  .section-main ~ .editor { margin-top: 15px; }
}

/* Блок «Мы проверим» на главной — не .um-sec (живёт в post_content со своим padding),
   поэтому в ритм 15px не попадал и стыковался с кейсами в 0px. Свой верхний padding
   обнуляем, чтобы внешний отступ был ровно 15px, как между остальными секциями. */
.editor .wrapper > .checklist-section { margin-top: 15px; padding-top: 0; }


/* Единый ритм 15px между блоками на телефоне (владелец, 25.07.2026: «эталон
   отступов — везде одинаковые, чтобы не было где-то больше, а где-то меньше»).
   Ленточные секции темы (.team, .contacts) несут собственные вертикальные
   паддинги и внутренние margin'ы слайдера, из-за которых воздух перед «Наша
   команда» был ~50px, а перед «Схема проезда» ~72px — при 15px между .um-sec.
   Обнуляем их и задаём один и тот же межблочный margin. Только ≤768px: на ПК
   ритм секций у темы свой, его не трогаем. */
@media only screen and (max-width: 768px) {
  section.team { padding-top: 0; }
  section.team > .wrapper { padding-top: 0; }
  section.team .team__title { margin-top: 0; }
  section.breadcrumbs { margin-bottom: 0; }
  #cont { padding-bottom: 0; }
  section.team, section.questions, section.contacts, footer.footer { margin-top: 15px; }
  /* 🔴 НЕ обнулять низ .team: карточка сотрудника (.slide-info) — position:absolute
     и свисает ниже слайдера примерно на 63px. Нижний паддинг секции (35.6px) плюс
     margin-bottom слайдера (36.6px) — это резерв ПОД неё, а не воздух: реального
     зазора там 9px. Обнулил 25.07.2026 — схема проезда наехала на сотрудника.
     Поэтому низ оставляем темовский, а следующему блоку добавляем только 6px. */
  section.team + * { margin-top: 6px; }
}

/* «Корпоративным клиентам» под картой: карточка сотрудника несёт margin-bottom 30px,
   он выходит наружу секции (схлопывание полей) и превращает 15px до подвала в 30px. */
.um-corp-after-map .employee-block { margin-bottom: 0; }

/* Единый ритм 15px между ВСЕМИ блоками контента, на всех страницах и обеих ширинах
   (владелец, 25.07.2026: «проверь все страницы, отступы надо настроить глобально»).
   До этого зазор задавала пара `.um-sec + .um-sec`, а всё, что попадало между ними
   голым (заголовок «Отзывы» из стандартного блока, абзацы и блоки старых страниц),
   несло собственные margin'ы: 0, 2, 18, 20 — отсюда «приклеен к кнопкам выше».
   Теперь низ у всех прямых детей редактора обнулён, а зазор задаёт только верх. */
.editor > .wrapper > * { margin-bottom: 0 !important; }
.editor > .wrapper > * + * { margin-top: 15px !important; }
/* Спейсеры Гутенберга на старых страницах ломают ритм собственной высотой. */
.editor > .wrapper > .wp-block-spacer { display: none; }

/* Тот же ритм 15px на компьютере (владелец, 25.07.2026: «глобально»). До этого
   между строкой видео и контентом было 50px (margin-top первого блока), между
   контентом и «Наша команда» 0, перед «Схема проезда» 75px, у страницы контактов
   34px и вплотную к подвалу. Карточка сотрудника здесь свисает ниже слайдера
   всего на 4px — резерв под неё оставлен паддингом секции, см. мобильный блок. */
@media only screen and (min-width: 769px) {
  .editor > .wrapper > :first-child { margin-top: 0 !important; }
  section.breadcrumbs { margin-bottom: 0; }
  #cont { padding-bottom: 0; }
  section.team .team__slider { margin-bottom: 0; }
  section.team { padding-bottom: 4px; }
  section.editor, section.team, section.questions, section.contacts, footer.footer { margin-top: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Отдельные страницы кейсов (ТЗ 27.07.2026)
   Тизер на сводных страницах + сама страница кейса + список на /cases/.
   Кейс без опубликованной страницы ни одного из этих классов не получает, поэтому
   вся существующая вёрстка кейсов не затронута.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Тизер ──
   🔴 30.07.2026, владелец (по своему макету): титульное фото слева РОВНО такого же
   размера, как у обычного кейса на главной, а направо уходит всё остальное —
   заголовок, цена с датой, анонс, ссылка и ряд миниатюр. Это ОТМЕНЯЕТ вариант
   29.07.2026 (узкая колонка фото 280px, заголовок над карточкой), который сам
   отменял утренний вариант с одной статичной фотографией 190px.
   Телефон = поведение по умолчанию (заголовок, цена, фото, миниатюры, текст,
   ссылка — порядок как был), ПК = @media 601px (брейкпоинт слайдера).
   Текстовый блок называется .cs-tbody, а НЕ .cs-content: cases-slider-v18.js
   инлайном равняет высоту .cs-content по высоте фото и сплющил бы описание. */
.cs-teaser .cs-tcard { display: block; }
/* Колонка-флекс: ряд миниатюр печатается в конце разметки, а стоять должен внизу
   правой колонки — это делает auto-отступ в десктопном блоке ниже.
   На ТЕЛЕФОНЕ ряда миниатюр нет вовсе: тема гасит .cs-bottom-row правилом
   `display:none` в @media(max-width:600px), и это поведение кейсов не менялось —
   поэтому переносить его тут некуда и незачем. */
.cs-teaser .cs-tbody { display: flex; flex-direction: column; margin-top: 10px; }
/* Ссылка внутри флекс-колонки становится блоком: без этого кликабельной была бы
   вся ширина колонки, а не сама строка. */
.cs-teaser .cs-tbody .cs-readmore { align-self: flex-start; }
.cs-teaser .cs-text--teaser > *:first-child { margin-top: 0; }
.cs-teaser .cs-text--teaser > *:last-child { margin-bottom: 0; }
/* Анонс в двух вариантах (владелец 30.07.2026): короткий для телефона, длинный для
   компьютера. Печатаются оба, показывается один. Когда длинный не заполнен,
   case-single.php печатает ОДИН блок без этих классов — он виден везде. */
.cs-teaser .cs-text--tea-d { display: none; }

/* Заголовок тизера — ссылка на страницу кейса. Цвет наследуется: марочным синим
   он спорил бы с ценой, которая стоит тут же под ним и уже синяя. */
.cs-case-heading--teaser a { color: inherit; text-decoration: none; }
.cs-case-heading--teaser a:hover { color: #103a71; }

@media (min-width: 601px) {
  /* Сетка, а не флекс: справа ДВА блока друг под другом (заголовок с ценой и всё
     остальное), а слева одно фото на всю их высоту — флексом такое пришлось бы
     собирать лишней обёрткой.
     Колонка фото 50% при промежутке 24px — это ровно геометрия обычного кейса
     (`.cs-media{flex:0 0 50%}` + `gap:24px` у .cs-card в cases-slider-v42.css),
     поэтому фото в тизере и фото в кейсе на главной одного размера. Владелец
     30.07.2026: «картинку титульную такого же размера оставить большого, как в
     кейсах на главной». */
  .cs-teaser .cs-tcard {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
  }
  /* max-width снимаем: общее правило .cs-media{max-width:50%} считает проценты от
     всей карточки, а не от своей колонки, и урезало бы фото ещё раз. */
  .cs-teaser .cs-media { grid-column: 1; grid-row: 1 / span 2; align-self: start; max-width: none; }
  .cs-teaser .cs-thead { grid-column: 2; grid-row: 1; min-width: 0; }
  /* 🔴 Правая колонка кончается на нижней кромке САМОГО СНИМКА, а не подписи под
     ним (владелец 31.07.2026: «нижний край титульной картинки совпадает с нижним
     краем минифоток справа»). Раньше колонка тянулась до низа всей медиа-колонки,
     и ряд миниатюр висел на 47px ниже снимка — ровно на высоту подписи.
     height:0 + min-height:100% — колонка не участвует в расчёте высоты строк грида
     (иначе длинный анонс растягивал бы карточку), а получает готовую высоту строки;
     нижний отступ = блок подписи: 8px отступа сверху + 2.8em при кегле 14px.
     Пол в max() держит две строки анонса: если снимок ниже, чем нужно этим строкам
     (узкое окно), карточка растёт вниз, как было до правки, а не режет текст.
     Первый min-height — запасной для браузеров без max(): без него колонка осталась
     бы нулевой высоты и спрятала миниатюры совсем. */
  .cs-teaser .cs-tbody {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 0;
    height: 0;
    min-height: 231px;
    min-height: max(100%, 231px);
    padding-bottom: calc(14px * 2.8 + 8px);
    overflow: hidden;
  }
  /* Миниатюры возвращаются в конец правой колонки и прижимаются к её низу:
     auto-отступ сверху сажает ряд на нижнюю кромку снимка. Ссылка и ряд миниатюр
     не сжимаются — место под них освобождает только анонс. */
  .cs-teaser .cs-tbody .cs-readmore { flex: none; }
  .cs-teaser .cs-tbody > .cs-bottom-row { order: 0; flex: none; margin-top: auto; margin-bottom: 0; padding-top: 10px; }
  /* Анонс режется по целым строкам (счётчик --tea-lines ниже), а flex-shrink —
     страховка: если места оказалось меньше расчётного, колонка всё равно не
     вылезет за кромку снимка. */
  .cs-teaser .cs-tbody .cs-text--teaser { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  .cs-teaser .cs-tbody .cs-text--teaser > * {
    display: -webkit-box;
    -webkit-line-clamp: var(--tea-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Заголовок тизера — не длиннее двух строк: третья строка съедала бы анонс и
     опускала ряд миниатюр ниже снимка. Полное название — на странице кейса. */
  .cs-teaser .cs-case-heading--teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Подпись к фото на компьютере снова ВИДНА (правила `display:none` больше нет):
     в макете владельца она стоит под большой фотографией. Прятали её только из-за
     узкой колонки 280px, которой больше нет.
     Анонс: на компьютере длинный вместо короткого. */
  .cs-teaser .cs-text--tea-m { display: none; }
  .cs-teaser .cs-text--tea-d { display: block; }
  /* 🔴 Подпись к фото — РОВНО две строки (владелец 30.07.2026: «при листании лента
     слайдов дёргается вниз/вверх»). У каждого слайда своя подпись, и её высота
     гуляла 20/39/59px (одна, две, три строки) — вместе с ней прыгала вся карточка
     375/395/415px, а с ней и ряд миниатюр, прижатый к низу правой колонки. У
     обычного кейса этой болезни нет: там скрипт после каждого слайда пересчитывает
     высоту текстовой колонки, а у тизера пересчитывать нечего.
     Высота ЖЁСТКАЯ, а не min-height: минимум чинит только короткие подписи, а
     дёргалось и на длинных. 2.8em = две строки при line-height 1.4, поэтому правило
     переживёт смену кегля. align-items:flex-start — иначе одна строка повисла бы по
     центру двухстрочной коробки, с зазором под фотографией.
     Текст не теряется: подпись остаётся в разметке целиком (её читают поиск и
     озвучка), обрезается только показ, полная версия — на странице кейса. */
  .cs-teaser .cs-title { height: 2.8em; align-items: flex-start; overflow: hidden; }
  .cs-teaser .cs-cap-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Сколько строк анонса помещается над нижней кромкой снимка. Высота снимка = 9/16
   от половины ширины карточки, то есть растёт вместе с окном; из неё вычтены
   заголовок в две строки, цена, ссылка и ряд миниатюр. Пороги подняты с запасом:
   лишняя строка опустила бы миниатюры ниже снимка, а недостающая — нет, пустоту
   забирает auto-отступ над рядом. Замеры на 1311/1440/1600/1920. */
@media (min-width: 1440px) { .cs-teaser { --tea-lines: 3; } }
@media (min-width: 1550px) { .cs-teaser { --tea-lines: 4; } }
@media (min-width: 1655px) { .cs-teaser { --tea-lines: 5; } }
@media (min-width: 1760px) { .cs-teaser { --tea-lines: 6; } }

/* «Читать полностью →» — ссылка, а не кнопка: это переход на страницу, и он должен
   читаться как ссылка (и в поиске, и вспомогательными технологиями).
   display НЕ flex: во флекс-контейнере текст и стрелка становятся отдельными
   элементами и пробел между ними схлопывается — стрелка приклеивалась к слову.
   Подчёркивание ровно одно: тема уже подчёркивает ссылки, а собственная нижняя
   граница давала вторую, более длинную полосу под текстом (владелец, 27.07.2026). */
.cs-readmore {
  display: inline;
  margin-top: 12px;
  font-weight: 600;
  font-size: 15px;
  /* 2.3 — владелец 29.07.2026: отбивает ссылку от последней строки описания. */
  line-height: 2.3;
  color: #103a71;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: 0;
  transition: color .15s ease;
}
.cs-readmore:hover { color: #0c2c56; }
.cs-readmore:focus-visible { outline: 2px solid #103a71; outline-offset: 3px; }

/* ── Аккордеон под слайдером тизера (ТЗ 18.08.2026) ──
   Задача — не растить высоту ленты тизеров на телефоне: в закрытом виде от анонса
   и ссылки остаётся ОДНА строка с подписью и треугольником. Подпись выбирает
   редактор в карточке кейса из справочника «Заголовки аккордеона».
   🔴 На КОМПЬЮТЕРЕ аккордеона нет (решение владельца 18.08.2026): правая колонка
   тизера жёсткой высоты и всё равно кончается на нижней кромке снимка, поэтому
   спрятанный анонс оставил бы там пустоту. Разметка при этом ОДНА на все ширины:
   строку-кнопку гасим, а тело печатаем display:contents — анонс и ссылка остаются
   теми же элементами колонки .cs-tbody, что и до правки, поэтому вся десктопная
   геометрия (обрезка анонса по строкам, прижатый к низу ряд миниатюр) не меняется.
   По этой же причине правила десктопного блока обращаются к анонсу и ссылке
   ПОТОМКАМИ, а не прямыми детьми .cs-tbody. */
.cs-tacc-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 100%; margin: 0; padding: 10px 0;
  background: none; border: 0; border-top: 1px solid #ececec;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: #1a1a1a; text-align: left; cursor: pointer;
}
.cs-tacc-head:focus-visible { outline: 2px solid #103a71; outline-offset: 2px; }
/* Треугольник ровно тот же, что у подписи к фото (.cs-cap-tri): у всех раскрывашек
   кейса один язык. */
.cs-tacc-tri {
  flex: 0 0 auto; display: inline-block; width: 0; height: 0;
  border-top: 6px solid #103a71; border-left: 5px solid transparent; border-right: 5px solid transparent;
  transition: transform .2s ease;
}
.cs-tacc-head.open .cs-tacc-tri { transform: rotate(180deg); }
.cs-tacc-body { margin-top: 6px; }
.cs-tacc-body[hidden] { display: none; }

@media (min-width: 601px) {
  .cs-teaser .cs-tacc-head { display: none; }
  .cs-teaser .cs-tacc-body,
  .cs-teaser .cs-tacc-body[hidden] { display: contents; }
}


/* ── Страница кейса ──
   Текстовой колонки .cs-content в этом виде нет вовсе (case-single.php), поэтому
   .cs-card остаётся с одним ребёнком. Возвращаем блочный поток и снимаем
   десктопное ограничение .cs-media{flex:0 0 50%;max-width:50%} — иначе слайдер
   занимал бы половину ширины, а справа была бы пустота. Кейс идёт во всю ширину
   контейнера (владелец, 27.07.2026: «на ПК делать всё-таки на всю ширину кейс»);
   прежний собственный потолок 820px снят. */
.cs-page .cs-card { display: block; }
.cs-page .cs-media { max-width: 100%; }

.cpage-desc { max-width: 100%; }
.cpage-desc .cs-text { margin-top: 0; }
.cpage-desc .cs-text + .cs-text { margin-top: 14px; }
/* На компьютере длинный текст обычного кейса живёт в .cs-long-wrap (grid-свёртка);
   здесь он выводится напрямую, без обёртки, поэтому свёртку глушить не нужно. */

/* Специфичность нарочно 0,2,0: в main.css есть `.editor h1{font-size:4vw}` (0,1,1),
   и одиночный класс её не перебивает — порядок подключения тут не помогает. */
.cpage .cpage-h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
  color: #1c1c1c;
}
@media only screen and (max-width: 768px) {
  .cpage .cpage-h1 { font-size: 24px; }
  .cs-page .cs-media { max-width: 100%; }
}

/* ── Блок «что дальше» под кейсом ──
   Страница кейса ничего не продаёт и никуда не ведёт: ленты разделов на ней нет.
   Три выхода обратно в воронку — запись, соседние работы по этому же кузову,
   страница услуги (доска 29.07.2026). */
.cnext { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(28, 28, 28, .1); }
.cnext-cta { margin: 0 0 26px; }
/* Класс кнопки темы красит фон через --main-color, а он в этой теме достался от
   донора ЗЕЛЁНЫМ (main.css) — марочный синий пишем явно, не через переменную. */
.cnext .cnext-btn {
  background: #103a71;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 14px 28px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 2px;
  transition: background .15s ease;
}
/* Класс темы `md-main-color-btn` рассчитан на кнопку из ДВУХ детей — текст и
   стрелка: `display:flex; justify-content:space-between` + жёсткая ширина
   `28.65vw` (main.css). Здесь ребёнок один, поэтому кнопка была вчетверо шире
   надписи (замер 433px на текст ~250px), а надпись прижата к левому краю
   (замер отступов 28/156). Ширину отдаём содержимому (inline-flex, иначе
   flex-контейнер блочный и всё равно тянется на всю строку), надпись по центру.
   На телефоне ширина остаётся 100% — там кнопка во всю строку задумана.
   Правка одна на два сайта (владелец, 30.07.2026, Мерседес + БМВ). */
.cnext .cnext-btn { display: inline-flex; width: auto; justify-content: center; }
.cnext .cnext-btn:hover { background: #0c2c56; }
.cnext .cnext-btn:focus-visible { outline: 2px solid #103a71; outline-offset: 3px; }

/* 21.08.2026, владелец: «заголовок "Другие работы" очень мелкий, сопоставим с
   заголовками кейсов, давай как обычные заголовки у нас идут». Было 22px узким
   фирменным начертанием — при 17px Arial у названий кейсов это читалось как один
   уровень. Теперь ровно спецификация обычного заголовка раздела сайта
   (h2.cs-heading / .editor h2): 50px/60px на ПК, 26px/40px ниже 700px. */
.cnext-h {
  font-size: 50px !important;
  font-weight: 600 !important;
  line-height: 60px !important;
  margin: 0 0 20px !important;
  color: #1c1c1c;
}
.cnext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cnext-card { min-width: 0; }
.cnext-ph { display: block; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.cnext-ph img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cnext-t { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
.cnext-t a { color: #1c1c1c; text-decoration: none; }
.cnext-t a:hover { color: #103a71; }
.cnext-price {
  font-family: 'Hyundai', Inter, Arial, sans-serif;
  font-size: 17px;
  color: #103a71;
  margin: 0;
  line-height: 1.1;
}
/* С 10.08.2026 плиток до шести (было три), то есть на ПК два ряда по три. На
   планшете три колонки дают карточку уже 200px — заголовок работы туда не влезает,
   поэтому промежуточный шаг в две колонки. */
@media only screen and (max-width: 900px) {
  .cnext-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
  .cnext-grid { grid-template-columns: 1fr; gap: 18px; }
  .cnext .cnext-btn { width: 100%; }
}
@media only screen and (max-width: 699px) {
  .cnext-h {
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    margin-bottom: 18px !important;
  }
}

/* ── Страница кейса: только хлебные крошки, без строки меню ──
   Владелец, 27.07.2026: «меню скрывать, там нечего смотреть и листать, оставить
   хлебные крошки только». Заодно снимает горизонтальную прокрутку 18px: её давало
   выпадающее подменю «Популярные услуги», уходившее за правый край окна.
   Высота шапки в теме фиксированная (main.css `.header{height:11.77vw}`) и включает
   резерв под эту строку, поэтому высота здесь становится по содержимому — иначе на
   месте меню осталась бы пустая полоса. */
/* 🔴 30.07.2026 владелец сняла исключение для телефона («и на мобильном остался
   бургер»): убираем и кнопку бургера, и саму выезжающую панель. Прежнее
   возражение («без бургера страница кейса — тупик», принято 29.07.2026) ОТМЕНЕНО
   решением владельца; выход со страницы дают хлебные крошки, ссылки внутри кейса,
   блок «что дальше» и подвал. Паритет с Mercedes (`cases-slider-v42.css`).
   Панель и кнопка — РАЗНЫЕ элементы: `nav.header__nav` на ПК это строка меню, а
   на телефоне полноэкранная шторка (main.css: position:fixed + `.header.open`);
   кнопка — `.header__btn-wrap`. Прячем обе и на всех ширинах. */
body.cpage-body nav.header__nav,
body.cpage-body .header__btn-wrap { display: none; }
body.cpage-body header.header { height: auto; padding-bottom: 14px; }

/* Разделитель крошек — шеврон вместо палочки (владелец 10.08.2026). В теме это
   ::before с размерами палочки (width/height/background-color в vw), поэтому все
   три свойства надо погасить, иначе глиф получит нулевую ширину и не отрисуется.
   Отступы НЕ трогаем — ритм полосы остаётся тот же, что был у палочки.
   Размер глифа = размер ссылки крошки × 1.3: «›» рисуется примерно вполовину
   кегля, и в размер ссылки он выглядел бы мельче прежней палочки.
   :first-child::before в теме погашен display:none — первую крошку не заденет.
   Правило точечное (body.cpage-body): крошки лендингов остаются как были. */
body.cpage-body .breadcrumbs__item::before {
  content: "\203A";
  width: auto;
  height: auto;
  background-color: transparent;
  color: #8C8C8C;
  font-size: 0.9479166667vw;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
  body.cpage-body .breadcrumbs__item::before { font-size: 4.0625vw; }
}


/* ── Компактный УТП на странице кейса (владелец 10.08.2026) ──
   Блок живёт ВНУТРИ текста кейса (после «Полезной информации», перед списками
   ссылок), а не в ритме секций .um-sec, который на странице кейса не работает —
   поэтому отступы задаёт своя обёртка. Само наполнение (.wc-block/.wc-compact,
   плашка .akpp-note, кнопки .wc-buttons) — та же семья правил, что на лендинге:
   один и тот же вид блока на обеих поверхностях, без второго набора стилей. */
.cs-utp { margin: 28px 0 4px; }
.cs-utp .wc-block { margin: 0 !important; }
@media only screen and (max-width: 768px) {
  .cs-utp { margin: 22px 0 4px; }
}

/* ── Подвал прижат к низу окна ──
   На короткой странице (список из одного кейса) подвал висел посередине экрана.
   В потоке у body ровно четыре ребёнка: шапка, крошки, контент, подвал — всё
   остальное (попапы, виджеты, скрипты) вне потока, поэтому колонку можно растянуть
   на высоту окна и отдать остаток контенту. */
body.cpage-body { display: flex; flex-direction: column; min-height: 100vh; }
body.cpage-body > footer.footer { margin-top: auto; }

/* Воздух перед подвалом. Блок «что дальше» упирался в тёмную полосу подвала
   вплотную (владелец 10.08.2026): у шаблона страницы кейса нет нижнего отступа,
   а на лендингах его даёт последняя секция. Берём тот же зазор, что и там, — 48px,
   чтобы страница кейса не выбивалась из ритма сайта. */
body.cpage-body section.editor.cpage { padding-bottom: 48px; }
@media only screen and (max-width: 768px) {
  body.cpage-body section.editor.cpage { padding-bottom: 32px; }
}

/* ── Прыжки при скролле: лента-меню внутри шапки ──
   Тема при скролле разворачивает мобильную ленту-меню (`#sticky-menu`) ВНУТРИ
   <header>. Пока высота шапки фиксированная (main.css `.header{height:11.77vw}`),
   это незаметно — лента укладывается в резерв. Здесь высота шапки по содержимому,
   поэтому шапка вырастала на 95px посреди скролла: документ становился выше, потом
   ниже, и страница прыгала вверх-вниз. На странице кейса эта лента и не нужна —
   в ней те же ссылки-якоря, которых на странице кейса нет (владелец 27.07.2026:
   «нечего смотреть и листать»). Прячем вместе со стрелками её прокрутки.
   Селектор с id перебивает `.mobile-scroll-menu.visible` без !important. */
body.cpage-body #sticky-menu,
body.cpage-body .scroll-arrow { display: none; }

/* ── Моб. страница кейса: высота шапки без ленты-меню ──
   🔴 Бургера здесь больше нет (решение владельца 30.07.2026, отменяет решение от
   29.07 — см. правило выше). Этот блок про другое: про пустую полосу, которую
   давала мобильная высота внутренней шапки (main.css `.header-v2
   {height:17vw}` в @media 768px) — резерв под ленту-меню и под логотип, который
   выше своего контейнера (`.logo-container-v2{height:8vw}` против картинки 11.8vw).
   Поэтому не просто auto у `.header-v2`, а ещё и контейнер логотипа по картинке —
   иначе логотип вылезал бы из шапки на крошки. Всё в vw, как и сам логотип, так
   что пропорция держится на любой ширине телефона. */
@media (max-width: 768px) {
  body.cpage-body .header-v2 { height: auto; }
  /* 🔴 10.08.2026: контейнер логотипа снова по содержимому. Раньше он был жёстко
     11.8vw (по картинке), потому что текст в две строки (26px + 14px = 44.8px)
     всегда был НИЖЕ картинки, а `margin-bottom:8vw` у текстового логотипа при
     auto наливал в шапку 31px пустоты. Теперь строк три (добавлена подпись
     «Сервис Hyundai в Москве») — текст 61.8px, и на узких телефонах он ВЫШЕ картинки
     (46px на 390px), то есть при жёстких 11.8vw он вылезал бы из шапки на крошки.
     Пустой margin гасим отдельным правилом ниже. */
  body.cpage-body .logo-container-v2 { height: auto; }
  body.cpage-body .logo-text-v2 { margin-bottom: 0; }
  /* Воздух снизу равен верхнему (2vw отступ шапки + 2vw отступ .header-v2 = 4vw):
     с тремя строками текст стал ниже картинки, и прежние 1vw+6px читались как
     «строка отзывов упирается в край» (та же правка, что на Мерседесе). */
  body.cpage-body .header-v2 { padding-bottom: 0; }
  body.cpage-body header.header { padding-bottom: 4vw; }
  /* На телефоне шапка темы `position:fixed`, а место под неё держит отступ сверху
     у body (main.css `body{padding-top:25vw}` в @media 768px), поэтому резерв
     обязан повторять высоту шапки. Сумма по частям: 1.9875vw её собственный
     отступ сверху + 2vw отступ .header-v2 + 4vw отступ снизу = 7.9875vw, плюс
     САМОЕ ВЫСОКОЕ содержимое ряда. И картинка (11.8vw), и текст (61.8px, три
     строки в px) претендуют на это место, а перевес меняется около 525px ширины —
     чистого vw-выражения тут не существует, поэтому max(). Меняешь размер строк
     или картинки — пересчитай 62px. */
  body.cpage-body { padding-top: calc(7.9875vw + max(11.8vw, 62px)); }
  /* Крошки слева, по краю заголовка. Тема на телефоне центрует ряд
     (`main.css @media(max-width:768px) .breadcrumbs .wrapper{justify-content:center}`):
     пока цепочка была длиннее строки, центрирование ничего не двигало, а 10.08.2026
     из неё убрали название кейса — и короткий ряд уехал в середину. Правило точечное:
     на лендингах BMW крошки остаются как были. */
  body.cpage-body section.breadcrumbs .wrapper { justify-content: flex-start; }
}

/* ── Подпись «Сервис Hyundai в Москве» под названием компании (владелец, 10.08.2026) ──
   Страница кейса — самостоятельная точка входа из поиска и рекламы, шапка должна
   сразу отвечать «куда я попал». Разметку печатает header2.php по переменной
   $um_hd_tagline, её задаёт только template-case.php.
   Строка вторичная: 13px против 26px у названия и серая на белом фоне шапки BMW
   (на Мерседесе шапка чёрная, там серый светлее). Только телефон — на ПК тема
   прячет и строку отзывов `.main-v1`, шапка там из одного названия. */
body.cpage-body .um-hd-tagline { display: none; }
@media (max-width: 768px) {
  body.cpage-body .um-hd-tagline {
    display: block;
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15;
    color: #6b6b6b;
    white-space: nowrap;
    margin-bottom: 2px;
  }
}

/* 29.07.2026 — фото шильдика модели (.cs-model-badge): паритет с Mercedes.
   Рендер (cl_model_photo_html/cl_inject_model_photo) приехал на Hyundai вместе с
   cases-library, а ограничивающего правила не было ни в custom.css, ни тут —
   figure рисовалась в натуральную величину картинки (2560x1440).
   Правило взято дословно из MB custom.css:3391 (порт на прод MB 18.06.2026),
   spec — ДОКУМЕНТАЦИЯ/cases-model-photo.md: на компьютере шильдика НЕТ вовсе,
   на телефоне он во всю ширину колонки и не выше 200px. Владелец 29.07.2026
   сначала попросил показать его и на ПК, затем вернул решение к варианту MB. */
.cs-model-badge{display:none}
@media (max-width:768px){
  .cs-model-badge{display:block;margin:12px 0;border-radius:12px;overflow:hidden;line-height:0}
  .cs-model-badge img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain;border-radius:12px}
}

/* 30.07.2026 — «Наша команда»: карточка сотрудника как на Mercedes.
   Было: квадрат 19.27vw, внутри круглое фото (круг вырезан в самих файлах
   452x452, углы белые), имя и должность чёрным по белому ниже круга — на
   вертикальной фотографии так уже не работает. Стало (как MB main.css:12473):
   вертикаль 3:4 во всю карточку, скруглённые углы, имя и должность белым по
   затемнению снизу. Слайдер (.team__slider) уже 26.04vw — под квадратной
   карточкой там оставалась пустая полоса.
   🔴 Радиус пишем числом: --brad-regular в этой теме сломан (значение «vw»),
   var() дал бы 0. Число — то же, что даёт MB: 0.8229166667vw = 12.44px @1512. */
.team__slide { height: 26.0416666667vw; overflow: hidden; border-radius: 0.8229166667vw; }
.team__slider .swiper-slide { border-radius: 0.8229166667vw; overflow: hidden; }
.team__slide .slide-info {
  top: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.07) 23.2%, #000000 124.7%);
}
@media only screen and (max-width: 768px) {
  /* Радиус карточки на телефоне у темы свой (7.8125vw = 30.5px, как на MB), но
     правило выше стоит вне медиа-запроса и перебивало его 12px — повторяем. */
  .team__slide { height: 103.125vw; border-radius: 7.8125vw; }
}
/* 🔴 Нижние паддинги секции .team (блок «Единый ритм 15px» выше) НЕ трогаем.
   Пробовал обнулить, раз подпись больше не свисает ниже карточки: точки листалки
   лежат ниже слайдера на ~50px, и без паддинга секции они наезжают на «Схему
   проезда» (замер на 390px: перекрытие 23px). Резерв нужен именно под точки. */

/* ── «Корпоративным клиентам»: заголовок не должен раздвигать ритм (18.08.2026) ──
   Блок печатает <div id="corps"> с одним <h2> внутри. У обёртки нет ни паддинга, ни
   рамки, поэтому нижний margin заголовка (18px) выходит наружу и складывается с
   ритмом .editor > .wrapper > * + * — на телефоне стык до карточки сотрудника мерился
   18px вместо 15px. Обнуляем margin последнего потомка именно этой обёртки: правило
   узкое, соседние блоки не затрагивает (у .um-sec такое обнуление уже есть выше). */
.editor > .wrapper > #corps > :last-child { margin-bottom: 0; }

/* Верхний margin заголовка .wc-heading (18px) выходит за пределы .wc-block — у блока
   нет ни паддинга, ни рамки — и схлопывается с ритмом 15px, давая на стыке 18px.
   Обнуляем margin первого потомка блока: у .um-sec такое же обнуление есть выше. */
.editor > .wrapper > .wc-block > :first-child { margin-top: 0; }

/* ============================================================================
   UM hero-строка на ПК (.um-hero2, 18.08.2026) — «видео 2/3 + отзывы 1/3» под шапкой,
   над плашкой #H1#, на всех страницах шаблона custom_test2. Разметка: um_hero2_html()
   (utp-macro.php), вызов сразу после </header>. Паритет с Mercedes и BMW по структуре;
   отличия и их причины расписаны над функцией в utp-macro.php.
   🔴 Цвета пишем литералом: --main-color в assets/css/main.css этой темы всё ещё
   донорский зелёный #31B939, синий #103a71 печатает head.php.
   🔴 Шрифт — Hyundai (реально загруженный фейс) с Inter/Arial в запасе; MBCorpoS и
   daimlercac-regular на этом сайте объявлены, но @font-face у них нет ⇒ молча Arial.
   ============================================================================ */
.um-hero2 { margin: 15px 0; }
.um-hero2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 33.3333%, 500px);
    gap: 24px;
    align-items: start;
}
/* Отзывов нет (пустая таблица / все отфильтрованы) — видео во всю ширину, дыры не остаётся */
.um-hero2-solo .um-hero2-grid { grid-template-columns: minmax(0, 1fr); }
.um-hero2-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    background: #000;
}
.um-hero2-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.um-hero2-rev { min-width: 0; }
@media (max-width: 900px) {
    .um-hero2-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    /* Страховка: на мобильном UA секция и так не рендерится (um_hero2_html) */
    .um-hero2 { display: none; }
}

/* Карточка отзывов правой колонки. Наполняется НА СЕРВЕРЕ из своего сборщика отзывов,
   поэтому скелетона (как у BMW, где карточка ждёт данные вендора) здесь нет вовсе. */
@media (min-width: 769px) {
  .um-hero2-card {
    font-family: Hyundai, Inter, Arial, sans-serif;
    background: #f5f6f7;
    border-radius: 8px;
    padding: 20px;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #262626;
  }
  .um-h2c-head { display: flex; flex-direction: column; gap: 10px; }
  .um-h2c-rating { display: flex; align-items: baseline; gap: 8px; }
  .um-h2c-rating b { font-size: 28px; line-height: 1; font-weight: 700; }
  /* #FFCC00 — тот же цвет закрашенной звезды, что печатал виджет отзывов на этом сайте */
  .um-h2c-stars { color: #FFCC00; font-size: 18px; letter-spacing: 2px; line-height: 1; }
  .um-h2c-count { color: #6b6b6b; font-size: 14px; }
  .um-h2c-btn {
    display: block;
    text-align: center;
    padding: 11px 16px;
    border: 1px solid #103a71;
    border-radius: 0;                 /* кнопки на этом сайте прямоугольные (измерено) */
    color: #103a71;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
  }
  .um-h2c-btn:hover { background: #103a71; color: #fff; }
  /* Слайды карточки лежат в потоке один поверх другого через display:none — так высота
     колонки не скачет при смене отзыва (у BMW слайд один и переписывается через JS). */
  .um-h2c-item {
    display: none;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
  }
  .um-h2c-item.is-on { display: flex; }
  .um-h2c-auth { display: flex; align-items: center; gap: 10px; }
  .um-h2c-av {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #103a71;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
  }
  .um-h2c-auth b { display: block; font-size: 15px; }
  .um-h2c-auth small { display: block; color: #8a8a8a; font-size: 12.5px; }
  .um-h2c-item-stars { color: #FFCC00; font-size: 14px; letter-spacing: 2px; }
  .um-h2c-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .um-h2c-dots { display: flex; gap: 6px; justify-content: center; }
  .um-h2c-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #c9ced4; cursor: pointer;
  }
  .um-h2c-dots span.is-on { background: #103a71; }
}

/* Старый первый экран на ПК (section.video-section-desktop — тот же промо-ролик во всю
   ширину) уступает место hero-строке: под видео и отзывами он был бы вторым показом
   одного и того же ролика. Скоуп через соседний селектор — прячем ТОЛЬКО когда на
   странице отрендерена .um-hero2, то есть на мобильном UA и на страницах без hero-строки
   (contacts) первый экран живёт как раньше. */
.um-hero2 ~ .video-section-desktop { display: none; }

/* ============================================================================
   um-hero-m — мобильная шапка с фотографией (порт с BMW/Mercedes, 18.08.2026).
   Ставится шаблоном custom_test2.php, когда у страницы есть своё фото шапки или фото
   есть у её ТИПА лендинга (справочник «Типы лендингов»). Фото лежит В ПОТОКЕ внутри
   сетки 1x1 — его высота (88% ширины колонки × пропорции файла) задаёт высоту сцены, —
   а H1 с подзаголовком лежат поверх, от левого верхнего угла. Булиты и кнопки идут НИЖЕ
   фото. Цвет полосы даёт сама секция, картинка-подложка не нужна. Геометрия на страницу:
   постметы _um_hm_w/x/t/r/b (панель «Фон лендинга»), inline на .um-hm-img.

   Отступы повторяют Mercedes и BMW: от верха видимой полосы до заголовка 45px на 390px.
   Штатная шапка этой темы висит на паре margin-top:-10vw / padding-top:10vw (уходит под
   фиксированную шапку сайта), поэтому padding-top здесь = 10vw компенсации + 6vw полосы,
   а не 6vw как на BMW, где такой пары нет. Штатная шапка (без фото) свои отступы сохраняет.
   ============================================================================ */
@media only screen and (max-width: 768px){
  .first.um-hero-m{
    background:#fff;
    padding-top:16vw;
    /* Штатная мобильная шапка держит padding-bottom 67.5vw и margin-bottom -72.19vw —
       место под промо-ролик .section-main, который наезжает на неё снизу. Под фото-шапкой
       ролик не рендерится вовсе (гейт в custom_test2.php), поэтому и запас не нужен:
       полоса закрывается сразу под контентом и уходит в общий ритм 15px. */
    padding-bottom:2.6vw;
    margin-bottom:15px;
  }
  .first.um-hero-m .first__content{padding-top:5.605vw;padding-bottom:0}
  .first.um-hero-m .first__title{padding-top:0;padding-bottom:2vw}
  /* main.css красит .first__title белым, а .first.md-dark-bg на телефоне — чёрным;
     на белой полосе нужен тёмный, поэтому пишем явно. */
  .first.um-hero-m .first__title{color:#262626}
  .first.um-hero-m .first__text p{color:#262626}
  /* 🔴 main.css рисует ЗА мобильным заголовком синюю полосу во всю ширину экрана
     (.first__title::before — inset:0, width:150vw, background:#103a71). На тёмной шапке
     она была фоном, на белой читается как синий брусок поперёк экрана. Убираем только
     для фото-шапки: штатная шапка сохраняет и полосу, и белый заголовок. */
  .first.um-hero-m .first__title::before{display:none}
  .um-hm-stage{display:grid}
  .um-hm-stage .um-hm-img{grid-area:1/1;justify-self:end;align-self:end;display:block;width:88%;height:auto}
  /* line-height:0 — перенос строки между <div class="um-hm-text"> и заголовком даёт
     пустую строку-бокс и опускает заголовок ровно на одну строку. У заголовка и
     подзаголовка свой line-height, так что для них обнуление контейнера инертно. */
  .um-hm-stage .um-hm-text{grid-area:1/1;position:relative;z-index:1;line-height:0}
}

/* ------------------------------------------- CTA pair on desktop (18.08.2026, MB parity)
   `main.css` gives `.wc-btn` `flex: 1 1 0%`, so the «Позвонить» / «Написать в WhatsApp»
   pair stretched across the whole container (≈580px each at 1440 for labels ~120 and
   ~220px wide). Owner, 17.08.2026 on Mercedes: the buttons must be as wide as their text
   and stand centred. `.wc-buttons` already carries `justify-content: center`, so dropping
   the stretch is enough. Side padding 28px — at content width the old 6/10px pressed the
   label against the edge; `max-width: 100%` and `flex-wrap: wrap` keep a narrow container
   (popup) from overflowing. Phones (≤768px) keep the full-width stretch on purpose: there
   a button has to be thumb-sized. */
@media only screen and (min-width: 769px) {
  .wc-buttons { flex-wrap: wrap; }
  .wc-btn { flex: 0 0 auto; max-width: 100%; padding: 12px 28px; }
}

/* ---------------------------------- section headings, phone rhythm (18.08.2026)
   Owner: «отступы заголовков неправильно проработаны на мобильной версии, на BMW и
   Mercedes мы это проработали». Below 699px this site's section headings all render
   26px but with THREE different line-heights — 40px on «Отзывы» / «Наша команда»
   (the theme's band headings), 60px on «Схема проезда» (contacts), 31.2px on
   «Корпоративным клиентам» and every `.editor` h2 — so the air above and below a
   heading changed from block to block down one page. Unified to the 26/40 the owner
   already sees on «Отзывы» and «Наша команда».
   🔴 Font WEIGHT and COLOUR are deliberately NOT touched: this site draws every
   heading in the accent (#103a71) at 400 on a phone, and that is already consistent
   — BMW forces #1a1a1a / 600 because its own headings disagreed there, ours do not.
   Selector list mirrors BMW's (`um-cases-port.css`, 30.07.2026): an explicit
   inventory, NOT a blanket `.editor h2`, so card and lead titles keep their scale.
   NOT touched: .akpp-note (16px УТП lead), .wc-item-title, .cs-case-heading (20px
   case title), hero .first__title, .download-price__title, .contacts__info-social h2. */
@media (max-width: 699px) {
  .editor > .wrapper > h2,
  .editor > .wrapper > div > h2:not(.akpp-note),
  .editor > .wrapper > .section-container .text-block > h2,
  .editor > .wrapper > .hyundai-two-columns > .column > h2,
  .editor > .wrapper > .hyundai-service .service-content > h2,
  .editor > .wrapper > .checklist-section > .wrapper > h2,
  section.team > .wrapper > h2.team__title,
  section.questions > .wrapper > h2.questions__title,
  section.contacts .contacts__address > h2,
  section.contacts .contacts__info > h2.contacts__info-title,
  section.contacts .contacts__map-title > h2 {
    font-size: 26px;
    line-height: 40px;
  }
}

/* ── header and first screen on the site's own grid (18.08.2026, BMW parity) ──
   Owner (phone screenshot): «в hero заголовок как бы пошире по ширине других блоков».
   Two donor-theme rules pull their blocks 3vw LEFT of the content column:
     main.css  .first__content{margin-left:-3vw}                    (no media query)
     main.css  @media(max-width:768px){ .logo-container-v2{margin-left:-3vw} }
   The content column is `.wrapper{width:86.25vw}` centred — at 390px its left edge is
   19.3px, while the logo and the hero title started at 7.6px. The right edges matched,
   so the header and the H1 simply read «wider» than everything below.
   The logo's offset is zeroed. `.first__content` itself is NOT touched: the hero photo
   lives in it too, and shifting the container would drag the picture right and break the
   overhang the owner picked. Only the text cell `.um-hm-text` moves — the photo stays put.
   ≤768px only: above it this first screen is hidden and `.first__content` still serves the
   form / 404 / thank-you pages. Same fix BMW got on 03.08.2026 for the same report. */
@media only screen and (max-width: 768px) {
  .logo-container-v2 { margin-left: 0; }
  .first.um-hero-m .um-hm-text { margin-left: 3vw; }
}

/* === Слайдер «Наша команда» на телефоне: карточка целиком на экране =========
   Порт правки Mercedes от 19.08.2026 (полное описание: changelog/mercedes/2026-08.md).
   Владелец: «сейчас слишком большие по высоте фото для телефона» — карточка не
   помещалась на экран, приходилось скроллить внутри блока, а фиксированная
   полоса «Позвонить/WhatsApp» перекрывала низ фотографии с именем и должностью.
   Было: main.css (<=768px) даёт .team__slide{width:76.5625vw; height:76.5625vw},
   а блок «Card shape» выше в ЭТОМ файле поднимает высоту до 103.125vw —
   пропорция ~3:4,05, привязанная только к ШИРИНЕ экрана. На 375x667 карточка
   287x387 при видимой высоте окна ~559px и полосе контактов 48px.
   Стало: пропорция 4:5 плюс потолок 52% высоты экрана.
   height:auto обязателен — иначе жёсткая высота бьёт пропорцию. Фото и так
   object-fit:cover, поэтому кадрируется, а не сжимается. Ширину не трогаем:
   от неё зависит шаг перелистывания (Swiper, slidesPerView:1).
   Нижняя граница потолка — ширина карточки (76.5625vw): без неё на планшете
   768px потолок в 52svh давал 588x532, то есть карточка становилась ШИРЕ, чем
   выше, и cover срезал портретное фото сверху и снизу по лицу. С max() потолок
   никогда не опускается ниже квадрата.
   Строка 52vh стоит первой как запасная для браузеров без svh/max(); svh
   (малый вьюпорт) — чтобы на iOS высоту считали при ПОКАЗАННОЙ адресной строке.
   Правило идёт последним в файле: блок «Card shape» выше задаёт height внутри
   такого же @media, побеждаем порядком следования. */
@media only screen and (max-width: 768px){
  .team__slide{
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 52vh;
    max-height: max(76.5625vw, 52svh);
  }
}

/* === «Наша команда»: ряд кнопок и отступы точек — как на Mercedes ============
   Владелец, 19.08.2026: «кнопки надо чтобы были идентичны и пагинация отступы
   имела тоже идентичные». Пара «Позвонить / Написать в WhatsApp» под слайдером
   добавлена в template-parts/members.php (порт разметки Mercedes), здесь —
   геометрия полосы между слайдером и этим рядом.
   Было: точки жили по общему для темы правилу .md-standart-slider
   .slider-pagination — bottom -15.25vw на телефоне (у Mercedes -6.25vw) и
   -4.1666666667vw на ПК. На телефоне точки уезжали на 57px вниз, на ПК —
   на 12px ВНУТРЬ следующей секции, потому что ритм 15px обнулил margin-bottom
   слайдера. Стало: полоса ровно как у Mercedes — на ПК 32px до точек и 32px
   после них, на телефоне 14px и 12px.
   Скоуп строго section.team: класс .md-standart-slider висит ещё на десятке
   слайдеров темы, их отступы не трогаем.
   Нижний паддинг секции обнулён: комментарий выше («резерв под свисающую
   карточку сотрудника») устарел после переделки карточки 30.07.2026 — .slide-info
   лежит внутри карточки (top:0) и ниже слайдера ничего не выступает, проверено
   замером. Зазор до следующего блока теперь задаёт только межблочные 15px. */
@media only screen and (max-width: 768px){
  section.team .team__slider .slider-pagination{ bottom: -6.25vw; }
  section.team{ padding-bottom: 0; }
  section.team + *{ margin-top: 15px; }
}
@media only screen and (min-width: 769px){
  section.team .team__slider{ margin-bottom: 5.2083333333vw; }
  section.team .team__slider .slider-pagination{ bottom: -2.9947916667vw; }
  section.team{ padding-bottom: 0; }
}

/* === «Наша команда»: боковые поля кнопок на телефоне ==========================
   Владелец, 19.08.2026: «кнопки надо чтобы были идентичны». При одинаковой
   разметке высота ряда расходилась: Mercedes и BMW 78px, Hyundai 62px.
   Причина не в шрифте как таковом, а в переносе: «Написать в&nbsp;WhatsApp»
   склеен неразрывным пробелом в один токен, и при боковых полях 25px текстовое
   поле кнопки (160 − 50 − 20 иконка − 8 зазор = 82px) оказывалось УЖЕ этого
   токена. Браузер тогда рвёт слово посреди: «Написать / в WhatsAp / p» — три
   строки. У Hyundai шрифт уже, токен влезал, выходило две строки.
   На 320px было ещё хуже: четыре строки и высота 95px.
   Поля 10px дают запас на всех трёх шрифтах: подпись всегда в две строки,
   ряд 62px на 320 и на 375. Скоуп section.team — семья .wc-* стоит ещё в
   десятке блоков сайта, их поля не трогаем. */
@media only screen and (max-width: 768px){
  section.team .wc-btn{ padding-left: 10px; padding-right: 10px; }
}