/**
 * Семь приёмов раскладки на CSS Grid.
 *
 * Все размеры вынесены в переменные. Ловушки, из-за которых приёмы ломаются
 * молча, отмечены в пояснениях: их не видно ни в отладчике, ни на широком
 * экране разработчика.
 */

:root {
  --gk-gap: 12px;
  --gk-min: 240px;          /* минимальная ширина карточки в авторазмещении */
  --gk-ratio: 4 / 3;
  --gk-flow: 1rem;          /* шаг вертикального ритма */
  --gk-flow-heading: 2rem;  /* запас перед заголовком */
  --gk-stick-top: 16px;
  --gk-sidebar: 240px;
}

/* ---------------------------------------------------- бенто-сетка */
.gk-bento {
  display: grid;
  gap: var(--gk-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  /* grid-auto-flow: dense здесь намеренно НЕ стоит: он переставляет плитки
     и порядок на экране перестаёт совпадать с порядком обхода клавиатурой */
}
.gk-bento > .gk-2x2 { grid-column: span 2; grid-row: span 2; }
.gk-bento > .gk-2x1 { grid-column: span 2; }
.gk-bento > .gk-1x2 { grid-row: span 2; }

/* ------------------------------------------ авторазмещение по ширине */
.gk-auto {
  display: grid;
  gap: var(--gk-gap);
  /* min(100%, …) обязателен: жёсткий минимум шире окна переполняет страницу.
     auto-fit схлопывает пустые дорожки, auto-fill их держит — см. SKILL.md */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gk-min)), 1fr));
}
.gk-auto.gk-keep-tracks {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gk-min)), 1fr));
}

/* ------------------------------------------------ двенадцать колонок */
.gk-12 {
  display: grid;
  gap: var(--gk-gap);
  /* minmax(0, 1fr), а не 1fr: голый 1fr отказывается сжиматься уже
     содержимого, и длинное слово распирает сетку наружу */
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.gk-12 > .gk-c3 { grid-column: span 3; }
.gk-12 > .gk-c4 { grid-column: span 4; }
.gk-12 > .gk-c6 { grid-column: span 6; }
.gk-12 > .gk-c8 { grid-column: span 8; }
.gk-12 > .gk-c12 { grid-column: span 12; }

/* -------------------------------------------------- липкая панель */
.gk-sticky {
  display: grid;
  gap: var(--gk-gap);
  grid-template-columns: var(--gk-sidebar) minmax(0, 1fr);
  align-items: start;
  /* overflow здесь не задаём намеренно: overflow на предке отменяет
     прилипание молча, без всякого сообщения */
}
.gk-sticky > .gk-stick {
  position: sticky;
  top: var(--gk-stick-top);
}

/* ------------------------------------- выравнивание внутренностей */
.gk-subgrid {
  display: grid;
  gap: var(--gk-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gk-min)), 1fr));
  grid-template-rows: auto 1fr auto;
}
.gk-subgrid > * {
  /* карточка обязана ЗАНИМАТЬ строки, которые наследует, иначе subgrid
     тихо ведёт себя как обычная сетка */
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  gap: 6px;
}
@supports not (grid-template-rows: subgrid) {
  .gk-subgrid { grid-template-rows: none; }
  .gk-subgrid > * { grid-row: auto; display: flex; flex-direction: column; }
  .gk-subgrid > * > :last-child { margin-top: auto; }
}

/* ------------------------------------------ плитки заданных пропорций */
.gk-ratio {
  display: grid;
  gap: var(--gk-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gk-min)), 1fr));
}
.gk-ratio > * { aspect-ratio: var(--gk-ratio); }
.gk-ratio img, .gk-ratio video {
  width: 100%; height: 100%;
  object-fit: cover;        /* иначе картинка растянется под пропорцию */
}

/* --------------------------------------------------- слои в ячейке */
.gk-layers { display: grid; place-items: center; }
.gk-layers > * { grid-area: 1 / 1; }

/* ----------------------------------------------- вертикальный ритм */
/* отступ задаётся соседству: у первого элемента его нет никогда, и
   схлопывание полей не может дать разный результат в начале и в середине */
.gk-flow > * + * { margin-block-start: var(--gk-flow); }
.gk-flow > * + h2,
.gk-flow > * + h3 { margin-block-start: var(--gk-flow-heading); }
.gk-flow > h2 + *,
.gk-flow > h3 + * { margin-block-start: calc(var(--gk-flow) * .5); }