/* ПРИМІТИВИ РОЗКЛАДКИ (I-0251 §2.2). Розкладку складаєш із них, а не з
   @media за шириною вікна: кількість колонок і перенос рахує вміст і власний
   контейнер. Потрібна поведінка під ширину блоку — .l-cq і @container.
   Параметри — змінні на самому елементі (style="--l-min:14rem"), типові
   значення — кроки шкали --space-*. Жива сторінка правил — /styleguide. */

/* Стовпчик із проміжком: форми, тіла вікон, панелі. */
.l-stack { display: flex; flex-direction: column; gap: var(--l-gap, var(--space-6)); }
.l-stack > * { margin-block: 0; }

/* Ряд, що переноситься: чипи, мітки, дрібні дії. */
.l-cluster { display: flex; flex-wrap: wrap; align-items: var(--l-align, center); gap: var(--l-gap, var(--space-4)); }

/* Назва ліворуч, дії праворуч; коли назві лишається менше --l-min — дії під нею. */
.l-split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--l-gap, var(--space-5) var(--space-6)); }
.l-split > :first-child { flex: 1 1 var(--l-min, 18rem); min-width: 0; }

/* Сітка без запитів: колонок стільки, скільки влазить по --l-min. */
.l-grid { display: grid; gap: var(--l-gap, var(--space-6));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--l-min, 14rem), 100%), 1fr)); }

/* Бічна + вміст. Стає стовпчиком сама, щойно вмісту лишилось менше --l-main-min. */
.l-sidebar { display: flex; flex-wrap: wrap; gap: var(--l-gap, var(--space-6)); }
.l-sidebar > :first-child { flex: 1 1 var(--l-side, 15rem); }
.l-sidebar > :last-child { flex: 999 1 0; min-inline-size: min(var(--l-main-min, 55%), 100%); }

/* Ряд → стовпчик, коли контейнер вужчий за --l-at: пари полів, порівняння. */
.l-switch { display: flex; flex-wrap: wrap; gap: var(--l-gap, var(--space-6)); }
.l-switch > * { flex-grow: 1; flex-basis: calc((var(--l-at, 30rem) - 100%) * 999); min-width: 0; }

/* Обгортка для @container у компонентах усередині. */
.l-cq { container-type: inline-size; }

/* ── Сітка плиток сторінки: краї зон збігаються ──────────────────────────
   ОДНА сітка колонок на сторінку: ширину колонки рахує контейнер, кожна зона
   (.l-zone) бере ці самі колонки через subgrid, плитка займає 1 колонку або 2
   (.is-2). Своєї сітки з іншою мінімальною шириною в зони нема — тоді краї
   плиток збігаються на будь-якій ширині. По висоті так само: ряди зони
   однакові, висока плитка (.is-tall) займає два ряди, маленькі стають поруч
   (dense), без дірок. Сітка сама собі контейнер: на одну колонку .is-2 не
   розпирає сторінку. Поріг 23rem = дві колонки по типових 11rem + проміжок. */
.l-tiles { --l-min: 11rem; container-type: inline-size; display: grid; gap: var(--l-gap, var(--space-6));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--l-min), 100%), 1fr)); }
.l-tiles > .l-zone { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  grid-template-rows: auto; grid-auto-rows: 1fr; grid-auto-flow: row dense; gap: var(--space-5) var(--l-gap, var(--space-6)); }
.l-zone > .l-zone-h { grid-column: 1 / -1; margin: var(--space-4) 0 0; font: 700 .76rem var(--font);
  letter-spacing: .05em; text-transform: uppercase; color: var(--hint); }
.l-tiles .is-2 { grid-column: span 2; }
.l-tiles .is-tall { grid-row: span 2; }
@container (max-width: 23rem) /* ui-lint: allow — дві колонки по 11rem + проміжок */ {
  .l-tiles .is-2 { grid-column: 1 / -1; }
  .l-tiles .is-tall { grid-row: auto; }
}