/* ==========================================================================
   kursy · page-home.css — только раскладка главной (index.html, front-page.php).
   Компоненты — в components.css.
   Первый экран от 1200px: слева колонка — доска подбора, под ней панель направлений; справа сразу ведомость,
   чтобы без прокрутки было видно не меньше пяти строк рейтинга. Результат подбора выводится над ведомостью.
   До 1200px порядок сверху вниз: лента разделов (первый чип ведёт к ведомости), доска подбора, «Все направления», ведомость.
   .ku-home  __strip __side __main
   ========================================================================== */
.ku-home__strip { margin-top: var(--ku-s-4); }
.ku-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ku-s-5); margin-top: var(--ku-s-3); }
.ku-home__side { display: flex; flex-direction: column; gap: var(--ku-s-3); min-width: 0; }
.ku-home__side > * { flex: none; }
.ku-home__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ku-s-6); min-width: 0; }

@media (min-width: 1200px) {
  /* H1 главной в одну строку: кегль следует за шириной окна, на 1440px — 43px вместо 46px; отступы первого экрана плотнее */
  .ku-page--home .ku-hero { padding-top: var(--ku-s-2); }
  .ku-page--home .ku-hero > .ku-h1 { font-size: clamp(36px, 3vw, 44px); line-height: 1.1; }

  .ku-home__strip { margin-top: 0; }
  /* левая колонка: 248px, на широком окне — до 320px, чтобы ответы в списках доски не обрезались */
  .ku-home { grid-template-columns: clamp(var(--ku-side-w), calc(100vw - 1120px), 320px) minmax(0, 1fr); column-gap: var(--ku-s-6); align-items: start; margin-top: var(--ku-s-4); }
  /* колонка тянется на высоту ведомости: доска уезжает вверх, панель направлений прилипает к верху окна */
  .ku-home__side { align-self: stretch; gap: var(--ku-s-6); }
  .ku-home__side .ku-board { padding: var(--ku-s-4); }
  .ku-home__side .ku-board__title { font-size: 20px; line-height: 24px; }
  .ku-home__side .ku-board__steps { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--ku-s-3); }
}