/* ==========================================================================
   Сопровождение поступления – page-soprovozhdenie-postupleniya.php

   Нода Figma 32417:4953 (1920×9945, 11 прямых детей), выгрузка 2026-08-04.
   Карта секций – _figma/02-screens/soprovozhdenie-postupleniya.md.

   Все размеры сняты через get_design_context по каждой ноде, не подобраны
   на глаз. Значения, для которых в variables.css есть токен, берутся
   токеном; остальное объявлено локальными переменными в блоке .adm-page –
   чтобы «магические» числа лежали в одном месте с пометкой, откуда взяты.

   Файл подключается сам по слугу страницы (inc/enqueue.php), правки в
   enqueue не нужны.

   ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ
   • Состояний hover / focus / active – в макете страницы не нарисовано ни
     одного, придумывать не стали.
   • Теней – во всём макете нет ни одной, карточки отделяются заливкой.
   • Анимации раскрытия аккордеонов – в макете нарисованы только два
     статичных состояния, тайминга нет.
   ========================================================================== */

.adm-page {

  /* --- Локальные значения [РЕНДЕР] --------------------------------------
     Сняты с конкретных нод этой страницы, в переменные Figma не вынесены
     и в variables.css отсутствуют. */

  --adm-side:      96px;   /* боковое поле синих блоков (px-96) */
  --adm-blue-pad: 128px;   /* вертикальное поле синих блоков (py-128) */

  --adm-fs-video:   64px;  /* подпись «видео», ноды 32441:3383, 32434:3380 */
  --adm-fs-case:    48px;  /* заголовок сценария, нода 32417:5415 */
  --adm-fs-32:      32px;  /* текст карточки «сложности» и подпись сценария */

  /* Интерлиньяж 0.9 – у заголовков секций, сценариев и подписи «видео».
     Меньше высоты строки шрифта: строки идут внахлёст. Дефект макета,
     воспроизведён как нарисовано. */
  --adm-lh-tight: 0.9;

  /* Трекинг −0.06em: 36px при −2.16px и 40px при −2.4px и 32px при
     −1.92px. Это НЕ системные −0.05em. */
  --adm-ls-tight: -0.02em;

  --adm-badge:        48px;      /* кружок с номером, встречается 25 раз */
  --adm-chevron:      40px;      /* «шеврон» аккордеонов */
  --adm-check:        52px;      /* галочка в списке «Что входит:» */

  --adm-note-radius:  11.829px;  /* белая плашка нижнего призыва, 32420:8374 */
  --adm-icon-box:     93px;      /* зелёный квадрат под иконкой, 32420:8383 */
  --adm-icon-radius:  15.5px;

  --adm-video-w:     445px;      /* плашка под видео, 32441:3382 */
  --adm-video-h:     247px;

  --adm-gap-cards:    20px;      /* межкарточный отступ, 6 сеток из 7 */
  --adm-tile-w:  225.667px;      /* плитка синего блока, нода 32417:8194 */
  --adm-tile-h:      253px;

  /* Градиенты плашек «видео» в секции сценариев сняты с рендера:
     переменные lin_gradient_* в Figma заведены, но API отдаёт по ним
     пустую строку. */
  --adm-grad-red:    linear-gradient(135.5689deg, rgb(255, 102, 114) 14.571%,  rgb(242, 171, 177) 87.989%);
  --adm-grad-green:  linear-gradient(120.5158deg, rgb(83, 183, 128) 6.3367%,   rgb(202, 255, 226) 96.758%);
  --adm-grad-purple: linear-gradient(124.6894deg, rgb(132, 91, 234) 6.9423%,   rgb(205, 185, 255) 96.107%);
  --adm-grad-yellow: linear-gradient(123.3695deg, rgb(247, 166, 2) 6.1578%,    rgb(255, 234, 190) 95.523%);

  /* Длинные слова («Extracurricular», «геополитической») в узких колонках
     шире колонки. Без переноса дают горизонтальную прокрутку. */
  overflow-wrap: break-word;
}

