/* ==========================================================================
   СЕТКА И СЕКЦИИ
   ========================================================================== */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(28px, 3vw, 44px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Тёмная секция — фирменный синий */
.section--brand {
  background: var(--color-brand);
  color: var(--color-on-dark);
}
.section--brand .lead,
.section--brand .text-muted { color: var(--color-on-dark-muted); }

/* Акцентная секция — красная плашка призыва к действию */
.section--accent {
  background: var(--color-accent);
  color: #fff;
}

/* --- Шапка секции: заголовок слева, ссылка справа --- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.section-head h2 { margin: 0; }

/* --- Двухколоночные раскладки --- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4.4vw, 56px);
}
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--end    { align-items: end; }
.split--center { align-items: center; }
/* Колонки встык — тёмная панель и карта на странице контактов */
.split--flush  { gap: 0; }

/* --- Фирменная сетка на линейках --------------------------------------
   Подпись системы: элементы разделены 2px-линиями за счёт gap + фона.
   Дети обязаны иметь непрозрачный фон.
   ---------------------------------------------------------------------- */
.gridlines {
  display: grid;
  gap: var(--rule);
  background: var(--color-divider);
  border-top: var(--rule) solid var(--color-divider);
  border-bottom: var(--rule) solid var(--color-divider);
}
.gridlines > * { background: var(--color-bg); }
.gridlines > .is-highlighted { background: var(--color-accent-bg); }

/* Заглушка последнего ряда.
   Фон сетки — цвет разделителя, поэтому пустая ячейка (когда число карточек
   не делится на число колонок) просвечивает серым. Пустой элемент с фоном
   страницы закрывает дыру. Нужен только на трёх колонках: на двух и одной
   ряды всегда заполняются. */
.gridlines__filler { display: none; }
@media (min-width: 901px) {
  .gridlines--3 > .gridlines__filler { display: block; }
}

.gridlines--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gridlines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gridlines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Первая колонка-подпись фиксированной ширины (лента ближайших групп) */
.gridlines--label-3 { grid-template-columns: 200px repeat(3, minmax(0, 1fr)); }

/* --- Простая колоночная сетка без линеек --- */
.cols {
  display: grid;
  gap: clamp(24px, 2.6vw, 32px);
}
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }

.row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.row--between { justify-content: space-between; }

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */

@media (max-width: 1100px) {
  .gridlines--label-3 { grid-template-columns: 160px repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .split,
  .split--5-7,
  .split--4-8 { grid-template-columns: minmax(0, 1fr); }

  /* На планшете фото уходит под текст */
  .split--media-last > figure { order: 2; }

  .gridlines--3,
  .gridlines--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gridlines--label-3 { grid-template-columns: minmax(0, 1fr); }

  .cols--3,
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .gridlines--2,
  .gridlines--3,
  .gridlines--4 { grid-template-columns: minmax(0, 1fr); }

  .cols--2,
  .cols--3,
  .cols--4 { grid-template-columns: minmax(0, 1fr); }

  .section-head { margin-bottom: var(--space-6); }
}