/* Публичная витрина базы знаний (issue #73).
 *
 * Лежит рядом с landing.css и подключается ПОСЛЕ него: витрина — то же лицо, что
 * лендинг (шапка, подвал, кнопки, шрифты), поэтому своих цветов и размеров тут нет —
 * только шкалы :root лендинга (радиусы --r-*, тени --shadow-*, ступени --fs-*).
 * Держит это тот же тест, что и лендинг (test_css_sizes_come_only_from_scales).
 *
 * Витрина — читалка: ни одного скрипта, никаких reveal-эффектов. Тело статьи
 * размечено тем же rich_html, что в кабинете, поэтому .kb-body / .rich-video / якоря
 * повторяют news.css, но на лендинговых токенах вместо переменных Tabler.
 */

/* ─── Каркас ─── */
.help-main { padding: 2.5rem 0 4rem; }
/* Подвал лендинга рассчитан на нахлёст финальной карты (--final-overlap); на витрине
   волны и карты нет — иначе над ним зияла бы пустая полоса в половину экрана. */
.help-main + .site-footer { padding-top: 3.5rem; }

.help-crumbs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.help-crumbs a { color: var(--purple); }
.help-crumbs a:hover { text-decoration: underline; }
.help-crumbs span[aria-hidden] { color: var(--text-light); }
.help-crumbs .is-current { color: var(--text-muted); }

/* ─── Шапка страницы и поиск ─── */
.help-hero { margin-bottom: 2.5rem; }
.help-hero h1 { font-size: var(--fs-h2); margin-bottom: .75rem; }
.help-hero.is-small h1 { font-size: var(--fs-2xl); }
.help-hero p { color: var(--text-muted); font-size: var(--fs-lg); max-width: 46rem; }
.help-hero.is-small p { font-size: var(--fs-md); }
.help-hero a { color: var(--purple); }
.help-hero a:hover { text-decoration: underline; }

.help-search { display: flex; gap: .75rem; max-width: 40rem; margin-top: 1.25rem; }
.help-search-input {
  flex: 1; min-width: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  font: inherit; font-size: var(--fs-md);
  background: #fff; color: var(--text);
}
/* Своё кольцо фокуса у поля — рамка: светлая --purple-light давала 2,7 : 1 к белому,
   ниже 3 : 1 для заметного состояния (WCAG 1.4.11, #130), фирменный фиолетовый — 5,7 : 1. */
.help-search-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: var(--shadow-1);
}

/* ─── Блоки списков ─── */
.help-block { margin-bottom: 2.5rem; }
.help-block > h2 {
  font-size: var(--fs-xl);
  margin-bottom: 1rem;
}

.help-cards {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .help-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .help-cards { grid-template-columns: repeat(3, 1fr); } }
/* Карточка раздела — строка «иконка · название и счётчик · бейдж» (проверка
   основателя 23.09, #77): иконка слева от названия, а не блоком над ним. */