/*
 * Шапка в макете стоит НА синем: нода Header (32417:5574) – сосед хиро по
 * фрейму страницы, а не его потомок, и лежит на y=24 внутри блока, который
 * начинается с y=0. Синяя заливка хиро уходит под шапку.
 *
 * В теме шапка в обычном потоке и без собственного фона (фон только у
 * серой плашки .site-header__bar). Красим полосу вокруг плашки в синий –
 * только на этой странице и только когда за шапкой идёт это хиро.
 *
 * Почему не отрицательный отступ у хиро: высота шапки не фиксирована – на
 * узком экране кнопки переносятся. Заливка работает при любой высоте.
 *
 * Правка общая: по-хорошему это модификатор шапки в header.css, но тот
 * файл не мой – см. отчёт.
 */
.site-header:has(+ .site-main .adm-hero) {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-brand);
}

/* Ритм секций: в макете 140 px между всеми соседними блоками, 10 раз из 10.
   Отступ перед подвалом задаёт сам подвал (footer.css), здесь не дублируем. */
.adm-page > section + section {
  margin-top: var(--section-gap);
}

/* ==========================================================================
   Общие элементы страницы
   ========================================================================== */

/* --- Надзаголовок с точкой ------------------------------------------------
   Ноды 32417:5209, 6950, 8190, 8233, 8237, 8242 – один и тот же блок. */

.adm-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--fs-body);
  /* 1.2, а не --lh-body: у надзаголовка интерлиньяж как у заголовков. */
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.adm-eyebrow__dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

/* --- Заголовок секции -----------------------------------------------------
   36 / 0.9 / −2.16px – совпадает с токенами H2, переопределять нечего. */

.adm-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.adm-title span { color: var(--color-link); }

/*
 * Шапка секции. В макете надзаголовок стоит на y, заголовок на y+40,
 * содержимое на y+120. При высоте надзаголовка 24 и заголовка 32.4 это
 * даёт 16 и 48.
 */
.adm-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
}

.adm-head--center {
  align-items: center;
  text-align: center;
}

/* --- Кружок с номером -----------------------------------------------------
   48px, цифра 24 / 1.2 / −1.2px Semi Bold. Цвет закреплён за номером
   карточки – так во всём макете, менять местами нельзя. */

.adm-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--adm-badge);
  height: var(--adm-badge);
  border-radius: var(--radius-pill);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.adm-num--blue   { background: var(--color-brand); }
.adm-num--red    { background: var(--color-red); }
.adm-num--purple { background: var(--color-purple); }
.adm-num--green  { background: var(--color-green); }
.adm-num--yellow { background: var(--color-yellow); }
.adm-num--mint   { background: var(--color-mint); }

/* --- Плитка на синем ------------------------------------------------------
   Ноды 32451:3874 (хиро) и 32417:8194 (блок «Мы не продаём страны»):
   один и тот же компонент. */

.adm-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-16);

  padding: var(--space-24);
  background: var(--color-bg-cold);
  border-radius: var(--radius-lg);
}

.adm-tile__text {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* --- Кнопки ---------------------------------------------------------------
   57 высотой, радиус 999, текст 20 / 1.2 / −1px Semi Bold. Белая и
   «обводка по синему» – ноды 32417:4969 и 32417:4970. */

.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);

  max-width: 100%;
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  border-radius: var(--radius-pill);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-align: center;
}

.adm-btn--white {
  background: var(--color-bg);
  color: var(--color-text);
}

.adm-btn--outline {
  background: var(--color-brand);
  border: 1px solid var(--color-bg);
  color: var(--color-text-invert);
}

/* --- Плашка под видео -----------------------------------------------------
   В макете это пустой прямоугольник с подписью «видео»: ни ролика, ни
   превью, ни ссылки в файле нет. Верстаем ровно то, что нарисовано. */

.adm-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--space-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.adm-video__label {
  font-size: var(--adm-fs-video);
  line-height: var(--adm-lh-tight);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text);
  opacity: .22;
  text-align: center;
}

.adm-video--cold   { background: var(--color-bg-cold); }
.adm-video--red    { background: var(--adm-grad-red); }
.adm-video--green  { background: var(--adm-grad-green); }
.adm-video--purple { background: var(--adm-grad-purple); }
.adm-video--yellow { background: var(--adm-grad-yellow); }

