/* Главная блога: то, чего нет в общем наборе kit-list.css —
   сетка ленты, закреплённая главная карточка, сортировка,
   пагинация с бесконечным скроллом и метка «с видео». */

.kit .bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-top: 22px; }
@media (max-width: 1000px) { .kit .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kit .bgrid { grid-template-columns: 1fr; } }

/* главная статья — на всю ширину сетки, крупнее и с цветной полосой */
.kit a.kb-card.vcard--feat { position: relative; overflow: hidden;
  background: var(--surface); padding: 28px 30px; margin-bottom: 4px; }
.kit a.kb-card.vcard--feat::before { content: ''; position: absolute; inset: 0 auto 0 0;
  width: 4px; background: var(--ti, var(--brand)); }
.kit .kb-card.vcard--feat h3 { font-size: 26px; line-height: 1.2; max-width: 22em; }
.kit .kb-card.vcard--feat p { font-size: 16px; -webkit-line-clamp: 2; max-width: 46em; }
@media (max-width: 620px) { .kit a.kb-card.vcard--feat { padding: 20px 18px; }
  .kit .kb-card.vcard--feat h3 { font-size: 21px; } }

/* ── сортировка ───────────────────────────────────────────────── */
/* Панель ленты: слева фильтр, справа сортировка. Стопкой из трёх рядов
   сортировка прилипала к чипам и читалась их продолжением. */
.kb-bar { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--border); }
.kb-bar .kit-chipbar { flex: 1 1 420px; }
.kit .bsort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: none; font-size: 13.5px; color: var(--muted); }
.kit .bsort .schip { font: inherit; font-size: 13.5px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted);
  transition: background .15s, color .15s, border-color .15s; }
.kit .bsort .schip:hover { border-color: var(--brand); color: var(--brand); }
.kit .bsort .schip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.kit .bgrid-empty { margin: 26px 0 0; font-size: var(--fs-body); color: var(--muted); }

.kit .bgrid-empty { margin: 26px 0 0; font-size: var(--fs-body); color: var(--muted); }

/* ── пагинация и «показать ещё» ───────────────────────────────────
   Разметку и стили этих блоков вставляет gen_blog_pagination.py, и
   красит он их старой палитрой: терракота, тёплые рамки. На кит-странице
   это чужой цвет. Инлайновый <style> идёт в теле документа, то есть
   позже нашего файла, поэтому перебиваем специфичностью: у него
   селекторы из одного класса, у нас — из двух. */
.kit .pager { margin: 34px 0 4px; }
.kit .pg-i, .kit .pg-a { min-width: 40px; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: 14.5px;
  transition: border-color .15s, color .15s, background .15s; }
.kit .pg-i:hover, .kit .pg-a:hover { border-color: var(--brand);
  color: var(--brand); background: var(--brand-bg); }
.kit .pg-i--cur, .kit .pg-i--cur:hover { background: var(--brand);
  border-color: var(--brand); color: #fff; font-weight: 600; }
.kit .pg-dots { color: var(--muted); }
.kit .inf-more { margin: 30px 0 4px; }
.kit .inf-btn { padding: 12px 24px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 500;
  transition: border-color .15s, color .15s, background .15s; }
.kit .inf-btn:hover { border-color: var(--brand); color: var(--brand);
  background: var(--brand-bg); }
.kit .inf-btn[disabled] { opacity: .6; }
.kit .inf-status { color: var(--muted); font-size: 13.5px; margin-top: 12px; }

/* метка «с видео» — у шести статей блога есть разбор на YouTube */
.kb-vid { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  font-weight: 600; color: #A32565; }
.kb-vid svg { display: block; }