/* ==========================================================================
   Страница «IELTS, TOEFL и Duolingo English Test»

   Источник: Figma нода 32543:3697, 1920×8340, 10 прямых секций.
   Карта секций – _figma/02-screens/ielts-toefl-duolingo.md.
   Все значения сняты через get_design_context, а не подобраны на глаз.

   ЗАМЕРЫ ИЗ МАКЕТА (для сверки):
     ритм секций      140px между всеми соседями без исключений = --section-gap
     боковое поле     40px у всех секций, кроме хиро и нижнего призыва –
                      у них 96px, потому что это блоки во всю ширину страницы
     блок заголовка   ярлык → +40px заголовок → +80px контент (от верха к верху)
     карточка         600px ×3 с зазором 20px = 1840 = --container ✓

   ПОДКЛЮЧЕНИЕ: файл грузится сам по слугу страницы (inc/enqueue.php),
   дописывать туда ничего не нужно.

   Про интерлиньяж 1.2: в variables.css он лежит сразу в трёх токенах
   (--lh-h2, --lh-h3). Здесь берётся --lh-h3 – он ближе по кеглю к тому,
   где применяется.
   ========================================================================== */

.ielts-page {

  /* --- Чего нет в variables.css --------------------------------------------
     Ниже – значения из макета, для которых токена в теме не заведено.
     Держим их одним списком, а не размазываем по правилам: когда токены
     дополнят, замена будет в одном месте. Все они помечены нодой. */

  /* Заголовок секции. В макете это 36px/0.9/-0.06em – ни один из
     --fs-h1…--fs-h3 не подходит: --fs-h2 = 28px, и в самом variables.css
     стоит пометка, что кегль заголовков секций не замерен. Здесь он
     замерен: ноды 32543:3894, 32543:3903, 32543:3907, 32543:3911, 32543:3915. */
  --ielts-fs-title: 36px;
  --ielts-lh-title: .9;
  --ielts-ls-title: -.02em;

  /* Название экзамена и подпись на корешке. Figma text_36_med: 36/1/-0.08em.
     Ноды 32547:3924, 32551:4074, I32562:5152;32562:5338. */
  --ielts-fs-name: 36px;
  --ielts-lh-name: 1;
  --ielts-ls-name: -.03em;

  /* Заголовок нижнего призыва, нода 32543:3718: 40px/1.2/-0.06em. */
  --ielts-fs-cta: 40px;
  --ielts-ls-cta: -.02em;

  /* Слово «видео» в заглушке, нода 32543:3735: 64px/0.9/-0.08em. */
  --ielts-fs-stub: 64px;
  --ielts-lh-stub: .9;
  --ielts-ls-stub: -.03em;

  /* Отступы и радиусы, которых нет в шкале темы. Значения дробные –
     это отмасштабированные в макете компоненты, а не опечатка. */
  --ielts-space-40:      40px;    /* подпись под видео, нода 32551:3982 */
  --ielts-hero-pad:      96px;    /* боковое поле хиро и призыва */
  --ielts-hero-cols-gap: 174px;   /* нода 32557:4418 */
  --ielts-cta-pad-y:     128px;   /* нода 32543:3713 */
  --ielts-radius-xl:     32px;    /* подложка таблицы, нода 32551:3989 */
  --ielts-radius-switch: 24.694px;/* переключатель, нода 32562:5330 */
  --ielts-radius-iconbox:15.5px;  /* плитка иконки 93px, нода 32555:4258 */
  --ielts-radius-note:   11.829px;/* плашка в призыве, нода 32543:3719 */
  --ielts-btn-w-cta:     517px;   /* нода 32543:3733 – шире, чем --btn-w-hero */

  /* Цвета, которых нет в палитре темы. #D7ECFF – низ градиента у обложки
     видео и у декоративных кругов; #B5DCFF – низ градиента подложки с фото.
     Оба в Figma лежат в lin_gradient_*, а те по API отдают пустую строку. */
  --ielts-gradient-to:   #D7ECFF;
  --ielts-gradient-cold: #B5DCFF;

  /* Затемнение обложки видео: нода 32551:3980 – чёрная плашка на 20 %. */
  --ielts-overlay: rgba(0, 0, 0, .2);

  /* Разделитель внутри карточки: 1px --color-text на 10 %. --color-border
     (#E6E6E6) – другой цвет, подменять им нельзя. Нода 32547:4031. */
  --ielts-hairline: color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* --- Общее для секций ----------------------------------------------------- */

.ielts-section,
.ielts-cta { margin-top: var(--section-gap); }

/*
   Блок «ярлык + заголовок». В макете ярлык и заголовок отстоят на 40px по
   верхним границам, контент начинается на 120px от верха ярлыка. При
   высоте ярлыка 24px и заголовка 32.4px это ровно 16px и 48px зазоров.
*/
.ielts-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
}