/* ==========================================================================
   1. Хиро – нода 32417:4958 (1920×946)

   ЗАМЕРЫ: фон #2597FF, поля 128 сверху / 64 снизу / 96 по бокам, gap 48.
   Заголовок 48 / 1.1 / −3.84px, ширина 636.
   Лид 24 / 1.4 / −1.2px, ширина 603.
   Четыре плитки 262.5×299, gap 20, общая ширина 1110.
   Кнопки 485×57, gap 8.
   Круги 1197 / 1117 / 1035 с поворотом 90°, фото 1139×1139.
   ========================================================================== */

.adm-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/*
 * Декор привязан к макетным 1920, а не к вьюпорту: иначе на широком экране
 * фото и круги уезжают от текста.
 *
 * Ширина именно фиксированная, а не max-width. При окне уже 1920 запись
 * left:0 / right:0 / width:1920 с автополями по спецификации кладёт блок к
 * левому краю и отдаёт лишнее вправо – то есть геометрия макета сохраняется
 * относительно начала контента, а хвост уходит под overflow:hidden секции.
 * С max-width блок прижимался бы к правому краю и фото наезжало на текст.
 */
.adm-hero__decor,
.adm-promise__decor,
.adm-cta__decor {
  position: absolute;
  inset: 0;
  width: var(--page-width);
  margin-inline: auto;
  pointer-events: none;
}

.adm-hero__ring,
.adm-promise__ring,
.adm-cta__ring {
  position: absolute;
  max-width: none;
}

/* Координаты в макете отсчитаны от левого края; пересчитаны от правого,
   чтобы круги держались фото при любой ширине окна. */
.adm-hero__ring { rotate: 90deg; }

.adm-hero__ring--1 { top: 164px;   right: -79px; width: 1197px; height: 1197px; }
.adm-hero__ring--2 { top: 204.5px; right: -39px; width: 1117px; height: 1117px; }
.adm-hero__ring--3 { top: 245px;   right:   2px; width: 1035px; height: 1035px; }

.adm-hero__photo {
  position: absolute;
  top: 51px;
  right: -179px;
  width: 1139px;
  height: 1139px;
  max-width: none;
  object-fit: cover;
}

/*
 * В макете у блока верхнее поле 128, но отсчитывается оно от y=0, где
 * сейчас стоит шапка. Вычитать её высоту буквально нельзя: содержимое в
 * макете центрировано по высоте, а не прижато к полю. 64 сверху и снизу
 * при минимальной высоте «946 минус шапка» ставят заголовок ближе всего
 * к макетным 154.
 */
.adm-hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-48);

  max-width: var(--page-width);
  min-height: calc(946px - var(--header-height) - var(--space-24));
  margin-inline: auto;
  padding: var(--space-64) var(--adm-side);
}

.adm-hero__texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 100%;
}

/* Кегль, вес и трекинг H1 совпадают с токенами (48 / 1.1 / 500 / −0.08em) –
   переопределяем только ширину и цвет. */
.adm-hero__title {
  max-width: 636px;
  color: var(--color-text-invert);
}

.adm-hero__secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  max-width: 100%;
}

.adm-hero__lead {
  max-width: 603px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
}

.adm-hero__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--adm-gap-cards);

  width: 1110px;
  max-width: 100%;
  min-height: 299px;
}

.adm-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: var(--btn-w-hero);
  max-width: 100%;
}

.adm-hero__actions .adm-btn { width: 100%; }

/* ==========================================================================
   2. Сложность поступления – нода 32417:8256 (1840×919)

   ЗАМЕРЫ: шесть карточек 600×389.5, gap 20, сетка 3×2.
   Карточка: #F2F2F8, padding 24, радиус 16, содержимое прижато к краям.
   Иллюстрация по центру, текст 32 / 1.0 / −1.92px Regular.
   ========================================================================== */

.adm-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--adm-gap-cards);
}

.adm-why__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);

  min-height: 389.5px;
  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.adm-why__icon {
  align-self: center;
  max-width: 100%;
  height: auto;
}

.adm-why__text {
  width: 100%;
  font-size: var(--adm-fs-32);
  line-height: 1;                /* в макете leading-none */
  font-weight: 400;
  letter-spacing: var(--adm-ls-tight);
  color: var(--color-text);
}

/* Цвет выделенного куска совпадает с цветом номера карточки. */
.adm-why__card--blue   .adm-why__text span { color: var(--color-brand); }
.adm-why__card--purple .adm-why__text span { color: var(--color-purple); }
.adm-why__card--yellow .adm-why__text span { color: var(--color-yellow); }
.adm-why__card--green  .adm-why__text span { color: var(--color-green); }
.adm-why__card--red    .adm-why__text span { color: var(--color-red); }
.adm-why__card--mint   .adm-why__text span { color: var(--color-mint); }

