/* Стили раздела базы знаний. Шрифт проекта — только vivo Sans Global.
   Начертания и метрики повторяют frontend/app/src/styles/global.css,
   чтобы серверные страницы и кабинет выглядели одинаково. */
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Demibold.woff2") format("woff2"); font-weight: 600; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "vivo Sans Global"; src: url("/help/static/fonts/vivoSansGlobal-Extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; ascent-override: 90.2%; descent-override: 27.1%; line-gap-override: 0%; }

/* Палитра взята из токенов лендинга и кабинета (areas/landing/*.module.css):
   раздел обязан читаться как часть продукта, а не как отдельный сайт. */
:root {
  --kb-ink: #121a26;
  --kb-ink-soft: #667385;
  --kb-accent: #2db17d;
  --kb-accent-dark: #1f9b6d;
  --kb-accent-soft: #e7f7f0;
  --kb-canvas: #f3f5f8;
  --kb-paper: #ffffff;
  --kb-line: #d6dde7;
  --kb-line-strong: #c4cedc;
  --kb-shadow-soft: 0 14px 34px rgba(18, 26, 38, 0.06);
  --kb-shadow-lifted: 0 20px 44px rgba(18, 26, 38, 0.10);
  --kb-radius: 0.9rem;
  --kb-radius-l: 1.35rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "vivo Sans Global", "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--kb-ink);
  background: var(--kb-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kb-accent-dark); }

:focus-visible {
  outline: 2px solid var(--kb-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Шапка --- */

.kb-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--kb-line);
  background: var(--kb-paper);
}

.kb-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.kb-logo img { display: block; height: 26px; width: auto; }

/* Разделитель, а не второй логотип: «База знаний» — подпись к продукту,
   а не самостоятельный бренд. */
.kb-logo-section {
  padding-left: 12px;
  border-left: 1px solid var(--kb-line);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--kb-ink-soft);
}

/* --- Поиск: одна механика, два размера --- */

.kb-search { display: flex; gap: 10px; }