.ielts-section__head--center {
  align-items: center;
  text-align: center;
}

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

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

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

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

/* Вторая половина заголовка синяя – во всех пяти секциях одинаково. */
.ielts-title__accent { color: var(--color-link); }

/* --- Кружок с номером ----------------------------------------------------- */
/*
   Один и тот же элемент в секциях «Наш подход» (нода 32551:4217) и «Этапы
   подготовки» (нода 32555:4266). Цвет закреплён за номером и несёт смысл –
   в двух секциях порядок цветов РАЗНЫЙ, поэтому модификатор задаётся в
   разметке, а не выводится из порядкового номера.
*/
.ielts-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  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);
}

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

/* --- Кнопки --------------------------------------------------------------- */
/*
   Базовый .btn ниже макета: 48px против 57px и вес 500 против 600. Ширина у
   кнопок макета фиксированная, а не по контенту – так во всех разобранных
   нодах. Hover не дорисовываем: у белых кнопок он в макете не нарисован,
   у синей работает .btn--primary из base.css.
*/
.ielts-btn {
  width: var(--btn-w-hero);
  max-width: 100%;
  min-height: var(--btn-height);
  padding: var(--btn-padding);
  gap: var(--space-4);

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

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

.ielts-btn--cta { width: var(--ielts-btn-w-cta); }

/* ==========================================================================
   Секция 1 – Хиро. Нода 32543:3837, 1920×946
   ========================================================================== */

/*
   В макете шапка лежит ПОВЕРХ синего хиро, а в разметке темы <header> идёт
   до <main> и съедает первые 100px потока (24px отступ + 76px полосы).
   Поэтому синий фон и декор вынесены в отдельный слой с z-index −1: он
   дотягивается вверх под шапку, но остаётся под ней. Заодно на нём
   overflow: hidden – круги вылезают за кадр и без обрезки дали бы
   горизонтальный скролл. Править header.php / header.css нельзя, это общие
   файлы; расхождение вынесено в отчёт.
*/
.ielts-hero {
  position: relative;
  color: var(--color-text-invert);
}

/*
   Синий «до верха страницы». Отдельным псевдоэлементом, а не фоном слоя с
   кругами: у того overflow: hidden, и он бы эту полосу срезал. Высота
   заведомо избыточная (100vh) – ниже 1500px шапка переносит меню на вторую
   строку и становится выше 100px, а угадывать её высоту в CSS нечем.
   Выше начала документа полоса просто не видна и скролл не удлиняет.
*/
.ielts-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--color-brand);
}

.ielts-hero__decor {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  /* --header-h – фактическая высота шапки (замер в main.js): расчётные
     100px на 1025–1430 оставляли щель между слоем и верхом страницы. */
  top: calc(-1 * var(--header-h));
  bottom: 0;
  overflow: hidden;
  background: var(--color-brand);
}

/*
   Круги. Координаты – от верхнего левого угла ноды хиро (то есть от верха
   страницы), поэтому слой выше и начинается на −100px. Внешний круг залит
   сплошным bg_light_blue, два внутренних – градиентом #4BA9FF → #D7ECFF,
   и градиент повёрнут: rotate воспроизводит поворот из макета, на круглой
   форме он виден только по градиенту.
*/
.ielts-hero__ring {
  position: absolute;
  max-width: none;
}