/* ==========================================================================
   3. Состав сопровождения – нода 32417:8255 (1840×296)

   ЗАМЕРЫ свёрнутой карточки (варианты Variant-1…Variant3): 352×176,
   padding 24, радиус 16, номер сверху, строка с вопросом снизу.
   ЗАМЕРЫ раскрытой (вариант Default): gap 32 между номером и содержимым,
   24 между строкой и списком, подпись «Что входит:» 20 / 1.3 / −1px при
   прозрачности 60 %, разделитель #3A3A3A при 10 %, строки списка –
   галочка 52px + текст 20 / 1.2 / −1px, gap 12.

   Раскрытие на <details>/<summary>: оба состояния нарисованы в макете,
   JS для этого не нужен.
   ========================================================================== */

.adm-steps__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--adm-gap-cards);
  align-items: start;
}

.adm-step {
  display: flex;
  flex-direction: column;

  min-height: 176px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.adm-step--grey { background: var(--color-bg-soft); }
.adm-step--cold { background: var(--color-bg-cold); }

.adm-step__summary {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-32);

  list-style: none;
  cursor: pointer;
}

.adm-step__summary::-webkit-details-marker { display: none; }

/* Раскрытая карточка больше не тянется до 176: высоту задаёт содержимое. */
.adm-step[open] { min-height: 0; }
.adm-step[open] .adm-step__summary { flex: 0 0 auto; }

.adm-step__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.adm-step__title {
  flex: 1 1 auto;
  min-width: 0;

  font-size: var(--fs-h3);
  line-height: 1;                /* в макете leading-none */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

/* Шеврон нарисован остриём вверх; в свёрнутом состоянии он перевёрнут. */
.adm-step__chevron {
  flex: 0 0 auto;
  width: var(--adm-chevron);
  height: var(--adm-chevron);
  transform: scaleY(-1);
}

.adm-step[open] .adm-step__chevron { transform: none; }

.adm-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.adm-step__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

.adm-step__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(58, 58, 58, .1);
}

.adm-step__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.adm-step__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.adm-step__list img {
  flex: 0 0 auto;
  width: var(--adm-check);
  height: var(--adm-check);
}

.adm-step__list span {
  flex: 1 1 auto;
  min-width: 0;

  font-size: var(--fs-body);
  line-height: 1.2;              /* у строк списка 1.2, а не --lh-body */
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

/* ==========================================================================
   4. «Мы не продаём страны…» – нода 32417:8170 (1920×934)

   ЗАМЕРЫ: фон #2597FF, поля 128 по вертикали и 96 по бокам, gap 64.
   Заголовок 40 / 1.2 / −2.4px, ширина 643.
   Шесть плиток 225.667×253, gap 12, сетка 3×2 (полоса 873 с запасом
   справа – так в макете).
   Фото 1569×996 на x=737, y=42. Круги 1090 / 1018 / 942 с поворотом
   131.66° и отражением по вертикали, общий центр (1454.44, 692).
   Плашка «видео» 445×247 на x=1435, y=559.
   ========================================================================== */

.adm-promise,
.adm-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.adm-promise__ring {
  top: 692px;
  right: 465.56px;
  translate: 50% -50%;
  rotate: 131.66deg;
  scale: 1 -1;
}

.adm-promise__ring--1 { width: 1090px; height: 1090px; }
.adm-promise__ring--2 { width: 1018px; height: 1018px; }
.adm-promise__ring--3 { width:  942px; height:  942px; }

.adm-promise__photo {
  position: absolute;
  top: 42px;
  right: -386px;
  width: 1569px;
  height: auto;
  max-width: none;
}

.adm-promise__inner,
.adm-cta__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-64);

  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--adm-blue-pad) var(--adm-side);
}

.adm-promise__title,
.adm-cta__title {
  font-size: var(--fs-display);
  /* 1.2, а не --lh-display: замерено на нодах 32417:8171 и 32417:4976. */
  line-height: 1.2;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--color-text-invert);
}

.adm-promise__title { max-width: 643px; }