.kb-search input {
  flex: 1;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  font: inherit;
  color: inherit;
  background: var(--kb-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kb-search input::placeholder { color: var(--kb-ink-soft); }

.kb-search input:hover { border-color: var(--kb-line-strong); }

.kb-search input:focus {
  outline: none;
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 4px var(--kb-accent-soft);
}

.kb-search button {
  border: 0;
  border-radius: var(--kb-radius);
  background: var(--kb-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.kb-search button:hover { background: var(--kb-accent-dark); }

.kb-search--compact { margin-left: auto; }
.kb-search--compact input { min-width: 300px; padding: 9px 14px; font-size: 0.9375rem; }
.kb-search--compact button { padding: 9px 18px; font-size: 0.9375rem; }

.kb-search--hero { margin: 0 auto; max-width: 620px; }
.kb-search--hero input { padding: 16px 20px; font-size: 1.0625rem; box-shadow: var(--kb-shadow-soft); }
.kb-search--hero button { padding: 16px 28px; font-size: 1.0625rem; }

/* --- Герой витрины --- */

.kb-hero {
  padding: 72px 32px 64px;
  text-align: center;
  background: var(--kb-canvas);
  border-bottom: 1px solid var(--kb-line);
}

.kb-hero h1 {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.kb-hero-lead {
  max-width: 560px;
  margin: 0 auto 32px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--kb-ink-soft);
}

.kb-hero-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 0.875rem;
  color: var(--kb-ink-soft);
}

.kb-hero-examples a {
  padding: 5px 12px;
  border: 1px solid var(--kb-line);
  border-radius: 999px;
  background: var(--kb-paper);
  color: var(--kb-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.kb-hero-examples a:hover {
  border-color: var(--kb-accent);
  color: var(--kb-accent-dark);
}

/* --- Витрина: карточки статей --- */

.kb-index {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 32px 8px;
}

.kb-group + .kb-group { margin-top: 44px; }

.kb-eyebrow {
  margin: 0 0 18px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kb-ink-soft);
}

/* auto-fit, а не auto-fill: пока в ветке одна статья, пустые колонки
   схлопываются и карточка занимает строку целиком, а не жмётся в треть
   ширины рядом с пустотой. Когда статей станет больше — сетка сама
   разложится в две-три колонки. */
.kb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.kb-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-l);
  background: var(--kb-paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kb-card:hover {
  border-color: var(--kb-accent);
  box-shadow: var(--kb-shadow-lifted);
  transform: translateY(-2px);
}

.kb-card-kind {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kb-accent-dark);
}

.kb-card-title {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Живая формулировка вопроса — не украшение: по ней человек узнаёт свой
   случай дословно и понимает, та ли это статья. */
.kb-card-question {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--kb-ink-soft);
}

.kb-index-note {
  max-width: 1040px;
  margin: 40px auto 0;
  padding: 0 32px;
  font-size: 0.9375rem;
  color: var(--kb-ink-soft);
}

/* --- Страница статьи --- */

.kb-main { display: block; }

.kb-index ~ .kb-index-note { margin-bottom: 0; }

.kb-article,
.kb-results {
  max-width: 760px;
  padding: 48px 32px 64px;
  line-height: 1.65;
}

.kb-layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.kb-nav {
  flex: 0 0 244px;
  padding: 48px 0;
  font-size: 0.9375rem;
}

.kb-nav-group > span {
  display: block;
  margin: 22px 0 8px;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kb-ink-soft);
}

.kb-nav ul { list-style: none; margin: 0; padding: 0; }

.kb-nav a {
  display: block;
  padding: 5px 0;
  color: var(--kb-ink-soft);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.15s ease;
}

.kb-nav a:hover { color: var(--kb-accent-dark); }

.kb-nav a.is-current { color: var(--kb-ink); font-weight: 600; }

.kb-article { padding-left: 0; padding-right: 0; }

.kb-article h1 {
  margin: 0 0 28px;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kb-article h2 {
  margin: 40px 0 14px;
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.kb-article h3 { margin: 28px 0 10px; font-weight: 600; font-size: 1.0625rem; }

.kb-article p { margin: 0 0 16px; }

.kb-article ul, .kb-article ol { margin: 0 0 16px; padding-left: 22px; }
.kb-article li { margin-bottom: 6px; }

.kb-article img {
  display: block;
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow-soft);
}

.kb-article table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 0.9375rem; }
.kb-article th, .kb-article td { border: 1px solid var(--kb-line); padding: 9px 13px; text-align: left; }
.kb-article th { background: var(--kb-canvas); font-weight: 600; }

.kb-article code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--kb-canvas);
  font-size: 0.9em;
}

.kb-article pre {
  padding: 16px 18px;
  border-radius: var(--kb-radius);
  background: var(--kb-canvas);
  overflow-x: auto;
}

.kb-article pre code { padding: 0; background: none; }

/* --- Результаты поиска --- */

.kb-results { margin: 0 auto; }

.kb-results h1 {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.015em;
}

.kb-results ul { list-style: none; margin: 0; padding: 0; }

.kb-results li {
  padding: 16px 0;
  border-bottom: 1px solid var(--kb-line);
}

.kb-results li a {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--kb-ink);
  text-decoration: none;
}

.kb-results li a:hover { color: var(--kb-accent-dark); }

.kb-results .kb-path {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--kb-ink-soft);
}

/* --- Подвал --- */

.kb-footer {
  margin-top: 64px;
  padding: 28px 32px 40px;
  border-top: 1px solid var(--kb-line);
  font-size: 0.9375rem;
  color: var(--kb-ink-soft);
}

.kb-footer a { margin-left: 6px; }

@media (max-width: 900px) {
  .kb-header { flex-wrap: wrap; padding: 14px 20px; }
  .kb-search--compact { margin-left: 0; width: 100%; }
  .kb-search--compact input { min-width: 0; }
  .kb-hero { padding: 48px 20px 44px; }
  .kb-search--hero { flex-direction: column; }
  .kb-index, .kb-index-note { padding-left: 20px; padding-right: 20px; }
  .kb-layout { flex-direction: column; gap: 0; padding: 0 20px; }
  .kb-nav { flex: none; width: 100%; padding: 24px 0 0; }
  .kb-article, .kb-results { padding: 28px 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .kb-card:hover { transform: none; }
}