.ielts-hero__ring--tl-1 { left: -416px; top: -435px; width: 781px; }
.ielts-hero__ring--tl-2 { left: -390px; top: -409px; width: 729px; transform: rotate(-178.54deg); }
.ielts-hero__ring--tl-3 { left: -363px; top: -382px; width: 675px; transform: rotate(-178.54deg); }

/* Правая группа привязана к правому краю: при ширине меньше 1920 круги
   должны уезжать вместе с краем страницы, а не оставаться на месте. */
.ielts-hero__ring--r-1 { right: -568px; top: 429px;   width: 1197px; }
.ielts-hero__ring--r-2 { right: -528px; top: 469.5px; width: 1117px; transform: rotate(90deg); }
.ielts-hero__ring--r-3 { right: -487px; top: 510px;   width: 1035px; transform: rotate(90deg); }

/*
   Высота хиро в макете фиксированная – 946px, и контент в ней отцентрован
   по вертикали: поля 128/64 задают минимум, а оставшиеся 88px делятся
   поровну (проверено метаданными ноды 32543:3842 – контент начинается на
   y=172, а не на 128). Отсюда min-height и justify-content: center, иначе
   вся страница ниже уезжает вверх на 88px.
*/
.ielts-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-64);

  max-width: var(--page-width);
  margin-inline: auto;
  min-height: calc(946px - var(--header-h));

  /* Верх: контент начинается на y=128 от верха страницы, высоту шапки
     уже занял <header>. Низ: 64px до края ноды. */
  padding: max(16px, calc(128px - var(--header-h)))
           var(--ielts-hero-pad)
           var(--space-64);
}

.ielts-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.ielts-hero__title { max-width: 739px; }

.ielts-hero__cols {
  display: flex;
  gap: var(--ielts-hero-cols-gap);
}

.ielts-hero__lead {
  flex: 0 0 689px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
  color: var(--color-white-90);
}

.ielts-hero__support {
  flex: 0 0 603px;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.ielts-hero__support-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-invert);
}

/* --- Переключатель экзаменов (нода 32562:5152) ---------------------------- */
/*
   В макете нарисовано ровно одно состояние: два экзамена свёрнуты в
   вертикальные корешки, третий раскрыт. Ни второго состояния, ни анимации
   перелистывания в макете нет, поэтому здесь статика – переключения не
   выдумываем.
*/
.ielts-switch {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
  height: 350px;
}

.ielts-switch__tab {
  flex: 0 0 84px;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: var(--space-24);
  overflow: hidden;

  background: var(--color-bg-soft);
  border-radius: var(--ielts-radius-switch);
}

.ielts-switch__tab-label {
  transform: rotate(-90deg);
  white-space: nowrap;

  font-size: var(--ielts-fs-name);
  line-height: var(--ielts-lh-name);
  font-weight: 500;
  letter-spacing: var(--ielts-ls-name);
  color: var(--color-text);
}

.ielts-switch__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-32);

  height: 100%;
  padding: var(--space-24);
  overflow: hidden;

  background: var(--color-bg-soft);
  border-radius: var(--ielts-radius-switch);
}

.ielts-switch__media {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

/*
   В макете здесь object-fit: cover, и при 1920 он равен contain: плашка
   724×302 (2.40) почти совпадает с пропорциями логотипа (499×201 = 2.48).
   Но плашка резиновая, и на 1440 cover срезает логотипу последнюю букву.
   Логотип обрезать нельзя, поэтому contain – сознательное отступление.
*/
.ielts-switch__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ielts-switch__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
  text-align: center;
}

.ielts-switch__title {
  font-size: var(--ielts-fs-name);
  line-height: var(--ielts-lh-name);
  font-weight: 500;
  letter-spacing: var(--ielts-ls-name);
  color: var(--color-text);
}

.ielts-switch__text {
  width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: .7;
}

/* ==========================================================================
   Секции 3 и 6 – карточки экзаменов и программ подготовки
   Ноды 32555:4385 и 32555:4383. Тип карточки один, отличается наполнение.
   ========================================================================== */

.ielts-cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
}

.ielts-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);

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