.adm-promise__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--adm-tile-w)));
  gap: var(--space-12);
  max-width: 873px;
}

.adm-promise__cards .adm-tile { min-height: var(--adm-tile-h); }

/* Плашки «видео» синих блоков привязаны к правому краю макетных 1920 и
   вынесены из потока, как в макете. */
.adm-video--promise,
.adm-video--cta {
  position: absolute;
  z-index: 1;
  right: max(40px, calc(50% - var(--page-width) / 2 + 40px));

  width: var(--adm-video-w);
  height: var(--adm-video-h);
  background: var(--color-bg);
}

.adm-video--promise { top: 559px; }
.adm-video--cta     { top: 398px; }

/* ==========================================================================
   5. Четыре сценария – нода 32417:8251 (1841×2324)

   ЗАМЕРЫ: четыре ряда по две плашки 910×534.25, gap 20 и по вертикали,
   и по горизонтали. В рядах 2 и 4 плашка «видео» стоит слева.
   Текстовая плашка: #EEF3FF, padding 24, радиус 16, gap 24, всё по центру.
   Заголовок 48 / 0.9 / −3.84px, подпись 32 / 1.0 / −1.6px при 60 %.
   ========================================================================== */

.adm-cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--adm-gap-cards);
}

.adm-case {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--adm-gap-cards);
  min-height: 534.25px;
}

.adm-case--media-first .adm-case__text { order: 2; }

.adm-case__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

  padding: var(--space-24);
  background: var(--color-bg-cold);
  border-radius: var(--radius-lg);
  text-align: center;
}

.adm-case__title {
  font-size: var(--adm-fs-case);
  line-height: var(--adm-lh-tight);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text);
}

.adm-case__note {
  max-width: 610px;
  font-size: var(--adm-fs-32);
  line-height: 1;                /* в макете leading-none */
  font-weight: 400;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/* ==========================================================================
   6. Наш блог – нода 32417:8252 (1841×359)

   ЗАМЕРЫ: пять плашек 445×247, gap 20. Четыре ровно заполняют контейнер
   1840, пятая начинается на 1860 – то есть уходит за правый край холста.
   Значит это лента с прокруткой; листается колесом, тачем и с клавиатуры.
   Стрелки 48px с заливкой #FF6672, gap 12, прижаты вправо.
   ========================================================================== */

.adm-blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

.adm-blog__head .adm-head { margin-bottom: 0; }

.adm-blog__nav {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-12);
}

.adm-blog__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--adm-badge);
  height: var(--adm-badge);
  padding: var(--space-4);
  background: var(--color-red);
  border-radius: var(--radius-pill);
}

/* Иконка нарисована остриём влево. */
.adm-blog__arrow--next img { transform: scaleX(-1); }

.adm-blog__track {
  display: flex;
  gap: var(--adm-gap-cards);
  margin-top: var(--space-48);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* В макете 32417:8252 ползунка нет – листание только стрелками / тачем. */
  scrollbar-width: none;
}

.adm-blog__track::-webkit-scrollbar {
  display: none;
}

.adm-blog__item {
  flex: 0 0 auto;
  width: calc((100% - var(--adm-gap-cards) * 3) / 4);
  min-width: 260px;
  height: var(--adm-video-h);
  scroll-snap-align: start;
}

/* Иконка «play» есть только у пятой плашки – так в макете. */
.adm-blog__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 88.873px;
  height: 88.873px;
}

/* ==========================================================================
   7. Полезные ресурсы для родителей – нода 32417:8253 (1920×704)

   ЗАМЕРЫ: надзаголовок и заголовок по центру холста.
   Два кружка 162px с градиентом #4BA9FF → #D7ECFF и фрагментами одного
   фото, gap 18; по бокам линии #E6E6E6 до края холста, на середине
   кружков.
   Пять карточек 352×?, gap 20, радиус 24, #F2F2F8, padding 24, gap 32.
   Логотип в белом боксе 168px высотой, радиус 24.
   Название 24 / 1.0 / −1.92px, описание 20 / 1.3 / −1px при 60 %.
   ========================================================================== */

.adm-parents__band {
  display: flex;
  align-items: center;
  margin-top: var(--space-48);
}

.adm-parents__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

.adm-parents__avatars {
  flex: 0 0 auto;
  display: flex;
  gap: 18px;
}

