/* Каркас сторінки категорії бази знань (Figma 18:5267).
   ЦЕЙ ФАЙЛ ПІДКЛЮЧАЄТЬСЯ І НА СТОРІНЦІ СТАТТІ: за рішенням постановника стаття —
   той самий каркас плюс TOC у сайдбарі, тож kb-single.css додає лише типографіку
   тіла статті, а три колонки, навігація, сайдбарні віджети живуть тут.

   Геометрія з get_metadata вузла 18:5267, не з ока:
   1440 - 2×70 = 1300 контенту; колонки 310 / 640 / 310 із зазорами 20;
   пункт навігації 278×40 із зазором 8; рядок статті 624×76 (100 при переносі
   заголовка) із зазором 16; правий віджет 310 із паддингом 16.

   Декоративний скролбар списку (21:6862) свідомо не реалізований: він потребує
   внутрішнього скрол-контейнера, а саме такий контейнер у фазі 1 дав другу
   прокрутку. Список рендериться цілком, сторінка скролиться сама. */

/* --- Три колонки --- */

.kb-cols {
  display: flex;
  align-items: flex-start;
  gap: var(--kb-gap-col);
  padding: 40px 0;
}

.kb-cols__side { flex: 0 0 var(--kb-col-side); }

/* min-width:0 обовʼязково: інакше довгий заголовок статті розтягує flex-колонку
   і сітка їде. */
.kb-cols__main { flex: 1 1 auto; min-width: 0; }

.kb-cols__aside {
  flex: 0 0 var(--kb-col-side);
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap-col);
}

/* Нижче 1200px три колонки не вміщаються (1300 контенту) — складаємо в стовпець.

   Порядок узятий із мобільного фрейму макета 22:14620 (360x4584), а не вигаданий:
   крошки -> шапка -> пошук -> POPULAR ARTICLES -> список статей -> навігація по
   іграх -> Need More Help.

   Через це недостатньо переставити три колонки через order: Popular Articles і
   Need More Help лежать в ОДНОМУ контейнері (.kb-cols__aside), а між ними в
   мобільному порядку вклинюються список статей і навігація. flex order працює
   лише між сиблінгами, тож на мобільному знімаємо бокси .kb-cols__main і
   .kb-cols__aside через display: contents — їхні діти стають прямими flex-дітьми
   .kb-cols, і кожному можна задати власний order.

   Скоуп .kb-category ОБОВʼЯЗКОВИЙ: цей файл підключається і на сторінці статті
   (вона той самий каркас), а там свій порядок і макета для неї немає. */
@media screen and (max-width: 1199px) {
  .kb-cols {
    flex-direction: column;
    padding: 24px 0;
    /* ОБОВʼЯЗКОВО разом із display: contents нижче.
       На десктопі .kb-cols має align-items: flex-start (щоб колонки не тягнулись
       по висоті). Коли display: contents знімає бокси .kb-cols__main/__aside,
       їхні діти стають прямими flex-дітьми .kb-cols — і успадковують той самий
       flex-start, тобто по поперечній осі стають shrink-to-fit.
       Для .kb-articles це катастрофа: .kb-article__excerpt має
       white-space: nowrap, тож min-content рядка = повна ширина тексту, і рядок
       розпирає колонку замість того, щоб обрізатись трикрапкою (заміряно: 2375px
       у колонці 484px, обрізало .site-wrapper). Плюс .kb-widget і .kb-help
       ставали рваними напівширинними картками.
       stretch повертає нормальну ширину всім промоційним дітям одразу — і тим,
       які тут не перелічені. */
    align-items: stretch;
  }

  .kb-cols__side,
  .kb-cols__main,
  .kb-cols__aside {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Стаття: простий стек, порядок як у розмітці. */
  .kb-cols__main { order: 1; }
  .kb-cols__aside { order: 2; }
  .kb-cols__side { order: 3; }

  /* Категорія: порядок макета. */
  .kb-category .kb-cols__main,
  .kb-category .kb-cols__aside { display: contents; }

  .kb-category .kb-crumbs { order: 1; }
  .kb-category .kb-cathead { order: 2; }
  .kb-category .kb-subcats { order: 3; }
  .kb-category .kb-cols__main .kb-search { order: 4; }
  .kb-category .kb-widget { order: 5; }
  .kb-category .kb-articles,
  .kb-category .kb-empty { order: 6; }
  .kb-category .kb-pager { order: 7; }
  .kb-category .kb-cols__side { order: 8; }
  .kb-category .kb-help { order: 9; }
}

/* --- Ліва навігація --- */

/* Панель списку категорій — своя, а НЕ .kb-surface: у макеті шар side_bar має
   заливку grayscale/800_50%, radius 24, padding 16, gap 8 і blur_main 20, але
   РАМКИ в нього немає взагалі (звірено на фреймі Minecraft_page: секції Borders
   у шара просто нема). .kb-surface же малює 1px градієнтної рамки на всі боки —
   через це список і виглядав не так, як у макеті. Рамку мають герой і панель
   карток, список — ні. */
.kb-nav {
  border-radius: var(--kb-radius-card);
  background: var(--kb-surface-50);
  backdrop-filter: blur(20px);
  padding: 16px;
}

.kb-nav__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--kb-radius-inner);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--kb-text-muted);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ховер — світлий налив, а не блідий синій: активний стан у макеті вже синій
   (Gradient/Chat), тож ховер мусить від нього відрізнятись, інакше на наведенні
   рядок виглядав майже як активний. Стану hover у макеті немає — компонент Tab
   має лише state on/off — тож це наше рішення, і воно навмисно нейтральне. */
