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

/* --- Секция-обёртка -------------------------------------------------------
   Горизонтальные поля даёт вложенный .container. Здесь — только вертикальные.

   Секции стоят встык, воздух — внутренние поля, как у фреймов в макете
   (24 / 30 / 40 / 60). Внешних отступов нет намеренно: margin схлопывается с
   соседями, и расстояние между блоками зависело бы от того, какой блок стоит
   рядом, — в редакторе, где блоки переставляют как угодно, так нельзя.
   Блоки с другими полями в макете переопределяют padding у себя. */
.section {
  margin: 0;
  padding-block: var(--space-24);
}

/* Узкая полоса (ленты логотипов): полей по вертикали в макете нет */
.section--tight {
  padding-block: 0;
}

/* Тёмная секция (ТКП и т.п.): чёрный фон, светлый текст. Заголовки наследуют цвет. */
.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: 30px;
}

.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);
  font-size: 18px;
  line-height: 22px;
}

.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;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 8px;
}

/* --- Текст из редактора (.rich) -------------------------------------------
   Абзацы/списки из поля RichText в блоках конструктора (text, split).
   Кегль по макету 18·22 / 18·22 / 18·22 / 24·30, между абзацами 20. */
.rich {
  font-size: 18px;
  line-height: 22px;
  color: var(--text-muted);
}

.rich > * + * { margin-top: 20px; }

.rich ul,
.rich ol { padding-left: 1.2em; }

.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li + li { margin-top: 8px; }

.rich a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rich strong,
.rich b { color: var(--color-dark-blue); }

@media (min-width: 768px) {
  .rich > * + * { margin-top: 16px; }
}

@media (min-width: 1025px) {
  .rich > * + * { margin-top: 20px; }
}

@media (min-width: 1441px) {
  .rich {
    font-size: 24px;
    line-height: 30px;
  }
}

/* --- Карусели (Swiper): «Slider bar» из макета ----------------------------
   Точка — не круг, а полоска 62×4 (скругление 2) с шагом 16; активная залита
   чёрным, остальные — полупрозрачный серый. Полоса центрируется под слайдером.
   Переменные ставим на саму пагинацию, а не на .swiper: в hero точки лежат
   вне контейнера слайдера. Полоски ужимаются (flex-shrink), если точек много.  */
.swiper-pagination {
  --swiper-pagination-bullet-width: 62px;
  --swiper-pagination-bullet-height: 4px;
  --swiper-pagination-bullet-border-radius: 2px;
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-pagination-color: var(--color-black);
  --swiper-pagination-bullet-inactive-color: rgba(87, 95, 112, 0.25);
  --swiper-pagination-bullet-inactive-opacity: 1;

  position: static;
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.swiper-pagination-bullet {
  flex: 0 1 var(--swiper-pagination-bullet-width);
  min-width: 8px;
  transition: background-color var(--transition);
}

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

/* --- Адаптив: наращиваем ритм на широких экранах --------------------------*/
@media (min-width: 768px) {
  .section {
    padding-block: 30px;
  }

  .section--tight {
    padding-block: 0;
  }

  /* .section__head { margin-bottom: 28px; } */
  .section__nav {
    gap: var(--space-24);
    justify-content: flex-end;
    width: auto;
    padding-bottom: 7px;
  }

  .swiper-pagination {
    margin-top: var(--space-40);
  }
}

@media (min-width: 1025px) {
  .section {
    padding-block: var(--space-40);
  }

  .section--tight {
    padding-block: 0;
  }

  .section__head {
    margin-bottom: 40px;
  }

  .section__nav {
    padding-bottom: 3px;
  }
}

@media (min-width: 1441px) {
  .section {
    padding-block: var(--space-60);
  }

  .section--tight {
    padding-block: 0;
  }

  /* .section__head { margin-bottom: var(--space-64); } */

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

  .section__lead {
    font-size: 24px;
    line-height: 34px;
  }

  .section__nav {
    gap: var(--space-32);
    padding-bottom: 5px;
  }
}

/* ==========================================================================
   Отложенный рендер секций ниже первого экрана.

   Нужно ради бесшовного перехода с разводящей «Объекты»: межстраничный переход
   стартует только после первой отрисовки входящего документа, а страница кейса
   длинная — в трассе (CPU 4x) это 108 мс раскладки на 825 узлах и 45 мс пересчёта
   стилей до того, как поедет первый кадр. Отсюда и «дёрганье» на старте.

   content-visibility: auto выносит эти секции из первой раскладки — браузер
   считает их, когда они подъезжают к экрану. На сам переход не влияет: снимок
   входящей страницы размером с окно, а всё перечисленное лежит ниже сгиба.

   Секции со Swiper (case-solution, objects) сознательно НЕ включены: слайдер
   меряет ширину при инициализации и на пропущенном контейнере получил бы нули.

   «Карта объекта» в список не входит: она лежит сразу под первым экраном, почти
   всегда попадает в зону предварительной отрисовки и весит всего ~180px —
   пропускать её нечего, а скачок сразу после hero был бы заметен.

   contain-intrinsic-size с ключевым словом auto: первая величина — догадка до
   первой отрисовки, дальше браузер помнит настоящую высоту секции. Числа сняты
   с живой страницы на 1920 (на других ширинах отличаются, но после первого
   показа секции auto подменяет их фактическими). Врать тут не стоит: с общей
   заглушкой 700px документ выходил 7541px против настоящих 7279 — и полоса
   прокрутки прыгала на первом проходе.

   Только с 1024 — там же, где живёт сам переход. Ниже секции складываются в
   колонку и заметно выше, снятые здесь числа врали бы, а выигрыш был бы уже
   не про переход.
   ========================================================================== */

@media (min-width: 768px) {

  .case-page .case-task,
  .case-page .case-result,
  .case-page .case-review,
  .case-page .contact,
  .case-page .footer {
    content-visibility: auto;
  }

  .case-page .case-task {
    contain-intrinsic-size: auto 560px;
  }

  .case-page .case-result {
    contain-intrinsic-size: auto 400px;
  }

  .case-page .case-review {
    contain-intrinsic-size: auto 640px;
  }

  .case-page .contact {
    contain-intrinsic-size: auto 655px;
  }

  .case-page .footer {
    contain-intrinsic-size: auto 845px;
  }
}