.adm-parents__avatar {
  position: relative;
  display: block;
  width: 162px;
  height: 162px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-blue-light) 0%, var(--color-blue-pale) 100%);
}

/* Кружки показывают разные куски одного снимка – смещения из макета. */
.adm-parents__avatar img {
  position: absolute;
  width: 566px;
  height: auto;
  max-width: none;
}

.adm-parents__avatar--1 img { left:  -66px; top: 13px; }
.adm-parents__avatar--2 img { left: -369px; top: -7px; }

.adm-parents__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--adm-gap-cards);
  align-items: stretch;
  margin-top: var(--space-48);
}

.adm-parents__cards > li { display: flex; }

.adm-parents__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;

  padding: var(--space-24);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  color: inherit;
}

.adm-parents__logo {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 168px;
  padding: var(--space-16);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.adm-parents__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.adm-parents__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.adm-parents__name {
  font-size: var(--fs-h3);
  line-height: 1;                /* в макете leading-none */
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.adm-parents__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/* ==========================================================================
   8. Ответы на вопросы – нода 32417:8254 (1065×956)

   ЗАМЕРЫ: колонка 1065 по центру холста, gap 4.
   Карточка: padding 20, радиус 16, обводка 1px белым, #F2F2F8;
   раскрытая – #EEF3FF.
   Номер занимает ЛЕВУЮ ПОЛОВИНУ карточки, вопрос и шеврон – правую
   (отступ слева 10). Вопрос 24 / 1.2 / −1.2px, ответ 20 / 1.3 / −1px
   при 60 %, отступ между ними 16.
   Шеврон 40px: свёрнутый – #85BAEA остриём вниз, раскрытый – #2597FF
   остриём вверх. Это два разных файла, не поворот одного.

   Ответ написан ТОЛЬКО у второго вопроса, остальные семь в макете
   пустые – см. отчёт.
   ========================================================================== */

.adm-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  width: 1065px;
  max-width: 100%;
  margin-inline: auto;
}

.adm-faq__item {
  padding: var(--space-20);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius-lg);
}

.adm-faq__item[open] { background: var(--color-bg-cold); }

.adm-faq__summary {
  display: flex;
  align-items: center;

  list-style: none;
  cursor: pointer;
}

.adm-faq__summary::-webkit-details-marker { display: none; }

/* Номер и вопрос делят карточку пополам – так в макете. */
.adm-faq__summary .adm-num { margin-right: auto; }

.adm-faq__row {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  padding-left: 10px;
}

.adm-faq__question {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.adm-faq__chevron {
  flex: 0 0 auto;
  width: var(--adm-chevron);
  height: var(--adm-chevron);
  background: url('../img/soprovozhdenie/faq-chevron-closed.svg') center / contain no-repeat;
}

.adm-faq__item[open] .adm-faq__chevron {
  background-image: url('../img/soprovozhdenie/faq-chevron-open.svg');
}

/* Ответ продолжает правую колонку: половина карточки + отступ 10,
   справа место под шеврон (40) и отступ до него (32). */
.adm-faq__answer {
  margin-top: var(--space-16);
  margin-left: 50%;
  padding-left: 10px;
  padding-right: calc(var(--adm-chevron) + var(--space-32));

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .6;
}

/* ==========================================================================
   9. Нижний призыв – нода 32417:4974 (1920×714)

   ЗАМЕРЫ: фон #2597FF, поля 128 по вертикали и 96 по бокам, gap 64.
   Заголовок 40 / 1.2 / −2.4px, ширина 603.
   Белая плашка 489, padding 20, радиус 11.829, обводка #F2F2F8, gap 24:
   зелёный квадрат 93px радиусом 15.5 и текст 18 / 1.2 / −0.54px при 60 %.
   Кнопки 710×57, gap 8.
   Фото 880×787 на x=988, y=38. Круги 1090 / 1018 / 942: три слева с
   центром (−167, −272) и три справа с центром (1340, 692) и поворотом
   131.66°.
   ========================================================================== */

.adm-cta__ring--l1,
.adm-cta__ring--l2,
.adm-cta__ring--l3 {
  top: -272px;
  left: -167px;
  translate: -50% -50%;
  scale: 1 -1;
}

.adm-cta__ring--r1,
.adm-cta__ring--r2,
.adm-cta__ring--r3 {
  top: 692px;
  right: 580px;
  translate: 50% -50%;
  rotate: 131.66deg;
  scale: 1 -1;
}

.adm-cta__ring--l1, .adm-cta__ring--r1 { width: 1090px; height: 1090px; }
.adm-cta__ring--l2, .adm-cta__ring--r2 { width: 1018px; height: 1018px; }
.adm-cta__ring--l3, .adm-cta__ring--r3 { width:  942px; height:  942px; }

.adm-cta__photo {
  position: absolute;
  top: 38px;
  right: 52px;
  width: 880px;
  height: auto;
  max-width: none;
}

.adm-cta__texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  max-width: 100%;
}

