/* design-base/layout.css — примитивы раскладки (Every Layout). НЕ МЕНЯЕТСЯ.
   Идея: отступ — свойство ОТНОШЕНИЯ между соседями, а не элемента.
   Перестроение по месту в контейнере, без @media-брейкпоинтов.
   Источник: every-layout.dev, research/design-layout-hierarchy.md. */

/* Stack — вертикальный ритм. Отступ только МЕЖДУ соседями (первый без отступа). */
.stack > * + * { margin-block-start: var(--stack-gap, var(--space-16)); }

/* Cluster — группа с равными зазорами, переносится как слова. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-8));
  align-items: center;
}

/* Sidebar — «узкое + широкое», сваливается в столбец само. */
.sidebar { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.sidebar > .sidebar__aside { flex-grow: 1; }
.sidebar > .sidebar__main  { flex-grow: 999; min-inline-size: 50%; }

/* Switcher — или в ряд, или в столбец, без кривых промежуточных состояний. */
.switcher { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* Cover — шапка / центр / подвал на высоту экрана. */
.cover { display: flex; flex-direction: column; min-block-size: 100vh; gap: var(--space-16); }
.cover > .cover__center { margin-block: auto; }

/* Grid — авто-колонки без брейкпоинтов. */
.grid {
  display: grid;
  gap: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
}

/* Center — мера строки по центру. */
.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-16);
}

/* Frame — соотношение сторон медиа. */
.frame { aspect-ratio: var(--frame-ratio, 16 / 9); overflow: hidden; }
.frame > * { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Icon — размер от кегля соседнего текста. */
.icon { inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }