/* Кит-скелет страницы кейса: шапка, ключевые цифры, визуал, оглавление.

   Авторская вёрстка внутри кейса не трогается — её держат pages.css и
   собственный инлайновый стиль каждой страницы. Здесь только рама.

   ⚠️ Селекторы с префиксом kc- : классы case-* заняты старой вёрсткой,
   и одноимённое правило рядом означало бы драку двух каскадов. */

/* ── шапка ───────────────────────────────────────────────────── */
.kit .kc-head h1 { margin: 0 0 var(--sp-4); }
.kit .kc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.kit .kc-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--text); font-size: 13px; font-weight: 500; }
.kit .kc-chip a { color: inherit; text-decoration: underline;
  text-decoration-color: var(--border); text-underline-offset: 2px; }
.kit .kc-chip a:hover { color: var(--brand-ink); }
.kit .kc-chip--dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--brand); flex: none; }
.kit .kc-sub { font-size: var(--fs-lead); line-height: 1.6;
  color: var(--text); margin: 0 0 var(--sp-4); }
.kit .kc-sub:last-child { margin-bottom: 0; }
.kit .kc-author { margin: 0 0 var(--sp-5); }

/* ── ключевые цифры ──────────────────────────────────────────── */
.kit .kc-nums { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1); padding: 24px 26px; }
/* ⚠️ Ярлык — обычный текст, а не декор: на --faint контраст 2,6 при норме
   4,5. Держим на --muted, эту же грабли уже ловили в ленте блога. */
.kit .kc-num-lab { font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.kit .kc-num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px; }
.kit .kc-num b { display: block; font-size: clamp(26px, 3.4vw, 36px); font-weight: 700;
  line-height: 1.1; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: var(--num); }
/* ⚠️ Единицу измерения держим строчной принудительно: в pages.css у .u
   стоит блочное отображение, и «91» с «%» разъезжались на две строки. */
.kit .kc-num b .u, .kit .kc-num b .unit { display: inline; font-size: .58em;
  font-weight: 700; color: var(--brand); margin-left: 1px; }
.kit .kc-num span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.45;
  color: var(--muted); }

/* ── визуал ──────────────────────────────────────────────────── */
/* ⚠️ Карточка главной метрики остаётся тёмной. Это подпись кейсов: в
   старой вёрстке она near-black с терракотовой кривой, и светлый вариант
   ломал узнаваемость раздела — а кривая ещё и пересекала текст. */
.kit .kc-visual { position: relative; margin: 0; overflow: hidden; min-height: 230px;
  border-radius: var(--r-lg); background: #141413; color: #fff;
  display: flex; align-items: flex-end; }
.kit .kc-visual svg { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; }
/* Затемняющая подложка слева: кривая идёт через всю карточку и
   перечёркивала абзац под цифрой. */
.kit .kc-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #141413 0%, rgba(20,20,19,.92) 38%,
    rgba(20,20,19,.35) 62%, rgba(20,20,19,0) 78%); }
.kit .kc-visual figcaption { position: relative; z-index: 1; padding: 30px 32px;
  max-width: 640px; }
.kit .kc-visual-k { display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.kit .kc-visual-n { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; color: #fff; margin-top: 10px;
  font-variant-numeric: var(--num); }
.kit .kc-visual-n .unit { display: inline; font-size: .52em; font-weight: 600;
  color: #d97757; margin-left: 8px; }
.kit .kc-visual p { margin: 12px 0 0; font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.72); }

/* ── оглавление ──────────────────────────────────────────────── */
.kit .kc-toc { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px 22px; }
.kit .kc-toc > b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.kit .kc-toc-l { display: flex; flex-wrap: wrap; gap: 8px; }
.kit .kc-toc a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--text); font-size: 13.5px; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; }
.kit .kc-toc a:hover { background: var(--brand-bg); border-color: var(--brand-bd, var(--border));
  color: var(--brand-ink); text-decoration: none; }
.kit .kc-toc a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── тело кейса ──────────────────────────────────────────────── */
/* ⚠️ Секция тела несёт авторскую вёрстку целиком. Кит задаёт ей только
   ритм и колонку чтения для прозы: ширить абзац на всю страницу нельзя,
   а таблицы и фигуры внутри должны остаться во всю ширину. */
.kit .kc-b h2 { margin-top: 0; }
.kit .kc-b h3 { margin-top: var(--sp-6); }
.kit .kc-b table { font-variant-numeric: var(--num); }