.help-card {
  position: relative;
  display: flex; align-items: center; gap: .875rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: #fff;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.help-card:hover {
  transform: translateY(var(--lift));
  border-color: var(--purple-lighter);
  box-shadow: var(--shadow-2);
}
.help-card-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.help-card-title { font-weight: 600; font-size: var(--fs-lg); }
/* Иконка раздела (#77): лавандовая подложка, контур — цветом раздела; сам контур —
   инлайн-SVG из kb_icons (шрифта Tabler на витрине нет). Цвета — палитра Tabler, чтобы
   кабинет и витрина красили один раздел одинаково; имена классов = kb.COLORS. */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: var(--r-s);
  background: var(--purple-bg);
  color: var(--purple);
}
.help-icon svg { width: 1.5rem; height: 1.5rem; }
.help-icon.is-small { width: 2rem; height: 2rem; }
.help-icon.is-small svg { width: 1.125rem; height: 1.125rem; }
.help-title-with-icon { display: flex; align-items: center; gap: .75rem; }
.help-icon.is-primary { color: #066fd1; }
.help-icon.is-secondary { color: #667382; }
.help-icon.is-success { color: #2fb344; }
.help-icon.is-blue { color: #206bc4; }
.help-icon.is-azure { color: #4299e1; }
.help-icon.is-indigo { color: #4263eb; }
.help-icon.is-purple { color: #ae3ec9; }
.help-icon.is-pink { color: #d6336c; }
.help-icon.is-red { color: #d63939; }
.help-icon.is-orange { color: #f76707; }
.help-icon.is-yellow { color: #f59f00; }
.help-icon.is-lime { color: #74b816; }
.help-icon.is-green { color: #2fb344; }
.help-icon.is-teal { color: #0ca678; }
.help-icon.is-cyan { color: #17a2b8; }
.help-card-count { color: var(--text-muted); font-size: var(--fs-sm); }
.help-badge {
  margin-left: auto; flex-shrink: 0;   /* в строке карточки — у правого края */
  padding: .125rem .625rem;
  border-radius: var(--r-pill);
  background: var(--purple-bg-2); color: var(--purple-dark);
  font-size: var(--fs-xs); font-weight: 600;
}
.help-badge.is-new { background: var(--gold); color: var(--midnight); }

.help-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  background: #fff;
  overflow: hidden;
}
.help-item {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-light);
  transition: background .15s;
}
.help-item:first-child { border-top: 0; }
.help-item:hover { background: var(--purple-bg); }
/* Список обрезает всё за своей рамкой (overflow: hidden) — кольцо фокуса строки внутрь */
.help-item:focus-visible { outline-offset: -3px; }
.help-item-title { font-weight: 600; }
.help-item-summary {
  color: var(--text-muted); font-size: var(--fs-sm);
  white-space: pre-line;
}
/* Просмотры: подпись, а не показатель — тише описания и без своей строки-акцента. */
.help-item-views { color: var(--text-muted); font-size: var(--fs-xs); }   /* --text-light — 2,6 : 1 (#130) */

.help-note { color: var(--text-muted); margin-bottom: 1.5rem; }
.help-note a { color: var(--purple); }
.help-empty { margin-bottom: 2.5rem; }
.help-empty h2 { font-size: var(--fs-xl); margin-bottom: .5rem; }
.help-empty p { color: var(--text-muted); }

.help-pages {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin: -1.5rem 0 2.5rem;
  font-size: var(--fs-sm);
}
.help-pages a, .help-pages span {
  min-width: 2.25rem; padding: .375rem .625rem;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  text-align: center;
}
.help-pages a:hover { border-color: var(--purple-lighter); color: var(--purple); }
.help-pages .is-current {
  background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 600;
}

/* ─── Статья ─── */
.help-article {
  max-width: 44rem;                 /* длина строки, на которой текст ещё читается */
  margin-bottom: 2.5rem;
}
.help-article h1 { font-size: var(--fs-h2); margin-bottom: .75rem; }
.help-article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
  font-size: var(--fs-sm);
}
.help-tag {
  padding: .125rem .625rem;
  border-radius: var(--r-pill);
  background: var(--purple-bg-2); color: var(--purple-dark);
  font-weight: 600;
}
.help-tag:hover { background: var(--purple-lighter); }
.help-updated { color: var(--text-muted); }
.help-lead {
  font-size: var(--fs-lg); color: var(--text-muted);
  white-space: pre-line;            /* короткое описание пишут с переносами строк */
}

.help-toc {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--purple);
  border-radius: var(--r-s);
  background: var(--purple-bg);
}
.help-toc-title { font-weight: 700; margin-bottom: .375rem; }
.help-toc ol { margin: 0; padding-inline-start: 1.25rem; }
.help-toc ul { margin: .125rem 0 0; padding-inline-start: 1.25rem; list-style-type: circle; }
.help-toc li + li { margin-top: .125rem; }
.help-toc a { color: var(--purple-dark); }
.help-toc a:hover { text-decoration: underline; }

/* ─── Тело статьи: тот же HTML, что в кабинете (rich_html) ─── */
.kb-body { overflow-wrap: anywhere; }
.kb-body a { color: var(--purple); text-decoration: underline; }
.kb-body img { max-width: 100%; height: auto; border-radius: var(--r-s); }
/* Подзаголовки текста: в редакторе h3 / h4, на витрине — h2 / h3 под h1 страницы
   (сдвиг при показе, #130; public_site.TEXT_HEADING_SHIFT). Вид — прежний. */
.kb-body h2 { font-size: var(--fs-xl); margin: 2rem 0 .75rem; }
.kb-body h3 { font-size: var(--fs-lg); margin: 1.5rem 0 .5rem; }
.kb-body h2[id], .kb-body h3[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.kb-body ul, .kb-body ol { padding-inline-start: 1.5rem; }
.kb-body li { margin-bottom: .25rem; }
.kb-body blockquote {
  margin: 0 0 1rem;
  padding: .25rem 0 .25rem 1rem;
  border-inline-start: 3px solid var(--purple-lighter);
  color: var(--text-muted);
}
.kb-body > :first-child { margin-top: 0; }
.kb-body > :last-child { margin-bottom: 0; }

/* Картинка — блок (#122): те же классы набора rich_html.IMAGE_STYLES, что в кабинете
   (news.css), на токенах лендинга. По умолчанию — по ширине текста, по центру. */
.rich-image { margin: 0 0 1.25rem; clear: both; }
.rich-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--r-s); }
.rich-image figcaption {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}
.rich-image.is-half { width: 50%; margin-inline: auto; }
.rich-image.is-third { width: 33.333%; margin-inline: auto; }
.rich-image.is-half img, .rich-image.is-third img { width: 100%; }
.rich-image.is-left { float: left; clear: left; margin: .25rem 1.5rem 1rem 0; }
.rich-image.is-right { float: right; clear: right; margin: .25rem 0 1rem 1.5rem; }
.rich-image.is-left figcaption, .rich-image.is-right figcaption { text-align: start; }
.rich-image.is-bordered img { border: 1px solid var(--border); }
.rich-image.is-shadowed img { box-shadow: var(--shadow-2); }
/* Обтекание не выходит за текст и не подхватывает следующий раздел. Подзаголовки на
   витрине — h2 / h3 (сдвиг при показе, #130). */
.kb-body::after { content: ""; display: table; clear: both; }
.kb-body h2, .kb-body h3 { clear: both; }

/* Плеер видео (#55/#63): разметку строит сервер, здесь только адаптивная обёртка. */
.rich-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--purple-bg-2);
}
.rich-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─── «Остались вопросы?» ─── */
.help-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--r-l);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(124,58,237,.10) 0%, transparent 70%),
    var(--purple-bg);
  border: 1px solid var(--purple-lighter);
}
.help-cta > div { flex: 1 1 18rem; }
.help-cta h2 { font-size: var(--fs-xl); margin-bottom: .375rem; }
.help-cta p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.help-cta a[href^="mailto:"] { color: var(--purple); }

/* Картинка на телефоне (#122): всегда по ширине текста, без обтекания. */
@media (max-width: 575.98px) {
  .rich-image.is-half, .rich-image.is-third { width: auto; }
  .rich-image.is-left, .rich-image.is-right { float: none; margin: 0 0 1.25rem; }
}

/* ─── Телефон: ни одного горизонтального пикселя за край ─── */
@media (max-width: 599px) {
  .help-main { padding: 1.5rem 0 2.5rem; }
  .help-search { flex-direction: column; }
  .help-search .btn { justify-content: center; }
  .help-cta { padding: 1.5rem; }
  .help-cta .btn { width: 100%; justify-content: center; }
}