.ielts-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/*
   Белая плашка под логотип. Высота фиксированная – 250px, а вот кадрирование
   у каждого логотипа своё: общего правила в макете нет, поэтому проценты
   вынесены в модификаторы, а не усреднены. Duolingo выходит за плашку
   сверху и снизу – так нарисовано, лишнее обрезается.
*/
.ielts-card__logo {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.ielts-card__logo-img {
  position: absolute;
  max-width: none;
}

.ielts-card__logo-img--ielts    { left: 12%;   top: 18.26%; width: 76%;    height: 63.48%; }
.ielts-card__logo-img--toefl    { left: 7.35%; top: 12.07%; width: 85.29%; height: 75.86%; }
.ielts-card__logo-img--duolingo { left: .04%;  top: -7.61%; width: 100%;   height: 124.2%; }

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

.ielts-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ielts-card__title {
  font-size: var(--ielts-fs-name);
  line-height: var(--ielts-lh-name);
  font-weight: 500;
  letter-spacing: var(--ielts-ls-name);
  color: var(--color-text);
}

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

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

.ielts-card__list-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ielts-card__list-title {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.ielts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  padding-top: var(--space-12);
  border-top: 1px solid var(--ielts-hairline);
}

.ielts-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.ielts-list__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}

/* ==========================================================================
   Секция 4 – Видео. Нода 32551:3983
   ========================================================================== */

/*
   Ролика в макете нет: нарисована обложка 432×597 с кнопкой Play и
   декоративная «капля» позади неё. Кнопка ни к чему не ведёт – плеер
   не выдумываем, см. отчёт по вёрстке.
*/
.ielts-video__media {
  position: relative;
  display: flex;
  justify-content: center;
  height: 597px;
  overflow: hidden;
}

.ielts-video__drop {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 1276.99px;
  max-width: none;
  transform: translateX(-50%);
}

.ielts-video__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 432px;
  height: 597px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, var(--color-blue-light), var(--ielts-gradient-to));
}

.ielts-video__poster {
  position: absolute;
  left: -83px;
  top: 0;
  width: 597px;
  height: 597px;
  max-width: none;
}

/* Затемнение фото: в макете это копия фото под чёрной плашкой на 20 %. */
.ielts-video__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ielts-overlay);
}

.ielts-video__play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 77px;
  height: 77px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.ielts-video__caption {
  max-width: 851px;
  margin: var(--ielts-space-40) auto 0;
  text-align: center;

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

/* ==========================================================================
   Секция 5 – Сравнительная таблица. Нода 32555:4384
   ========================================================================== */

/* Ниже 1000px таблица уезжает в собственный скролл, а не растягивает
   страницу: горизонтального скролла у документа быть не должно. */
.ielts-compare__scroll { overflow-x: auto; }

.ielts-compare__table {
  width: 100%;
  min-width: 1000px;
  table-layout: fixed;

  /* Плитки с зазором 8px – это border-spacing, а не border-collapse:
     собранная таблица теряет скругления ячеек. */
  border-collapse: separate;
  border-spacing: var(--space-8);

  background: var(--color-bg);
  border-radius: var(--ielts-radius-xl);
}

/* Первая колонка фиксированная – 443px, остальные три делят остаток. */
.ielts-compare__table th:first-child { width: 443px; }

.ielts-compare__th,
.ielts-compare__criterion,
.ielts-compare__cell {
  padding: var(--space-24);
  border-radius: var(--radius-md);
  text-align: center;
}

.ielts-compare__th {
  height: 82px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-h2);
  color: var(--color-text-invert);
}

/* Цвет шапки закреплён за экзаменом: IELTS красный, TOEFL зелёный,
   Duolingo жёлтый. Это не декор, менять местами нельзя. */
.ielts-compare__th--blue   { background: var(--color-brand); }
.ielts-compare__th--red    { background: var(--color-red); }
.ielts-compare__th--green  { background: var(--color-green); }
.ielts-compare__th--yellow { background: var(--color-yellow); }

.ielts-compare__criterion {
  height: 77px;
  border: 1px solid var(--color-brand);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-link);
}

.ielts-compare__cell {
  height: 77px;
  background: var(--color-bg-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* ==========================================================================
   Секция 7 – Наш подход. Нода 32555:4382
   ========================================================================== */

.ielts-approach__grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-20);
}

