/* Сітка карток і CTA-ряд головної бази знань.
   Числа з макета: панель padding 24, gap між рядами 20, між картками 16;
   на мобільному один стовпець із карткою 200px по центру і gap 12. */

.kb-cards {
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
  padding: var(--kb-pad-card-mob);
}

.kb-cards__row {
  display: grid;
  gap: var(--kb-gap);
  /* Мобільний: один стовпець, картка 200px по центру — як у фреймі 360. */
  grid-template-columns: minmax(0, 200px);
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .kb-cards { gap: var(--kb-gap-large); padding: var(--kb-pad-card); }
  .kb-cards__row { gap: var(--kb-gap-grid); justify-content: stretch; }
  .kb-cards__row--fifth { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kb-cards__row--third { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Планшет: пʼять у ряд не влазить, три — так. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .kb-cards__row--fifth { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* Слот іконки ФІКСОВАНОЇ висоти, а не flex: 1.
   Раніше тут стояло flex: 1 1 auto з коментарем «так само поводиться макет» —
   і це було неправдою. При flex-grow слот з'їдав різницю в довжині опису, тож
   іконка на картці без лічильника статей ставала більшою за сусідні: заміряно
   138px проти 120px на Getting Started і Game Servers. У макеті (1:3165) усі
   іконки ряду однакового масштабу, а різницю бере на себе текст.

   Ширина картинки — 140px, тобто натуральний 1x-розмір із макета (експорт
   зроблений @2x, звідси 280px у файлі). Файли квадратні (280x280), а предмет
   у них обрізаний по контенту й вписаний у квадрат — так він торкається краю
   однією віссю і на екрані виходить рівно того ж масштабу, що в макеті, де
   іконки задані обрізаними (icon/billing 140x123, icon 140x85.39 на Game
   Servers, icon/Getting Started 140x140). Квадрат тут навмисно: при
   height: auto вертикальна іконка з натуральними пропорціями впиралась би в
   max-height і спотворювалась, бо ширина за max-height не перераховується.
   Однакову висоту карток у ряду дає сама grid-сітка (елементи тягнуться),
   слот для цього не потрібен. */
.kb-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 140px;
  border-radius: var(--kb-radius-inner);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.2));
}

.kb-card__icon img {
  width: 140px;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.kb-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.kb-card__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--kb-text);
}

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

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

/* Клікабельна картка — <a> або <span role="link"> (у панель тег <a> не
   друкуємо, godlike_kb_link_tag()). Селектор через :any-link/[role=link], а не
   просто .kb-card: картка без адреси рендериться <div>, і піднімати її на
   ховері не треба. */
.kb-card:any-link,
.kb-card[role="link"] { transition: transform 0.15s ease; cursor: pointer; }
/* color — проти глобального a:hover{color:#1262b3} з бандла теми: у спокої
   картка успадковує колір, і на ховері має успадковувати так само. */
.kb-card:any-link:hover,
.kb-card:any-link:focus-visible,
.kb-card[role="link"]:hover,
.kb-card[role="link"]:focus-visible { transform: translateY(-2px); color: inherit; }
.kb-card:any-link:focus-visible,
.kb-card[role="link"]:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 4px; }

/* --- CTA-ряд --- */

.kb-cta {
  display: grid;
  gap: var(--kb-gap);
  margin: var(--kb-gap) 0 40px;
  grid-template-columns: minmax(0, 1fr);
}

.kb-cta__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kb-gap);
  padding: var(--kb-pad-card-mob);
}

.kb-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
  width: 100%;
}

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

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

/* Мобільний: кнопка на всю ширину, іконки немає — так у фреймі 360. */
.kb-cta__btn { width: 100%; }
.kb-cta__icon { display: none; }

@media screen and (min-width: 768px) {
  .kb-cta {
    gap: var(--kb-gap-grid);
    margin: 32px 0 70px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-cta__card { padding: var(--kb-pad-card); }
  .kb-cta__text { max-width: 60%; }
  .kb-cta__btn { width: auto; }

  .kb-cta__icon {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    right: 24px;
    width: 157px;
    height: 157px;
    padding: 20px;
    border-radius: var(--kb-radius-card);
    transform: translateY(-50%);
    overflow: hidden;
  }

  .kb-cta__icon img { width: auto; height: auto; max-width: 100%; max-height: 117px; }
}