/* ============================================================
   База знаний /blog/, /uz/blog/, /en/blog/ (редизайн 22.10.2026, промт §4.6).
   Генерирует tools/blog/build_blog.py. Подключается после site.css и article.css.
   Шапка: кикер, H1 40/600, подзаголовок 17, поиск 640×48, рубрики-чипы.
   Тело: тёмный блок «Гид для начинающих», сетка 3 в ряд карточек одной высоты
   («Читать →» прижат к низу), CTA-баннер из site.css. Радиус 2, без теней.
   ============================================================ */
.kb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.kb-head { padding: 40px 0 28px; border-bottom: 1px solid var(--corp-border); background: #fff; }
@media (min-width: 900px) { .kb-head { padding: 48px 0 32px; } }
.kb-head h1 { margin: 14px 0 0; max-width: 900px; font-size: 30px; line-height: 1.15; font-weight: 600; color: var(--text-strong); }
@media (min-width: 768px) { .kb-head h1 { font-size: 40px; } }
.kb-sub { margin: 16px 0 0; max-width: 820px; font-size: 16px; line-height: 1.45; color: var(--text-muted); }
@media (min-width: 768px) { .kb-sub { font-size: 17px; } }

.kb-search { position: relative; max-width: 640px; margin-top: 24px; }
.kb-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--corp-ink-700); pointer-events: none; }
.kb-search input {
  display: block; width: 100%; height: 48px; box-sizing: border-box; padding: 0 16px 0 44px;
  border: 1px solid var(--corp-border); border-radius: 2px; background: #fff;
  font: inherit; font-size: 15px; color: var(--text-body); appearance: none;
  transition: border-color 120ms var(--ease-out);
}
.kb-search input::placeholder { color: var(--text-subtle); opacity: 1; }
.kb-search input:hover { border-color: var(--corp-ink-300); }
.kb-search input:focus { outline: 2px solid var(--corp-ink-900); outline-offset: -1px; border-color: var(--corp-ink-900); }
.kb-search input::-webkit-search-cancel-button { cursor: pointer; }

.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kb-chip {
  height: 34px; padding: 0 12px; border: 1px solid var(--corp-border); border-radius: 2px;
  background: var(--corp-bg); color: var(--text-strong); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.kb-chip:hover { border-color: var(--corp-ink-700); background: #fff; }
.kb-chip[aria-pressed="true"] { background: var(--corp-ink-900); border-color: var(--corp-ink-900); color: #fff; }
.kb-chip:focus-visible { outline: 2px solid var(--corp-ink-900); outline-offset: 2px; }

.kb-body { padding: 32px 0 56px; }
@media (min-width: 900px) { .kb-body { padding: 32px 0 64px; } }

.kb-feat { margin-bottom: 24px; padding: 24px 20px; background: var(--corp-ink-900); color: #fff; border-radius: 2px; }
@media (min-width: 768px) { .kb-feat { padding: 28px; } }
.kb-feat-kicker { margin: 0; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--corp-gold-on-dark, #E2C28F); }
.kb-feat h2 { margin: 12px 0 0; max-width: 720px; font-size: 22px; line-height: 1.22; font-weight: 600; color: #fff; }
@media (min-width: 768px) { .kb-feat h2 { font-size: 28px; } }
.kb-feat-lead { margin: 12px 0 0; max-width: 720px; font-size: 15px; line-height: 1.45; color: var(--corp-ink-200); }
.kb-feat .btn { margin-top: 18px; }
.kb-feat .btn:focus-visible { outline-color: var(--corp-accent); }

.kb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kb-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 232px; box-sizing: border-box; padding: 22px;
  background: #fff; border: 1px solid var(--corp-border); border-radius: 2px; color: inherit; text-decoration: none;
  transition: border-color 120ms var(--ease-out);
}
.kb-card[hidden] { display: none; }
.kb-card:hover { border-color: var(--corp-ink-700); color: inherit; text-decoration: none; }
.kb-card:focus-visible { outline: 2px solid var(--corp-ink-900); outline-offset: 0; border-color: var(--corp-ink-900); }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-card-top .tag { background: var(--corp-bg); color: var(--text-body); }
.kb-min { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-card-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--text-strong); min-height: calc(17px * 1.3 * 2); transition: color 120ms var(--ease-out); }
.kb-card:hover .kb-card-title { color: var(--corp-link); }
.kb-card-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 14px; line-height: 1.43; color: var(--text-muted); }
.kb-card .link-go { margin-top: auto; padding-top: 6px; }
.kb-card:hover .link-go { text-decoration: underline; text-underline-offset: 3px; }
.kb-card:hover .link-go .arr { transform: translateX(2px); }

.kb-empty { margin: 8px 0 0; padding: 20px; border: 1px dashed var(--corp-border); border-radius: 2px; font-size: 15px; color: var(--text-muted); background: #fff; }
.kb-cta { border-top: 1px solid var(--corp-border); }