.ielts-approach__panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);

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

.ielts-approach__panel-title {
  width: 100%;
  text-align: center;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.ielts-approach__rows {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Второй ряд – две карточки во всю ширину, а не две из трёх колонок.
   Проверено по рендеру ноды 32551:4232: это решение дизайнера. */
.ielts-approach__row {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: var(--space-12);
}

.ielts-approach__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

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

.ielts-approach__card-text {
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

.ielts-approach__aside {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 501px;
  padding: var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-lg);

  /* Градиент снят с ноды 32551:4250: угол и точки остановки дробные. */
  background: linear-gradient(132.0354854282449deg,
                var(--color-bg-soft) 13.262%,
                var(--ielts-gradient-cold) 127.31%);
}

/*
   Фото отзеркалено по горизонтали – в макете на нём стоит поворот 180°
   вместе с отражением по вертикали, что в сумме даёт scaleX(−1).
   Привязано к правому краю, чтобы люди на снимке не уезжали за обрез,
   когда блок уже 910px.
*/
.ielts-approach__photo {
  position: absolute;
  right: -93px;
  top: 51px;
  width: 793px;
  height: 545px;
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
}

.ielts-approach__aside-text {
  position: relative;
  max-width: 518px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* ==========================================================================
   Секция 8 – Этапы подготовки. Нода 32555:4381
   ========================================================================== */

.ielts-stages__list {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
}

/*
   Линия тянется во всю ширину экрана (нода 32555:4255 – 1920px при
   контейнере 1840) и проходит ровно по центру кружков с номерами:
   24px = половина кружка. Поэтому это псевдоэлемент списка, а не рамка
   карточки. Кружки перекрывают её, потому что у пунктов position: relative.
*/
.ielts-stages__list::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 24px;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--color-border);
  opacity: .6;
}

.ielts-stages__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.ielts-stages__card {
  width: 100%;
  min-height: 269px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);

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

/* Плитка иконки одна на всех – 93×93. А вот сама иконка у каждого этапа
   своего размера: это разные векторы, приведение к общему их ломает,
   поэтому ширина задаётся атрибутом в разметке. */
.ielts-stages__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 93px;
  height: 93px;
  border-radius: var(--ielts-radius-iconbox);
}

.ielts-stages__icon img { flex: 0 0 auto; }

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

