/* Сторінка Game Servers (Figma 9:24182).

   ЧИСЛА ЗНЯТІ ЗІ СКРІНШОТА fig-games.png (845px на фрейм 1440, масштаб 0.587),
   бо квота Figma MCP на Starter-плані вичерпана й get_metadata по цьому вузлу
   не проходить. Округлені до сітки макета: герой 1080 по центру (як на
   головній), сітка 3×420 із зазором 20 у тих самих 1300, іконка 68, паддинг 16.
   При появі доступу — звірити вузол 9:24182 і поправити. */

.kb-games-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-gap-large);
  flex-wrap: wrap;
  padding: 24px 0;
}

/* --- Suggest a Guide --- */

.kb-suggest {
  flex: 0 0 300px;
  padding: var(--kb-gap);
}

.kb-suggest__title {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--kb-text);
}

.kb-suggest__text {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--kb-text-dim);
}

.kb-suggest__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--kb-gap);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-inner);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--kb-text);
  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):
   градієнт #007CEE -> #5F39CB і білий текст. Рамку гасимо, інакше вона ріже
   заливку по краю. Було border-color + color, і на темному тлі це читалось як
   «нічого не сталось» — саме на це й скаржився постановник. */
.kb-suggest__btn:hover,
.kb-suggest__btn:focus-visible {
  border-color: transparent;
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}

/* --- Фільтр жанрів --- */

.kb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* Таб фільтра — компонент Tab із макета (11054:15323). Hug 88x32 при тексті
   64x16 дає padding 8/12, а не 8/16. Шрифт button/small-14-bold: вага 700,
   не 600. Неактивний текст — grayscale/050 #D9E0E3, тобто майже білий; тут
   стояв --kb-text-dim #838788, і таби читались як вимкнені.

   Radius: у макеті це токен corner/corner-sm, самого значення без доступу до
   змінних файлу не прочитати. 8px узято з геометрії pill 88x32 у тій же
   пропорції, що в сусідніх компонентах (CTA_Guide_suggestion — radius 20 при
   висоті 88). Варто звірити, коли з'явиться доступ до Variables. */
.kb-filters__pill {
  padding: 8px 12px;
  border: 0;
  border-radius: var(--kb-radius-pill);
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: var(--kb-tab-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Той самий ховер, що в кнопки вище: неактивний таб при наведенні заливається
   градієнтом, а не просто світлішає текстом. */
.kb-filters__pill:hover,
.kb-filters__pill:focus-visible {
  background: var(--kb-gradient-brand);
  color: var(--kb-text);
}

/* Активний таб — суцільний акцент із БІЛИМ текстом. Темний текст лишився з
   часів світлої лаймової заливки; на #007CEE тема всюди ставить #fff (17 із 17
   акцентних заливок у css/new), тож тримаємось тієї ж пари. Градієнт тут не
   потрібен: він зарезервований за кнопками й рамками панелей. */
.kb-filters__pill--active {
  background: var(--kb-accent);
  color: var(--kb-text);
}

/* Активний таб уже залитий суцільним акцентом, тож його ховер — РЕВЕРС
   градієнта, як у .kb-btn: інакше наведення на активний таб не давало б жодної
   зміни тла. Це правило перебиває .kb-filters__pill:hover за специфічністю
   (два класи + :hover проти одного + :hover), тобто порядок у файлі тут не
   вирішує. */
.kb-filters__pill--active:hover,
.kb-filters__pill--active:focus-visible {
  background: var(--kb-gradient-brand-hover);
  color: var(--kb-text);
}

/* --- Сітка ігор --- */

.kb-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kb-gap-col);
  padding-bottom: 40px;
}

/* Картка гри. Розміри звірені з макетом 11054:15333 (Game_card): Fill 420x172,
   radius 24, padding 24, gap 12, заливка grayscale/800_50% і blur_main 20 —
   останні три дає .kb-surface, тож тут лишається геометрія.

   Висота 172 не задана: вона виходить сама з логотипа 124 плюс padding 24x2.
   Тому саме логотип тут визначає габарит картки, і міняти його треба з огляду
   на це. */
.kb-game {
  display: flex;
  align-items: flex-start;
  gap: var(--kb-gap);
  padding: var(--kb-pad-card);
  color: inherit;
  text-decoration: none;
}

/* Рамки в макеті НЕМА: у Game_card немає секції Borders, лише заливка. .kb-surface
   малює градієнтну рамку через ::before для панелей розділу, і на картках ігор
   вона зайва — саме її постановник назвав «бордери не відповідають макету». */
.kb-game.kb-surface::before { content: none; }

/* Прихована фільтром картка. Окремий клас, а не inline-стиль: так стан видно в
   інспекторі й у тестах. Складений селектор (а не просто .kb-game--hidden) —
   щоб порядок правил у файлі не вирішував: за фактом .kb-game { display:flex }
   нижче за текстом мав однакову специфічність і на практиці перебивав
   display:none, тож фільтр на сторінці Game Servers лише підсвічував активний
   таб і не приховував картки. */
.kb-game.kb-game--hidden { display: none; }

/* color — див. коментар у .kb-btn:hover: глобальний a:hover з бандла теми
   інакше перефарбовує назву гри в синій. Селектор ловить і <span role="link">:
   у панель тег <a> не друкуємо (godlike_kb_link_tag()). */
.kb-game:any-link:hover,
.kb-game[role="link"]:hover { background: var(--kb-accent-06); color: inherit; }
.kb-game[role="link"] { cursor: pointer; }

/* 124x124 — розмір шару minecraft-new logo в макеті. Разом із padding 24
   він і дає макетну висоту картки 172. */
.kb-game__icon {
  flex: 0 0 124px;
  width: 124px;
  height: 124px;
}

.kb-game__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kb-game__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* title/big-24-bold із макета, а не 20/24. */
.kb-game__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--kb-text);
}

/* body/big-16-regular із макета (16/20), а не 14/16. Колір grayscale/100
   #CDD2D4 — це і є --kb-text-muted. */
.kb-game__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--kb-text-muted);
}

@media screen and (max-width: 1199px) {
  .kb-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  /* DoD: на мобільному картки в один стовпець. */
  .kb-games { grid-template-columns: minmax(0, 1fr); }
  .kb-games-bar { flex-direction: column; align-items: stretch; }
  .kb-filters { margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  .kb-filters__pill { flex: 0 0 auto; white-space: nowrap; }
  .kb-suggest { flex: 1 1 auto; }
}