/* Хаб SEO-кейсов /cases/ на ките.
   Заменяет инлайновый CSS старого хаба, который жил под скоупом .cases:
   там были свои имена (.kcard/.kstats/.kmetric) и своя палитра, из-за
   чего раздел выглядел островом посреди сайта. */

/* ── оттенок отрасли ──────────────────────────────────────────────
   Один цвет на кейс: им красятся цифра результата, метка отрасли и
   полоска слева. По ней же видно, что отфильтровалось. */
.kit [data-ccat="seo"]       { --ti: #3B4FD8; --ti-bg: #EEF1FE; --ti-bd: #B9C4F8; }
.kit [data-ccat="cro"]       { --ti: #0F613D; --ti-bg: #E5F4EC; --ti-bd: #A9D7C0; }
.kit [data-ccat="edtech"]    { --ti: #6C3FD4; --ti-bg: #F1ECFE; --ti-bd: #CBB8F5; }
.kit [data-ccat="ecommerce"] { --ti: #A8410F; --ti-bg: #FDEDE5; --ti-bd: #F0BFA6; }
.kit [data-ccat="medicine"]  { --ti: #0A6069; --ti-bg: #E4F4F5; --ti-bd: #A8D6DA; }
.kit [data-ccat="travel"]    { --ti: #085B96; --ti-bg: #E4F1FA; --ti-bd: #A6CDE8; }
.kit [data-ccat="b2b"]       { --ti: #55700D; --ti-bg: #F0F5DE; --ti-bd: #C8D992; }
.kit [data-ccat="services"]  { --ti: #8F5400; --ti-bg: #FBF0DE; --ti-bd: #E8C68C; }

/* ── сетка и карточка кейса ───────────────────────────────────────── */
.kc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .kc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kc-grid { grid-template-columns: 1fr; } }

.kit a.kc-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
  gap: 10px; min-width: 0; padding: 20px 22px 18px 24px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kit a.kc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--ti, var(--brand)); }
.kit a.kc-card:hover { border-color: var(--ti-bd, #C7CEFA); box-shadow: var(--sh-2);
  transform: translateY(-2px); text-decoration: none; }
/* ⚠️ hidden — всего лишь UA-правило display:none, и авторский display:flex
   выше его перебивает. Без этой строки фильтр «нажимается», счётчик
   считает, а карточки остаются на месте. */
.kit a.kc-card[hidden] { display: none; }

.kc-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kc-ind { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px;
  border-radius: var(--r-pill); background: var(--ti-bg, var(--surface-2));
  color: var(--ti, var(--muted)); font-size: 12px; font-weight: 600; }
.kit .kc-top .pw-views { margin-left: auto; }

.kc-metric { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.kc-metric b { font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em;
  color: var(--ti, var(--ink)); font-variant-numeric: var(--num); }
.kc-metric i { font-style: normal; font-size: 13px; line-height: 1.35; color: var(--muted); }

.kit .kc-card h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600;
  color: var(--ink); }
.kit .kc-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.kc-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--border); }
.kc-s { flex: 1 1 30%; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kc-s b { font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: var(--num); }
.kc-s i { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--faint); }

.kc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 13.5px; font-weight: 600; color: var(--brand); transition: gap .15s ease; }
.kit a.kc-card:hover .kc-go { gap: 9px; }

/* ── счётчик и пустой фильтр ──────────────────────────────────────── */
.kit .kc-count { margin: 14px 0 0; font-size: 14px; color: var(--muted);
  font-variant-numeric: var(--num); }
.kit .kc-empty { margin: 22px 0 0; font-size: var(--fs-body); line-height: 1.6;
  color: var(--muted); }
.kit .kc-empty[hidden] { display: none; }

/* ── блок сервисов из материала ────────────────────────────────────
   Разметку и её инлайновый <style> ведёт link_servisy.py, трогать их
   нельзя. Перекрашиваем снаружи: у скоупа .kit .kc-svl вес выше. */
.kit .kc-svl .svl { max-width: none; padding: 20px 22px; border-color: var(--border);
  border-radius: var(--r-lg); background: var(--surface-2); }
.kit .kc-svl .svl > b { margin-bottom: 5px; font-size: 17px; color: var(--ink); }
.kit .kc-svl .svl > p { font-size: 14.5px; color: var(--muted); }
.kit .kc-svl .svl li a { border-color: var(--border); border-radius: var(--r-md);
  background: var(--surface); }
.kit .kc-svl .svl li a:hover { border-color: var(--brand); }
.kit .kc-svl .svl li b { color: var(--ink); }
.kit .kc-svl .svl li i { color: var(--muted); }