/* ══════════════════════════════════════════════════════════════════════════
   layout.css — контейнер, вертикальный ритм секций и сетки.

   Брейкпоинты 576 / 768 / 992 / 1200 — значения Bootstrap, чтобы у публичной
   части и админки Фазы 3 была одна ментальная модель.

   Здесь НЕТ ни одного медиазапроса, меняющего отступ: боковое поле и ритм
   секции переопределяются в :root файла tokens.css. Компонент знает только
   про структуру, не про расстояния.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Контейнер ─────────────────────────────────────────────────────────── */

.container{
  width:100%;
  max-width:var(--layout-container);
  margin:0 auto;
  padding:0 var(--layout-gutter);
}

/* Контейнер ТЕКСТОВОЙ страницы — «О заводе», «Сотрудничество», «Постановка
   на учёт» и всё, что заведут формой дальше.

   ЧТО ЧИНИТСЯ. Текст такой страницы живёт в мере чтения .prose (70ch), а
   контейнер вокруг него был шириной во всю страницу. Колонка вставала у
   ЛЕВОГО края, справа оставалась пустая половина экрана, и страница
   выглядела брошенной, а не свёрстанной.

   ЧТО НЕ ЧИНИТСЯ И ПОЧЕМУ. Мера чтения. Строка во всю ширину широкого
   экрана читается плохо независимо от того, сколько там места, — .prose не
   тронут ни на знак. Меняется не длина строки, а ПОЛОЖЕНИЕ колонки:
   контейнер ужимается ровно до меры плюс боковые поля, а `margin:0 auto`
   правила выше ставит его посередине сам. Заголовок, текст и список
   документов оказываются одной колонкой.

   МЕРА ВЗЯТА ИЗ .prose, А НЕ ВЫПИСАНА ВТОРЫМ ЧИСЛОМ: два числа разъехались
   бы при первой правке, и текст перестал бы заполнять свою колонку.
   Прогон TextPageColumnTest сравнивает эти значения между собой.

   МОДИФИКАТОР СТАВИТСЯ НА СТРАНИЦЕ, А НЕ НА .prose. Та же .prose живёт на
   странице товара, вакансии, услуги и ремонта — там рядом с текстом стоят
   галерея, характеристики, полоса призыва и якорная навигация, и сужать
   страницу нельзя. Что правка туда не поехала, проверяется на отданных
   страницах этих типов. */
.container--text{
  max-width:calc(70ch + 2 * var(--layout-gutter));
}


/* ── Вертикальный ритм секций ──────────────────────────────────────────── */

.section{ padding:var(--layout-section-y) 0; }

/* Альтернативная полоса фона — чередование секций из утверждённого варианта. */
.section--alt{ background:var(--color-surface-alt); }


/* ── Сетка плиток категорий ────────────────────────────────────────────── */

.grid-tiles{
  display:grid;
  gap:var(--layout-gutter);
  grid-template-columns:1fr;
}
@media (min-width:576px){ .grid-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .grid-tiles{ grid-template-columns:repeat(3,1fr); } }


/* ── Сетка карточек товара ─────────────────────────────────────────────────
   Числа колонок контрактные (UI-SPEC §Layout): 4 / 3 / 2 / 1–2. Поэтому
   объявлены явными медиазапросами через repeat(N,1fr), а не автоподбором:
   auto-fit не гарантирует число колонок и растягивает единственную карточку
   на всю ширину — ровно тот отказ, который описан в zero-one-many E2. */

.grid-products{
  display:grid;
  gap:var(--layout-gutter);
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:359px){ .grid-products{ grid-template-columns:1fr; } }
@media (min-width:576px){ .grid-products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .grid-products{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .grid-products{ grid-template-columns:repeat(4,1fr); } }


/* ── Сетка новостей ───────────────────────────────────────────────────────
   Число колонок объявлено ЯВНО модификатором, а не автоподбором: при одной
   записи карточка не растягивается на всю ширину ряда. Правило для Twig
   Фазы 5: при нуле записей сетка не рендерится вовсе — вместо неё пустое
   состояние.

   ТРЕТЬЯ КОЛОНКА ВКЛЮЧАЕТСЯ НА 992px, А НЕ НА 768px. До плана 05-05 оба
   перехода стояли в одном медиазапросе, и лента уходила в три колонки уже
   на планшете — вопреки контракту 05-UI-SPEC.md §P1 («1 колонка, 2 от
   768px, 3 от 992px»). На 768px карточка новости при трёх колонках даёт
   около 230px ширины: заголовок в две строки туда не помещается, и кламп
   съедает половину названия статьи. 992px — та же граница, на которой
   уходят в три колонки плитки разделов (.grid-tiles) и карточки товаров
   (.grid-products); отдельный ритм у ленты был расхождением, а не
   решением. */

.grid-news{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .grid-news{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .grid-news--3{ grid-template-columns:repeat(3,1fr); } }


/* ── Сетка подвала ─────────────────────────────────────────────────────── */

.grid-footer{
  display:grid;
  gap:var(--space-7);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .grid-footer{ grid-template-columns:2fr 1fr 1fr; } }


/* ── Двухколоночный блок «контакты + карта» ────────────────────────────── */

.grid-split{
  display:grid;
  gap:0;
  grid-template-columns:1fr;
}
@media (min-width:992px){ .grid-split{ grid-template-columns:1.05fr .95fr; } }


/* ── Раскладка героя ───────────────────────────────────────────────────── */

.grid-hero{
  display:grid;
  gap:var(--space-7);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:992px){ .grid-hero{ grid-template-columns:1.15fr .85fr; } }