.kb-nav__link:hover,
.kb-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--kb-text);
}

/* Активний рядок — Gradient/Chat із макета (компонент Tab, state=on) і БІЛИЙ
   текст. Було rgba(акцент, .12) із синім текстом — і заливка, і колір тексту
   не ті. */
.kb-nav__item--active .kb-nav__link {
  background: var(--kb-gradient-chat);
  color: var(--kb-text);
}

.kb-nav__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Горизонтальної прокрутки пілюль на мобільному тут НЕМА, і це не забуто.
   Вона тут була, поки квота Figma MCP не давала прочитати мобільний фрейм, — і
   виявилась вигадкою: у макеті 22:14620 навігація по іграх на 360px лишається
   вертикальним списком з іконками, просто переїжджає під список статей. */

/* --- Шапка категорії --- */

.kb-cathead {
  display: flex;
  align-items: center;
  gap: var(--kb-gap);
  margin: 0 0 var(--kb-gap-large);
}

.kb-cathead__icon {
  flex: 0 0 120px;
  width: 120px;
  height: auto;
  object-fit: contain;
}

.kb-cathead__title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 40px;
  line-height: 44px;
  color: var(--kb-text);
}

.kb-cathead__desc {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--kb-text-muted);
}

@media screen and (max-width: 767px) {
  .kb-cathead__icon { flex: 0 0 72px; width: 72px; }
  .kb-cathead__title { font-size: 28px; line-height: 32px; }
  .kb-cathead__desc { font-size: 14px; line-height: 18px; }
}

/* --- Підкатегорії ---
   Блока немає в макеті: додано, бо плагін звужує запит категорії до
   include_children => FALSE, і без цього рядка статті підкатегорій недосяжні
   зі сторінки батька. Стиль повторює пілюлі фільтра, щоб не вводити нову
   візуальну сутність. */

.kb-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--kb-gap-large);
}

.kb-subcats__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-inner);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: var(--kb-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Ховер — ЗАЛИВКА градієнтом і білий текст, як у кнопки «Admin Panels» у хедері
   (.site-header__panels у css/new/common.css). Рамку гасимо, інакше вона ріже
   заливку по краю. Перекрашеної рамки з текстом тут було не видно на темному
   тлі. */
.kb-subcats__chip:hover,
.kb-subcats__chip:focus-visible {
  border-color: transparent;
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}

.kb-subcats__count {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: var(--kb-text-dim);
}

/* Пошук у центральній колонці — на всю її ширину, а не 640 як у герої головної. */
.kb-cols__main .kb-search {
  max-width: none;
  margin: 0 0 var(--kb-pad-card);
}

/* --- Список статей --- */

.kb-articles {
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-article { border-radius: var(--kb-radius-btn); }

.kb-article__link {
  display: flex;
  align-items: center;
  gap: var(--kb-gap);
  padding: 16px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.kb-article__link:hover,
.kb-article__link:focus-visible { background: var(--kb-accent-06); color: inherit; }

/* Тіло рядка — флекс-айтем, тож блочне вже за рахунок блокіфікації; display
   виставлений явно, щоб він не залежав від цього побічного ефекту. */
.kb-article__body { display: block; flex: 1 1 auto; min-width: 0; }

/* Заголовок рядка — <h2> (article-row.php, як і в оригіналі плагіна), тож
   display: block він має вже сам. Правило лишається явним разом із margin: 0 і
   типографікою: саме ця трійця перебиває темові h1..h6 { margin: .4em 0;
   font-weight: 900 } і h2 { font-size: 36px } — за специфічністю класу проти
   елемента, а не за порядком файлів. Приберете margin: 0 — рядок роз'їде
   темовий відступ заголовка. */
.kb-article__title {
  display: block;
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--kb-text);
}

/* Один рядок з трьома точками — так і в макеті («…reset world magic button...»).
   Три точки дає САМЕ display: block: на inline-боксі overflow і text-overflow
   інертні, а white-space: nowrap лишається робочим — тобто без блока довгий
   відривок просто виїжджав би за колонку (заміряно 1125px у колонці 500px) і
   різався .site-wrapper { overflow: hidden } посеред слова. Приберете
   display: block — повернете баг. */
.kb-article__excerpt {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text-muted);
}

.kb-article__chevron {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.kb-article__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-top: 2px solid var(--kb-text-muted);
  border-right: 2px solid var(--kb-text-muted);
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .kb-article__title { font-size: 16px; line-height: 20px; }
  .kb-doc-icon { width: 24px; height: 24px; }
  .kb-article__chevron { display: none; }
}

/* --- Popular Articles --- */

.kb-poplist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-poplist__link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--kb-text);
  text-decoration: none;
}

.kb-poplist__link:hover,
.kb-poplist__link:focus-visible { color: var(--kb-accent); }

.kb-poplist .kb-doc-icon { width: 20px; height: 20px; }

/* --- Need More Help? --- */

.kb-help { padding: var(--kb-pad-card); }

.kb-help__title {
  margin: 0 0 var(--kb-gap);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--kb-text);
}

.kb-help__text {
  margin: 0 0 var(--kb-gap);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--kb-text-muted);
}

/* --- Пагінація списку (hkb_posts_nav_link) --- */

.kb-pager {
  display: flex;
  gap: var(--kb-gap);
  margin-top: var(--kb-gap-large);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
}

.kb-pager a {
  padding: 8px 12px;
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-inner);
  color: var(--kb-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Той самий ховер, що в чіпів вище. */
.kb-pager a:hover,
.kb-pager a:focus-visible {
  border-color: transparent;
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}