/* Сетка и композиции (визуальный план v3, разделы 6.4, 7, 14.3).
   Контейнер — в base.css, карточки — в components.css. Только токены из tokens.css.

   Страница = 2–4 композиции .section, между ними --section-gap (просторно).
   Композиция .compose = карточки разного размера, между ними --gap-tight (тесно).
   Порядок карточек в разметке = порядок важности: на телефоне они идут именно так. */

/* ===== Разделы страницы ===== */
.section { scroll-margin-top: calc(var(--header-h) + var(--header-offset) + var(--sp-4)); }
.section + .section { margin-top: var(--section-gap); }

/* ===== Композиция: телефон — 1 поток, планшет — 6 колонок, десктоп — 12 ===== */
.compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-tight);
  align-items: stretch;            /* карточки ряда тянутся по самой высокой (7.2) */
}
.compose > * { min-width: 0; }     /* широкие таблицы прокручиваются внутри, а не раздвигают сетку */

@media (min-width: 600px) {
  .compose { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* планшет: S и M — половина, L, XL и Full — вся ширина */
  .span-s, .span-m { --span: 3; }
  .span-l, .span-xl, .span-full { --span: 6; }
  .span-s, .span-m, .span-l, .span-xl, .span-full { grid-column: span var(--span); }
}

@media (min-width: 1024px) {
  .compose { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* размеры карточек из 12 колонок (7.2) */
  .span-s    { --span: 3; }
  .span-m    { --span: 4; }
  .span-l    { --span: 6; }
  .span-xl   { --span: 8; }
  .span-full { --span: 12; }

  /* Асимметрия первого экрана (7.1.3): блок начинается со 2-й–4-й колонки.
     Ставится вместе с размером: class="span-xl start-3" → колонки 3–10.
     Ширина берётся из --span: grid-column-start одним свойством затёр бы span. */
  .start-2 { grid-column: 2 / span var(--span, 1); }
  .start-3 { grid-column: 3 / span var(--span, 1); }
  .start-4 { grid-column: 4 / span var(--span, 1); }
}

/* ===== Узкая колонка по центру: тест (640 px), вход и регистрация (420 px) ===== */
.center-col {
  width: 100%;
  max-width: var(--quiz-width);
  margin-inline: auto;
}
.center-col--auth { max-width: var(--auth-width); }