/* ==========================================================================
   Общие примитивы секций главной страницы.
   Единый вертикальный ритм и «шапка секции» (заголовок + подзаголовок + навигация),
   чтобы не дублировать это в каждом блоке. Подключается один раз в index.php
   после base.css. Блоки при необходимости переопределяют отступы у себя.
   ========================================================================== */

/* --- Секция-обёртка -------------------------------------------------------
   Горизонтальные поля даёт вложенный .container. Здесь — только вертикальные. */
.section {
  padding-block: var(--space-40);
}

.section--tight { padding-block: var(--space-24); }

/* Тёмная секция (ТКП и т.п.): чёрный фон, светлый текст. Заголовки наследуют цвет. */
.section--dark {
  color: var(--color-white);
  background-color: var(--color-black);
}

/* --- Шапка секции ---------------------------------------------------------
   Слева заголовок + подзаголовок, справа — навигация карусели (стрелки). */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20);
  margin-bottom: var(--space-32);
}

.section__head-text {
  max-width: 900px;
}

/* Заголовок секции: в разметке идёт вместе с ролью .h2.
   В макете все заголовки секций — прописными и цветом dark-blue. */
.section__title {
  text-transform: uppercase;
  color: var(--color-dark-blue);
}

.section--dark .section__title {
  color: var(--color-white);
}

.section__title + .section__lead {
  margin-top: var(--space-12);
}

.section__lead {
  color: var(--text-muted);
}

.section--dark .section__lead {
  color: var(--color-white-bg);
}

/* Навигация карусели (стрелки). Кнопки — готовые .icon-btn--arrow. */
.section__nav {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-12);
  align-items: center;
}

/* --- Карусели (Swiper): общая тема точек-пагинации ------------------------
   Идиоматично — через CSS-переменные Swiper. Активная точка вытянута в пилюлю. */
.swiper {
  --swiper-pagination-bullet-width: 20px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-bullet-border-radius: 999px;
  --swiper-pagination-color: var(--color-dark-blue);
  --swiper-pagination-bullet-inactive-color: var(--color-grey);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.swiper-pagination {
  position: static;
  margin-top: var(--space-24);
  text-align: left;
}

.swiper-pagination-bullet {
  transition: width var(--transition), background-color var(--transition);
}

.swiper-pagination-bullet-active {
  width: 36px;
}

/* Слайд — колонка одинаковой высоты, чтобы карточки внутри тянулись */
.swiper-slide {
  height: auto;
}

/* --- Адаптив: наращиваем ритм на широких экранах --------------------------*/
@media (min-width: 1024px) {
  .section { padding-block: var(--space-56); }
  .section__head { margin-bottom: var(--space-40); }
}

@media (min-width: 1440px) {
  .section { padding-block: var(--space-80); }
  .section__head { margin-bottom: var(--space-48); }
}

@media (min-width: 1920px) {
  .section { padding-block: var(--space-60); }
  .section__head { margin-bottom: var(--space-64); }

  .section__head-text {
    max-width: unset;
  }
}