.ielts-stages__text {
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

/* ==========================================================================
   Секция 9 – Призыв записаться. Нода 32543:3713, 1920×714
   ========================================================================== */

/*
   --u – единица масштаба декоративного слоя (фото и заглушка под видео).
   При 1920 она равна 1px, ниже уменьшается ступенями. Без неё блоки,
   привязанные к правому краю, наезжают на текстовую колонку: мобильного
   макета нет, пропорции приходится держать самим.
*/
.ielts-cta {
  --u: 1px;

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

.ielts-cta__decor {
  position: absolute;
  inset: 0;
}

.ielts-cta__ring {
  position: absolute;
  max-width: none;
}

.ielts-cta__ring--l-1 { left: -712px; top: -817px; width: 1090px; transform: scaleY(-1); }
.ielts-cta__ring--l-2 { left: -676px; top: -781px; width: 1018px; transform: scaleY(-1); }
.ielts-cta__ring--l-3 { left: -638px; top: -743px; width: 942px;  transform: scaleY(-1); }

.ielts-cta__ring--r-1 { right: calc(35 * var(--u));  top: calc(147 * var(--u)); width: calc(1090 * var(--u)); transform: scaleY(-1) rotate(131.66deg); }
.ielts-cta__ring--r-2 { right: calc(71 * var(--u));  top: calc(183 * var(--u)); width: calc(1018 * var(--u)); transform: scaleY(-1) rotate(131.66deg); }
.ielts-cta__ring--r-3 { right: calc(109 * var(--u)); top: calc(221 * var(--u)); width: calc(942 * var(--u));  transform: scaleY(-1) rotate(131.66deg); }

.ielts-cta__person {
  position: absolute;
  right: calc(307 * var(--u));
  /* Привязка к НИЗУ, а не к верху. В макете фото 966px при секции 714
     уходит за нижний край на 290px (38 + 966 − 714) – женщина «стоит» на
     краю. С top-привязкой при --u < 1 низ фото поднимался выше низа
     секции, и висели обрезанные ноги (ловилось с ~1270; заказчик,
     2026-08-07). Выпуск за край масштабируется тем же --u. */
  bottom: calc(-290 * var(--u));
  width: calc(602 * var(--u));
  height: calc(966 * var(--u));
  max-width: none;
  object-fit: cover;
}

/*
   Белая плашка со словом «видео» – заглушка из макета (нода 32543:3734).
   Ролика под неё нет; оставлена как нарисована, см. отчёт по вёрстке.
*/
.ielts-cta__video {
  position: absolute;
  right: calc(40 * var(--u));
  top: calc(398 * var(--u));
  width: calc(445 * var(--u));
  height: calc(247 * var(--u));

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  overflow: hidden;

  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.ielts-cta__video-label {
  width: 100%;
  text-align: center;
  font-size: var(--ielts-fs-stub);
  line-height: var(--ielts-lh-stub);
  font-weight: 500;
  letter-spacing: var(--ielts-ls-stub);
  color: var(--color-text);
  opacity: .22;
}

/* Как и в хиро, высота ноды фиксированная (714px), контент отцентрован:
   по метаданным заголовок начинается на y=166 при поле 128. */
.ielts-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-64);

  max-width: var(--page-width);
  margin-inline: auto;
  min-height: 714px;
  padding: var(--ielts-cta-pad-y) var(--ielts-hero-pad);
}

.ielts-cta__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.ielts-cta__title {
  max-width: 523px;
  font-size: var(--ielts-fs-cta);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ielts-ls-cta);
}

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

  padding: var(--space-20);
  background: var(--color-bg);
  border: 1px solid var(--color-bg-soft);
  border-radius: var(--ielts-radius-note);
}

.ielts-cta__note-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 93px;
  height: 93px;
  border-radius: var(--ielts-radius-iconbox);
  background: var(--color-green);
}

.ielts-cta__note-text {
  max-width: 462px;
  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;
}

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

   Мобильного макета для этой страницы НЕТ – в Figma нарисован единственный
   размер 1920. Всё ниже – вынужденное решение верстальщика, а не дизайн:
   фиксированные ширины отпускаются в резиновые, ряды переносятся, декор
   уменьшается ступенями. Как только появится мобильный макет, этот блок
   надо переписать по нему, а не подгонять.
   ========================================================================== */

@media (max-width: 1719px) {

  /* 689 + 174 + 603 = 1466 перестаёт помещаться в поля хиро. */
  .ielts-hero__cols { gap: var(--space-64); }
  .ielts-hero__lead,
  .ielts-hero__support { flex: 1 1 0; min-width: 0; }

  .ielts-cta { --u: .82px; }
}

@media (max-width: 1279px) {

  .ielts-page {
    --ielts-fs-title: 28px;
    --ielts-fs-name: 28px;
    --ielts-fs-cta: 32px;
    --ielts-fs-stub: 40px;
    --ielts-hero-pad: var(--side-padding);
    --ielts-cta-pad-y: var(--space-64);
  }

  .ielts-cta { --u: .58px; }

  .ielts-cards { flex-wrap: wrap; }
  .ielts-card  { flex: 1 1 320px; }

  .ielts-stages__list { flex-wrap: wrap; }
  .ielts-stages__item { flex: 1 1 260px; }

  /* Линия рассчитана на один ряд – при переносе она теряет смысл. */
  .ielts-stages__list::before { display: none; }

  .ielts-approach__grid { flex-direction: column; }
  .ielts-approach__panel,
  .ielts-approach__aside { min-height: 0; }
  .ielts-approach__aside { min-height: 360px; }

  /* Ряды карточек «Мы анализируем» растянуты flex-базисом 0 под фикс-высоту
     панели 501. Когда панель отпускает высоту (min-height: 0 выше), ряды с
     нулевым базисом схлопываются и карточки 01–05 исчезали (заказчик,
     2026-08-07). В колонке ряды живут естественной высотой. */
  .ielts-approach__rows,
  .ielts-approach__row { flex: 0 0 auto; }
  .ielts-approach__card { min-height: 140px; }
}

