/* КОНФИ — общие стили страниц кейсов (/keysy/*).
   Подключается после styles.css и pages.css. Повторяет визуал кейсов
   «Новый Город» и «ЭкзоКликник» (нулевой радиус, тёмная панель, амбер-акцент),
   чтобы новые перенесённые кейсы не дублировали инлайновый <style> в каждой странице. */

/* ── обложка ── */
.cs-cover{position:relative;margin-top:clamp(28px,3.5vw,52px);border:1px solid var(--line-2);background:var(--bg-2);overflow:hidden}
.cs-cover image-slot{display:block;width:100%;height:auto;aspect-ratio:21/9}
.cs-cover-cap{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:rgba(244,242,236,0.7);font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:10px 18px}
@media (max-width:900px){.cs-cover image-slot{aspect-ratio:16/10}}

/* ── лента фактов под шапкой ── */
.cs-tape{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(28px,3vw,44px)}
.cs-tape span{background:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding:13px 18px;flex:1 1 auto}
.cs-tape span b{color:var(--ink);font-weight:600}

/* ── прозаический блок (задача / вывод) ── */
.cs-prose{display:grid;gap:clamp(14px,1.6vw,20px);max-width:78ch}
.cs-prose p{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.cs-prose p b,.cs-prose p strong{color:var(--ink)}
.cs-quote{margin:clamp(26px,3vw,38px) 0 0;border-left:2px solid var(--amber);padding-left:clamp(16px,1.8vw,26px);font-size:clamp(17px,1.4vw,22px);line-height:1.35;letter-spacing:-0.015em;font-weight:600;color:var(--ink);max-width:70ch;text-wrap:pretty}

/* ── переход к другим разделам ── */
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:clamp(20px,2.4vw,30px);margin-top:clamp(36px,4vw,56px)}

/* ── масштаб заголовков кейсов ──
   pages.css рассчитан на короткие H1 внутренних страниц: clamp(44px,7.4vw,124px)
   на 1440px давал 107px и при max-width:none разваливал H1 кейса на 4–5 строк
   («ПРИ БЮДЖЕТЕ 40 000 ₽.» уезжало в отдельную строку). В кейсах заголовки длиннее,
   поэтому свой масштаб: H1 ≤ 68px, H2 ≤ 46px.

   Потолок по ширине у H1 — только ширина колонки (.wrap), без max-width в ch:
   `30ch` считается от ширины «0» в текущей гарнитуре, а до подгрузки Onest она
   другая — на проде это подрезало колонку до 1050px и «по 3 586 ₽ при плане
   4 000 ₽.» уезжало на третью строку. Длину строк держит не cap, а ручной
   перенос <br /> и запас в размере: на 1440px самая длинная строка 1036px
   в колонке 1210px.

   Переносы в H1 расставлены вручную (<br />) под десктоп. Для телефона:
   — обычный <br /> скрывается на ≤640px, разбивку делает text-wrap:balance;
   — <br class="m" /> виден только на телефоне — там, где балансировка ставит
     предлог в конец строки («лиды до 500 ₽ из / поиска и РСЯ»);
   — пробел перед <br /> в разметке обязателен: у скрытого переноса он склеивает слова.

   Числа в заголовках и метриках не рвём по пробелу: «40 000 ₽» — одно слово
   (&nbsp; внутри разрядов в разметке плюс страховка на случай смены гарнитуры).
   Проверка разбивки — _qa/check-typography.py (320/390/768/1024/1440/1920). */
.phero h1{font-size:clamp(30px,5vw,68px);line-height:1.03;letter-spacing:-0.03em;max-width:none;margin-top:clamp(18px,2vw,26px);text-wrap:pretty}
.psec h2.sec-title{font-size:clamp(25px,2.8vw,46px);line-height:1.06;max-width:30ch}
.phero h1 br.m{display:none}
.phero h1,.psec h2.sec-title,.pmeta .v,.pmeta .l,.kpi-cell .kv,.kpi-cell .kl{overflow-wrap:normal;word-break:normal}

@media (max-width:640px){
  .phero h1{font-size:clamp(25px,7.2vw,30px);letter-spacing:-0.022em;max-width:none;text-wrap:balance}
  /* На телефоне жёсткий перенос <br> из разметки (он выставлен под 1440px) давал
     «лестницу» из 4 строк с короткими обрывками — «из SEO», «где CPL», «4 000 ₽.».
     Скрываем его и отдаём разбивку балансировке строк: строк столько же, но
     длины выравниваются, сирот из одного слова и знаков в начале строк нет.
     Проверка — _qa/check-typography.py --widths 320,390,640. */
  .phero h1 br{display:none}
  .phero h1 br.m{display:inline}
  .psec h2.sec-title{font-size:clamp(22px,6.2vw,27px);max-width:none}
}

/* ── метрики hero и KPI-полосы: значение — одна строка ──
   Ниже 400px `.pmeta` держит две колонки, и на значение остаётся ~103px.
   При кегле 26px «40 000 ₽» в них не влезало: карточка уезжала за вьюпорт
   на 11–14px (/keysy/autstaffing/, /keysy/novostroiki-v-samare/, 320px).
   Уменьшаем кегль — числа остаются целыми и в одну строку.

   Перенос значения на вторую строку сам по себе выглядит как сбойный дизайн
   (стрелка «→ 4 773 ₽» уезжает в начало строки), поэтому длинные сравнения
   в разметке подаются не одним значением «10 032 → 4 773 ₽», а двумя метриками
   с числами в подписи. Правило проверяет _qa/check-typography.py: значение
   `.pmeta .v` / `.kpi-cell .kv` из двух и более строк — дефект. */
@media (max-width:400px){.pmeta .v{font-size:clamp(19px,5.2vw,21px)}}

/* ── крошка на узких экранах: одна строка ──
   `.crumb` — моно-кегль 12px с трекингом 0.08em (`site5/pages.css`). На 320px
   под текст остаётся 288px, а крошки кейсов занимают 298–305px («пластический
   хирург · самара», «аутстаффинг · CPA 3 586 ₽»), поэтому ломались на две строки
   и вторая строка читалась как отдельный бренд. Замер (_qa/check-typography.py
   проверяет крошку от 390px, где всё влезает): при 10px и трекинге 0.04em самая
   широкая крошка — 269px. Правка касается только узких телефонов. */
@media (max-width:360px){.crumb{font-size:10px;letter-spacing:.04em}}