.adm-cta__title { max-width: 603px; }

.adm-note {
  display: flex;
  align-items: center;
  gap: var(--space-24);

  width: 489px;
  max-width: 100%;
  padding: var(--space-20);

  background: var(--color-bg);
  border: 1px solid var(--color-bg-soft);
  border-radius: var(--adm-note-radius);
}

.adm-note__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--adm-icon-box);
  height: var(--adm-icon-box);
  background: var(--color-green);
  border-radius: var(--adm-icon-radius);
}

.adm-note__text {
  flex: 1 1 auto;
  min-width: 0;

  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: .6;
}

.adm-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 710px;
  max-width: 100%;
}

.adm-cta__actions .adm-btn { width: 100%; }

/* ==========================================================================
   АДАПТИВ – заглушка, а не решение.

   Мобильного макета этой страницы НЕТ: в файле один размер 1920, а
   единственный мобильный фрагмент (393×669) относится к главной. Правила
   ниже только не дают сеткам разъехаться и убирают горизонтальную
   прокрутку; как раскладка должна выглядеть на узком экране, дизайнером
   не решено – см. отчёт.
   ========================================================================== */

@media (max-width: 1440px) {
  .adm-page { --adm-side: var(--side-padding); }

  /* Плашки «видео» синих блоков стоят в правом поле макетных 1920: при
     меньшей ширине они наезжают на плитки и текст. */
  .adm-video--promise,
  .adm-video--cta { display: none; }

  .adm-steps__grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-parents__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-promise__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .adm-case { min-height: 0; }
}

@media (max-width: 1200px) {
  .adm-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-blog__item { width: calc((100% - var(--adm-gap-cards) * 2) / 3); }

  /* Фото и круги нарисованы под холст 1920 и при меньшей ширине лезут на
     текст. Убираем, пока дизайнер не соберёт узкую раскладку. */
  .adm-hero__decor,
  .adm-promise__decor,
  .adm-cta__decor { display: none; }

  .adm-hero__inner { min-height: 0; padding-block: var(--space-48); }

  .adm-promise__inner,
  .adm-cta__inner { padding-block: var(--space-64); }
}

@media (max-width: 900px) {
  .adm-steps__grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-parents__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-promise__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-hero__cards    { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .adm-blog__item     { width: calc((100% - var(--adm-gap-cards)) / 2); }
  .adm-case           { grid-template-columns: minmax(0, 1fr); }

  .adm-case__title { font-size: var(--fs-h1); }
  .adm-video__label { font-size: var(--fs-h1); }

  /* Номер и вопрос делят карточку пополам только на макетной ширине:
     на узком экране вопрос переносится по буквам. */
  .adm-faq__row { flex: 1 1 auto; }
  .adm-faq__answer { margin-left: 0; padding-right: 0; }
}

@media (max-width: 640px) {
  .adm-page { --adm-side: var(--gutter); }

  .adm-why__grid,
  .adm-steps__grid,
  .adm-parents__cards,
  .adm-promise__cards,
  .adm-hero__cards    { grid-template-columns: minmax(0, 1fr); }

  .adm-blog__item { width: 100%; min-width: 0; }

  .adm-why__card { min-height: 0; }

  .adm-hero__title,
  .adm-promise__title,
  .adm-cta__title,
  .adm-case__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }

  .adm-why__text,
  .adm-case__note { font-size: var(--fs-h3); }

  .adm-video__label { font-size: var(--fs-h2); }

  .adm-note { flex-direction: column; align-items: flex-start; }

  .adm-blog__head { flex-direction: column; align-items: flex-start; }
}