/* ── Контейнер ───────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Секции ──────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-y);
}

.section-sm {
  padding-block: var(--section-sm-y);
}

/* Чередование фонов */
.section-cream  { background: var(--bg); }
.section-white  { background: var(--bg-white); }
.section-kraft  { background: var(--bg-kraft); }
.section-dark   { background: var(--brand); }
.section-forest { background: var(--brand-light); }

/* ── Section Header (центрированный блок заголовка) ─────────────────── */
.section-header {
  margin-bottom: 64px;
}

.section-header.center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 64px;
}

.section-header h2 {
  margin-bottom: 16px;
}

.section-header .lead {
  max-width: 520px;
}

.section-header.center .lead {
  margin-inline: auto;
}

/* ── Гриды ───────────────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.grid-60-40 {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 80px;
  align-items: center;
}

.grid-50-50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Flex утилиты ────────────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm  { gap: 12px; }
.flex-gap     { gap: 24px; }
.flex-gap-lg  { gap: 40px; }
.flex-wrap    { flex-wrap: wrap; }
.flex-col     { flex-direction: column; }

/* ── Общие утилиты ───────────────────────────────────────────────────── */
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* ── Адаптив ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4   { grid-template-columns: repeat(2, 1fr); }
  .grid-60-40 { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
  .grid-2   { grid-template-columns: 1fr; }
  .grid-3   { grid-template-columns: 1fr; }
  .grid-4   { grid-template-columns: 1fr; }
  .grid-50-50 { grid-template-columns: 1fr; gap: 40px; }
  .section-header { margin-bottom: 44px; }
  .section-header.center { margin-bottom: 44px; }
}