/* «Другие кейсы» и призыв достались от старой вёрстки: снимаем с них
   собственные отступы, ритм задаёт кит-секция */
.kit .kc-more .sec-head { margin-bottom: 22px; }
.kit .kc-more .case-more { margin: 0; }
.kit .cta-band { margin: 0; }

@media (max-width: 900px) {
  .kit .kc-num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 560px) {
  .kit .kc-nums { padding: 18px 18px; }
  .kit .kc-visual figcaption { padding: 20px 18px; }
  .kit .kc-toc { padding: 16px 16px; }
  .kit .kc-toc-l { gap: 6px; }
  .kit .kc-toc a { font-size: 13px; padding: 0 10px; }
}

/* ── тёмный призыв в конце кейса ─────────────────────────────────
   ⚠️ kit.css грузится ПОСЛЕ styles.css, и при равной специфичности
   `.kit h2` побеждал `.cta-band h2`. Заголовок призыва становился
   тёмным на тёмном и пропадал целиком, кнопки — тоже. Возвращаем
   светлые цвета здесь: этот файл подключается последним. */
.kit .cta-band { color: var(--warm-silver); }
.kit .cta-band h2 { color: var(--ivory); }
.kit .cta-band p { color: var(--warm-silver); }
.kit .cta-band .btn { text-decoration: none; }
.kit .cta-band .btn--brand { background: var(--terracotta); color: var(--ivory); }
.kit .cta-band .btn--brand:hover { background: var(--terracotta-d, #b0533a); color: var(--ivory); }
.kit .cta-band .btn--dark { background: var(--dark-warm); color: var(--ivory); }
.kit .cta-band .btn--dark:hover { background: #4a4a46; color: var(--ivory); }

/* Заголовок «Ещё кейсы» приехал со своим инлайновым размером из старой
   вёрстки — приводим к кит-шкале, иначе он мельче соседних h2. */
.kit .kc-more .sec-head .ttl h2 { font-size: var(--fs-h2) !important; margin: 0; }
.kit .kc-more .sec-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kit .kc-more .sec-head .tlink { color: var(--brand-ink); font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kit .kc-more .sec-head .tlink:hover { text-decoration: underline; }

/* ⚠️ Кнопки внутри тела кейса. `.kit a` красит любую ссылку в синий и
   побеждает `.btn--brand` по порядку подключения: у кейса про Директ
   кнопка «Скачать чек-лист» стала синим по терракоте, контраст 1,6.
   Цвет кнопки задаём здесь, файл грузится последним. */
.kit .kc-b .btn, .kit .kc-b .btn:hover { text-decoration: none; }
.kit .kc-b .btn--brand, .kit .kc-b .btn--brand:hover { color: var(--ivory); }
.kit .kc-b .btn--dark, .kit .kc-b .btn--dark:hover { color: var(--ivory); }
.kit .kc-b .btn--sand, .kit .kc-b .btn--sand:hover { color: var(--charcoal); }
.kit .kc-b .btn--ghost, .kit .kc-b .btn--ghost:hover { color: var(--charcoal); }

/* ── перенос правил, которые в pages.css привязаны к .case-page ──
   ⚠️ Скелет кейса теперь несёт класс kit, а не case-page, и полтора
   десятка правил перестали действовать. Большинство относилось к старой
   раме и не нужно, но эти держат широкие таблицы и код внутри полосы
   прокрутки. Без них intervolga на 420px утаскивало вбок на 9 пикселей,
   а до переноса страница была ровной. */
.kit .case-content { max-width: none; width: 100%; }
.kit .case-table-block { max-width: 100%; }
.kit .case-table-wrap,
.kit .case-code { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.kit .case-code pre { max-width: 100%; overflow-x: auto; }
.kit .inline-code { word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .kit .case-table { min-width: 520px; }
}

/* ⚠️ .kit-body — флекс-колонка, а у флекс-элемента min-width по умолчанию
   auto: секция не даёт себя сжать уже содержимого, и обёртка с прокруткой
   не срабатывает. Широкая таблица intervolga утаскивала страницу вбок на
   девять пикселей ровно поэтому. Та же грабля, что ловили на мобильной
   вёрстке раньше. */
.kit .kit-sec.kc-b { min-width: 0; }
.kit .kc-b .case-table-block,
.kit .kc-b .case-table-wrap { min-width: 0; }

/* ⚠️ `.kit table` в kit.css имеет специфичность (0,1,1) и перебивает
   `.case-table` (0,1,0): таблице кейса навязывались collapse и width:100%
   вместо авторских separate + border-spacing. У intervolga из-за этого
   таблица считалась на 734px вместо 611 и страница уезжала вбок.
   Возвращаем авторскую модель — заодно чинится липкая шапка, которой
   collapse ломает границы. */
.kit .kc-b table.case-table { border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 14.5px; }

/* ── одна ширина: контейнер ──────────────────────────────────────
   ⚠️ Кит по умолчанию сажает прозу в колонку чтения 760px, а заголовки,
   таблицы, фигуры и оглавление оставляет на всю ширину секции. На кейсах
   это читается как сбитая вёрстка: текст занимает половину экрана, а
   всё вокруг него — целиком. По решению владельца проза кейсов идёт
   по контейнеру, как и остальные блоки.

   Правило снимает ограничение и с кит-умолчания, и с собственных
   max-width авторских блоков — иначе выноска остаётся на 1074px,
   а блок сервисов на 876px рядом с 1152px у соседей. */
.kit .kc-sub,
.kit .kc-head .kc-author,
.kit .kc-b > p,
.kit .kc-b > ul,
.kit .kc-b > ol,
.kit .kc-b > dl,
.kit .kc-b > blockquote,
.kit .kc-b > details,
.kit .kc-b > .callout,
.kit .kc-b > .case-note,
.kit .kc-b > .case-list,
.kit .kc-faq,
.kit .kc-faq details,
.kit .svl { max-width: none; }

/* ⚠️ Ссылки-карточки в блоке «Сервисы из материала» подчёркивались как
   проза: в kit.css есть `.kit main li a:not([class])` со специфичностью
   (0,2,3), и авторское `text-decoration: none` у `.svl li a` (0,1,2)
   проигрывало. Добираем специфичность своим `:not([class])`. */
.kit .svl li a:not([class]),
.kit .svl li a:not([class]):hover { text-decoration: none; }
.kit .svl li i { overflow-wrap: anywhere; }

/* ── код внутри кейса ────────────────────────────────────────────
   ⚠️ `.kit code` в kit.css рисует строчный код плашкой: светлый фон,
   padding, скругление. Внутри тёмного блока `.case-code` это давало
   белые «таблетки» поверх каждой строки, и код становился нечитаемым
   совсем. Внутри pre плашку снимаем. */
.kit .kc-b pre code,
.kit .kc-b .case-code code { background: none; padding: 0; border-radius: 0;
  font-family: var(--mono); font-size: inherit; color: inherit; white-space: pre; }
.kit .kc-b .case-code pre { color: #e8e6dc; }

/* ⚠️ Блок «Сервисы из материала» приезжает вместе со своей легаси-обёрткой
   `<section class="wrap section">` — она внутри маркеров, а маркеры ведёт
   link_servisy.py и трогать их нельзя. Обёртка добавляла свои 24px по
   бокам, и блок стоял уже соседей на 48 пикселей. Гасим её отступы,
   разметку оставляем как есть. */
.kit .kit-sec > section.wrap { padding: 0; max-width: none; margin: 0; }

/* ── карточки в блоке «Сервисы из материала» ─────────────────────
   ⚠️ Сетка блока задана как `auto-fill`: в контейнере 1152px она
   раскладывает ЧЕТЫРЕ трека по 240px, а карточки в блоке бывают две —
   они занимают первые два трека и стоят вдвое уже, чем могли бы, с
   обрезанным описанием. `auto-fit` схлопывает пустые треки, и две
   карточки занимают всю ширину. */
.kit .svl ul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kit .svl li a { align-items: flex-start; }
.kit .svl li i { overflow: visible; text-overflow: clip; white-space: normal; }

/* ⚠️ `.art-body` — колонка чтения статейного шаблона, 680px. В неё
   завёрнуто содержимое 49 секций у трёх кейсов: аудита tabletka.ru,
   кабинета застройщика и блока «Рынок, на котором это работает» в
   кейсе про нейросети. Там внутри графики, таблицы и плитки с цифрами,
   и все они стояли вдвое уже контейнера. */
.kit .kc-b .art-body,
.kit .kc-b .art-body > * { max-width: none; }

/* Заголовок и абзац тёмного призыва несут из styles.css собственные
   max-width 16em и 34em — 544px и 612px в контейнере 1152. Внутри
   широкой полосы это читалось как text в левой трети. */
.kit .cta-band h2, .kit .cta-band p { max-width: none; }