@media (max-width: 900px) {

  .ielts-hero__cols { flex-direction: column; gap: var(--space-32); }

  /* Фиксированные высоты нод больше не нужны: контента столбиком больше,
     чем 946 и 714 из макета. */
  .ielts-hero__inner,
  .ielts-cta__inner { min-height: 0; }

  .ielts-switch { flex-direction: column; align-items: stretch; height: auto; }
  .ielts-switch__tab { flex: 0 0 auto; height: auto; padding: var(--space-16) var(--space-24); }
  .ielts-switch__tab-label { transform: none; }
  .ielts-switch__panel { flex-direction: column; height: auto; }
  .ielts-switch__media { width: 100%; height: 200px; }

  .ielts-cards { flex-direction: column; }
  .ielts-card  { flex: 1 1 auto; }

  /* Фото и заглушка перекрывают текст – на узком экране их место занять
     нечем, поэтому декор снимается целиком. */
  .ielts-cta__decor,
  .ielts-cta__person,
  .ielts-cta__video { display: none; }

  .ielts-cta__note { flex-direction: column; align-items: flex-start; }

  .ielts-stages__list { flex-direction: column; }
  .ielts-stages__item { flex: 1 1 auto; width: 100%; }
}

/* Аудит 2026-08-12: на телефоне три карточки «Мы анализируем» в ряд –
   по ~90px на каждую, слова шире карточек. Складываем в столбик. */
@media (max-width: 600px) {
  .ielts-approach__row { flex-wrap: wrap; }
  .ielts-approach__card { flex: 1 1 100%; }
}

@media (max-width: 600px) {

  .ielts-page {
    --ielts-fs-title: 24px;
    --ielts-fs-name: 24px;
    --ielts-fs-cta: 24px;
    --ielts-hero-pad: var(--space-20);
  }

  .ielts-video__media { height: auto; }
  .ielts-video__card  { width: 100%; max-width: 432px; height: 420px; }
  .ielts-video__drop  { display: none; }

  .ielts-list__icon { flex-basis: 40px; width: 40px; height: 40px; }
}

/* ==========================================================================
   IELTS · переключатель-аккордеон (правка 2026-08-25)
   Клик по корешку раскрывает его экзамен, остальные сворачиваются —
   открытым всегда остаётся ровно один (см. assets/js/page-ielts-*.js).
   ========================================================================== */
.ielts-switch__item {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 84px;                 /* свёрнутый корешок — 84px */
  transition: flex-grow .35s ease, flex-basis .35s ease;
}
.ielts-switch__item.is-open {
  flex-grow: 1;                   /* раскрытая карточка растягивается */
  flex-basis: 0;
}

/* Корешок теперь <button>: сбрасываем стили кнопки и растягиваем на весь корешок. */
.ielts-switch__item > .ielts-switch__tab {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
          appearance: none;
}
.ielts-switch__item > .ielts-switch__panel {
  flex: 1 1 auto;
  min-width: 0;
}

/* Свёрнут — виден корешок, панель скрыта; раскрыт — наоборот. */
.ielts-switch__item .ielts-switch__panel { display: none; }
.ielts-switch__item.is-open .ielts-switch__panel { display: flex; }
.ielts-switch__item.is-open .ielts-switch__tab { display: none; }

.ielts-switch__tab:hover .ielts-switch__tab-label { opacity: .65; }
.ielts-switch__tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -4px; }

/* Адаптив: на узких экранах — вертикальный аккордеон (корешки-полосы сверху). */
@media (max-width: 900px) {
  .ielts-switch__item { flex: 0 0 auto; width: 100%; }
  .ielts-switch__item.is-open { flex: 0 0 auto; }
  .ielts-switch__item > .ielts-switch__tab { height: auto; padding: var(--space-16) var(--space-24); }
  .ielts-switch__item .ielts-switch__tab-label { transform: none; }
}