/* Широкая сетка страниц: одна на четыре оформления.

   🔴 Страница получает эту сетку, когда её тело помечено `page-wide`.
   Так страницы переводятся по одной, а правило живёт в одном месте:
   у каждого оформления своя обёртка (`wrap` или `container`), но ширина,
   поля и ступени у них общие — это геометрия, а не оформление.

   Сетка останавливается на 1760: дальше растут не столбцы, а длина строк,
   и связь элементов внутри карточки распадается. Поля дискретные —
   64/48/32/16, а не проценты от экрана: на 2560 и 1920 они получаются
   сами из предела сетки.

   Цветов и шрифтов здесь нет: их задаёт оформление. */

.page-wide { --frame: 1760px; --gutter: 64px; }

.page-wide .wrap,
.page-wide .container,
.page-wide .page-shell {
  width: min(var(--frame), calc(100% - var(--gutter) * 2));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* Ограничения колонок: именно они не дают ширине превратить текст в лапшу.
   Это ограничение строки, а не уменьшение шрифта — размер остаётся прежним */
.page-wide p,
.page-wide .section-lead,
.page-wide .lead { max-width: 68ch; }
.page-wide h1 { max-width: 22ch; }
.page-wide h2 { max-width: 28ch; }

@media (max-width: 1599px) { .page-wide { --gutter: 48px; } }
@media (max-width: 1279px) { .page-wide { --gutter: 32px; } }
@media (max-width: 720px) { .page-wide { --gutter: 16px; } }

/* Пункты нативного списка: свои отступы браузера у них не кратны восьми
   (1 и 2 пикселя), а списки есть на каждой странице с отбором */
.page-wide option { padding: 8px; }

/* Сетка карточек на широких страницах: та же, что на главной — четыре в ряд
   на широком экране, три на 1440 и 1280, две на планшете, одна на телефоне.
   Зазор 32 на всех ширинах. Классы у оформлений разные, правило одно.

   🔴 Селектор с телом (`body.page-wide`) намеренно: у классики сетка каталога
   описана как `.public-site .catalog-results .car-grid` — три класса, и без
   этого её зазор 24 побеждал наш 32. */
body.page-wide .car-grid,
body.page-wide .cards,
body.page-wide .catalog-results .car-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (min-width: 1600px) {
  body.page-wide .car-grid,
  body.page-wide .cards,
  body.page-wide .catalog-results .car-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  body.page-wide .car-grid,
  body.page-wide .cards,
  body.page-wide .catalog-results .car-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body.page-wide .car-grid,
  body.page-wide .cards,
  body.page-wide .catalog-results .car-grid { grid-template-columns: minmax(0, 1fr); }
}