/* ══ layout.css — контейнер, секции, сетки ══
   Брейкпоинты числами: 768 планшет, 1024 десктоп (легенда в tokens.css) */

.container { width: min(var(--container), 94%); margin-inline: auto; }

/* Каждая секция объявляет свой фон и в --section-bg: залипающая колонка
   таблицы берёт непрозрачный фон оттуда (inherit давал transparent — под
   прозрачной колонкой проезжали бы цифры остальных колонок). */
.section { padding-block: var(--section-py); --section-bg: var(--clr-bg); background: var(--section-bg); }
.section--muted { --section-bg: var(--clr-bg-2); }
.section--darker { --section-bg: var(--clr-bg-3); }
.section--surface { --section-bg: var(--clr-surface); }

.section__head { max-width: 62ch; margin-bottom: var(--sp-10); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__foot { margin-top: var(--sp-8); }

/* Секции групп тарифов: якорь не уезжает под залипающую шапку */
.section[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* ── Сетки. Карточки выравниваются по строке, содержимое растягивается ── */
.grid { display: grid; gap: var(--sp-6); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid > * { min-width: 0; }

/* ── Hero: заголовок брендовый, действия оливковые ── */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero__lead { margin-top: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* Всякий блок, красящий себя фоном, обязан объявить --section-bg тем же
   значением: иначе вложенный элемент возьмёт фолбэк surface (белое на бежевом). */
.page-hero {
  /* Было sp-12/sp-8 (48/32) — с уменьшенным --section-py стык hero→контент
     давал 128px, Freony 4034914 отмечала стрелками. Теперь sp-10/sp-6
     (40/24): стык 24+64 = 88px, ритм ровнее к межсекционному. */
  padding-block: var(--sp-10) var(--sp-6);
  --section-bg: var(--clr-bg-2);
  background: var(--section-bg);
}

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}