/* ==========================================================================
   Летние академические программы – страница

   Источник: Figma нода 32417:3525 (1920×10467), выгрузка 2026-08-04.
   Файл подключается сам по слугу (см. inc/enqueue.php), зависит от base.css
   и через него от variables.css. Хардкода цветов и кеглей, для которых есть
   токен, здесь нет: локальные переменные ниже – только то, чего в
   variables.css НЕТ.

   ОБЩИЕ ЗАМЕРЫ СТРАНИЦЫ
     ритм секций       140px (8 промежутков из 10; один 136 – округлён)
     боковое поле      40px, кроме хиро (128), финального блока (96)
                       и блока «как мы смотрим» (87 слева / 133 справа)
     надзаголовок      точка 16px #2597FF + текст 20 / 1.2 / −1px, вес 500
     заголовок секции  36 / 0.9 / −2.16px  = --fs-h2
     заголовок карточки 36 / 1 / −2.88px   – ДРУГОЙ стиль на том же кегле
     номер карточки    круг 48px, текст 24 Semi Bold белый
     плашка иконки     93×93, радиус 15.5 (не 16 – так в макете)
     галочка/крестик   бокс 52px
     карточки          радиус 16, отступ 24, фон #F2F2F8 или #EEF3FF
     наклейки-таблетки повёрнуты на 0.37…−2.02°, лежат ПОВЕРХ текста

   ТЕНЕЙ НЕТ НИ ОДНОЙ, HOVER НЕ НАРИСОВАН НИ У ОДНОЙ КНОПКИ.
   Их отсутствие здесь – не забывчивость, а состояние макета.
   ========================================================================== */

.summer {

  /* --- Кегли, которых нет в системе ------------------------- [РЕНДЕР] --- */
  /* Заголовок внутри карточки = переменная Figma text_36_med. Не путать с
     --fs-h2: там тот же кегль, но интерлиньяж 0.9 и трекинг −6 %. */
  --summer-fs-card:  36px;  --summer-lh-card:  1;   --summer-ls-card:  -.03em;

  /* Слово «видео» на заглушках под ролики */
  --summer-fs-video: 64px;  --summer-lh-video: .9;  --summer-ls-video: -.03em;

  /* --- Размеры повторяющихся элементов ---------------------- [РЕНДЕР] --- */
  --summer-num:         48px;      /* кружок с номером */
  --summer-icon:        93px;      /* плашка с иконкой */
  --summer-icon-radius: 15.5px;    /* её радиус: не 16, так в макете */
  --summer-check:       52px;      /* бокс галочки/крестика в списках */
  --summer-cross:       30.33px;   /* сам крестик внутри бокса 52 */
  --summer-chevron:     40px;
  --summer-gap-40:      40px;      /* отступа 40 в шкале space-* нет */
  --summer-hero-pad:    128px;     /* боковые поля хиро, они же вертикальные */
  --summer-bleed-pad:   96px;      /* боковые поля финального блока */
  --summer-hero-h:      917px;
  --summer-cta-h:       1042px;
  --summer-tile:        225.667px; /* плитка «01/02/03» на синем */
  --summer-tile-h:      253px;

  /* --- Градиенты -------------------------------------------- [РЕНДЕР] --- */
  /* В переменные Figma не вынесены (lin_gradient_1…4 отдают пустую строку),
     сняты с нод. Углы уже пересчитаны в CSS-градусы. */
  --summer-grad-info:   linear-gradient(125.085deg, #F2F2F8 13.262%, #B5DCFF 127.31%);
  --summer-grad-info2:  linear-gradient(126.428deg, #F2F2F8 13.262%, #B5DCFF 127.31%);
  --summer-grad-lilac:  linear-gradient(118.84deg,  #E6DBFF 13.411%, #B5DCFF 97.274%);
  --summer-grad-red:    linear-gradient(218.141deg, #FF6672 6.306%,  #FFC0C5 97.444%);
  --summer-grad-green:  linear-gradient(140.021deg, #53B780 20.988%, #A6FFCE 96.426%);
  --summer-grad-purple: linear-gradient(219.543deg, #845BEA 4.933%,  #D2C0FF 97.662%);

  /* Цвет акцентных слов внутри абзаца. Каждый блок переопределяет его под
     свою категорию – так один класс .summer-accent обслуживает все семь. */
  --summer-accent: var(--color-brand);
}

/* Ритм страницы: 140px между секциями. Отступ до подвала даёт сам подвал. */
.summer > .summer-section + .summer-section { margin-top: var(--section-gap); }


/* ==========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */

/* --- Надзаголовок и заголовок секции -------------------------------------- */

.summer-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);
}

.summer-eyebrow__dot {
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

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

/* Пробелы в заголовках-«дырках» под наклейки значащие: их нельзя схлопывать. */
.summer-pre { white-space: pre-wrap; }

/* --- Акцентное слово внутри абзаца ---------------------------------------- */

.summer-accent { color: var(--summer-accent); }

/* --- Кнопки --------------------------------------------------------------- */
/* Ширина фиксированная (485px в хиро, 710px в финале) – так в макете, не по
   контенту. Hover не нарисован ни у одной, поэтому его здесь нет. */

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

  width: var(--btn-w-hero);
  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;
}

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

/* --- Таблетка ------------------------------------------------------------- */
/* Отступы дробные (2.82px по вертикали) – это значения макета, не описка. */

.summer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.82px 11.278px;
  border-radius: var(--radius-pill);

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

.summer-pill--lg {
  padding-inline: var(--space-12);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
}

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

/* Наклейка: лежит поверх текста, координаты – центр в системе родителя. */
.summer-sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  translate: -50% -50%;
  rotate: var(--rot, 0deg);
  padding-inline: var(--space-12);
}

/* --- Кружок с номером ----------------------------------------------------- */

.summer-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  width: var(--summer-num);
  height: var(--summer-num);
  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);
}

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

/* --- Серая панель с сеткой белых плиток ----------------------------------- */

.summer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);

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

.summer-panel__title {
  max-width: 577px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  text-align: center;
}

.summer-panel__title--lg {
  font-size: var(--summer-fs-card);
  line-height: var(--summer-lh-card);
  letter-spacing: var(--summer-ls-card);
}

.summer-panel__grid {
  display: grid;
  gap: var(--space-12);
  width: 100%;
  flex: 1 1 auto;
}

.summer-tile {
  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);
}

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

.summer-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;

  width: var(--summer-icon);
  height: var(--summer-icon);
  border-radius: var(--summer-icon-radius);
}

/* Иконки заданы своими размерами: часть из них шире плашки и выходит за неё –
   так нарисовано, обрезки в макете нет. */
.summer-tile__icon img { flex: none; max-width: none; }

.summer-tile__icon--mint   { background: var(--color-mint); }
.summer-tile__icon--purple { background: var(--color-purple); }
.summer-tile__icon--red    { background: var(--color-red); }
.summer-tile__icon--yellow { background: var(--color-yellow); }
.summer-tile__icon--green  { background: var(--color-green); }

/* --- Карточка колонки ----------------------------------------------------- */

.summer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);

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

.summer-card--grey { background: var(--color-bg-soft); }
.summer-card--cold { background: var(--color-bg-cold); }

.summer-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}

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

.summer-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.summer-card__note {
  max-width: 315px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

/* --- Список с иконкой-маркером -------------------------------------------- */

.summer-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.summer-bullets__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.summer-bullets__icon {
  flex: none;
  width: var(--summer-check);
  height: var(--summer-check);
}

/* Интерлиньяж 1.2, хотя базовый для 20px – 1.3: в макете внутри этих строк
   он переопределён. */
.summer-bullets__text {
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-body);
}

/* --- Список белых строк (сравнение «рынок / мы») -------------------------- */

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

.summer-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1 1 0;

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

/* Крестик занимает 30.33px внутри бокса 52px – поля добраны маргином,
   чтобы обе колонки списков стояли по одной вертикали. */
.summer-list__icon {
  flex: none;
  width: var(--summer-cross);
  height: var(--summer-cross);
  margin-inline: 10.83px;
}

.summer-list__icon--full {
  width: var(--summer-check);
  height: var(--summer-check);
  margin-inline: 0;
}

.summer-list__text {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

/* --- Градиентная карточка со снимком -------------------------------------- */

.summer-info {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

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

.summer-info__lead {
  position: relative;
  z-index: 2;
  max-width: 693px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.summer-info__note {
  position: relative;
  z-index: 2;
  max-width: 407px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

/* --- Кадр: окно, внутри которого снимок может быть смещён и увеличен ------ */

.summer-frame {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  pointer-events: none;
}

.summer-frame img {
  position: absolute;
  left: var(--ix, 0);
  top: var(--iy, 0);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
  max-width: none;
  object-fit: cover;
}

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

.summer-video {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

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

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

.summer-video--lilac  { background: var(--summer-grad-lilac); }
.summer-video--red    { background: var(--summer-grad-red); }
.summer-video--green  { background: var(--summer-grad-green); }
.summer-video--purple { background: var(--summer-grad-purple); }
.summer-video--white  { background: var(--color-bg); }


/* ==========================================================================
   ХИРО – нода 32417:3530

   Фрейм объявлен 1918×917 вместо 1920: сдвиг дизайнера на 2px. Верстаем во
   всю ширину, декор привязан к правому краю холста 1920.
     фон #2597FF, padding 128 сверху / 96 снизу нет – 64, по бокам 128
     заголовок 48 / 1.1 / −3.84px, ширина 872
     лид       24 / 1.4 / −1.2px, ширина 702
     сноска    20 / 1.3 / −1px, ширина 406, прозрачность 60 %
     кнопки    485×57, радиус 999, зазор 8
   ========================================================================== */

/*
 * Шапка в макете стоит НА синем хиро, а в теме – в потоке до него, и до
 * 2026-08-06 полоса шапки оставалась белой. Красим её в brand, когда за
 * шапкой идёт это хиро – тот же приём, что у club-hero / adm-hero.
 * Верх хиро летних программ плоский (кольца и полароиды ниже), поэтому
 * сплошная заливка совпадает с фоном при любой высоте шапки.
 */
.site-header:has(+ .site-main .summer-hero) {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-brand);
}

.summer-hero {
  position: relative;
  overflow: hidden;
  min-height: var(--summer-hero-h);

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-block: var(--summer-hero-pad) var(--space-64);
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.summer-hero__inner {
  position: relative;
  z-index: 2;

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

  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--summer-hero-pad);
}

.summer-hero__texts {
  display: flex;
  flex-direction: column;
  gap: var(--summer-gap-40);
  max-width: 100%;
}

.summer-hero__title {
  max-width: 872px;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
}

.summer-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

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

.summer-hero__lead-note {
  max-width: 406px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

.summer-hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Декор хиро ----------------------------------------------------------- */
/* Слой ограничен шириной страницы и центрируется: координаты сняты с холста
   1920, на более широком мониторе кластер не должен уезжать за окном. */

.summer-hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: var(--page-width);
  margin-inline: auto;
  pointer-events: none;
}

/* Круги концентричны: центр в 517.5px от правой границы и 762.5px сверху. */
.summer-hero__ring {
  position: absolute;
  right: 517.5px;
  top: 762.5px;
  translate: 50% -50%;
  max-width: none;
}

.summer-hero__ring--1 { width: 1197px; height: 1197px; }
.summer-hero__ring--2 { width: 1117px; height: 1117px; }
.summer-hero__ring--3 { width: 1035px; height: 1035px; }

/* Полароид: белая рамка, у которой низ шире верха. Позиция задана по
   верхнему левому углу самой карточки, а не её габаритного прямоугольника –
   пересчитано из поворота. */
.summer-hero__photo {
  position: absolute;
  z-index: 1;
  background: var(--color-bg);
}

.summer-hero__photo img {
  width: 100%;
  object-fit: cover;
}

.summer-hero__photo--1 {
  right: 586.6px;
  top: 474.56px;
  width: 358.065px;
  height: 354.13px;
  padding: 18.521px 18.521px 49.388px;
  border-radius: 24.694px;
  rotate: -6.66deg;
}
.summer-hero__photo--1 img { height: 222.247px; border-radius: 18.521px; }

.summer-hero__photo--2 {
  right: 323.26px;
  top: 287.66px;
  width: 321.415px;
  height: 317.883px;
  padding: 16.625px 16.625px 44.333px;
  border-radius: 22.167px;
  rotate: 10.07deg;
}
.summer-hero__photo--2 img { height: 199.499px; border-radius: 16.625px; }

.summer-hero__photo--3 {
  right: 79.07px;
  top: 474.33px;
  width: 326.222px;
  height: 322.637px;
  padding: 16.874px 16.874px 44.996px;
  border-radius: 22.498px;
  rotate: -17.36deg;
}
.summer-hero__photo--3 img { height: 202.482px; border-radius: 16.874px; }

/* Подписи-таблетки: 24px, лежат поверх полароидов. */
.summer-hero__pill {
  position: absolute;
  z-index: 2;
  translate: 50% -50%;
  rotate: 2.48deg;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
}

.summer-hero__pill--1 { right: 278.07px; top: 329.55px; }
.summer-hero__pill--2 { right: 942.57px; top: 498.92px; }
.summer-hero__pill--3 { right: 141.01px; top: 438px; }


/* ==========================================================================
   КАК МЫ НА ЭТО СМОТРИМ – нода 32476:3784

   Блок сидит НЕ в общем контейнере: левое поле 87px, правое 133px, ширина
   1700. Так в макете; выравнивать по остальным секциям – значит спорить
   с дизайнером, а не верстать по нему.
     колонки 690 / 811, зазор 199
     лид 28 / 1.2 / −1.4px, прозрачность 78 %
     панель 811×636, плитки 2×2
   ========================================================================== */

.summer-view__inner {
  display: grid;
  grid-template-columns: minmax(0, 690fr) minmax(0, 811fr);
  gap: 199px;
  align-items: center;

  max-width: var(--page-width);
  margin-inline: auto;
  padding-left: 87px;
  padding-right: 133px;
}

.summer-view__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

/* Зазор до лида 32 = 16 из gap + 16 маргина. */
.summer-view__lead {
  margin-top: var(--space-16);
  max-width: 546px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  opacity: .78;
}

.summer-view__note {
  max-width: 458px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

.summer-view__panel { min-height: 636px; }

.summer-view__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}


/* ==========================================================================
   АКАДЕМИЧЕСКИЕ ПРОГРАММЫ – нода 32445:3736

     панель 1065 + зазор 20 + заглушка 754, обе высотой 650
     сетка панели 4×2, плитка 253px
     заголовок панели 36 / 1 / −2.88px
   ========================================================================== */

.summer-academic__title {
  margin-top: var(--space-16);
  max-width: 576px;
}

.summer-academic__note {
  margin-top: var(--space-32);
  max-width: 670px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  opacity: .6;
}

.summer-academic__body {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: minmax(0, 1065fr) minmax(0, 754fr);
  gap: var(--space-20);
  align-items: stretch;
}

.summer-academic__panel { padding: var(--space-24); }

.summer-academic__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--summer-tile-h), auto);
}

.summer-academic__media {
  display: flex;
  border-radius: var(--radius-lg);
}

.summer-academic__media .summer-video {
  flex: 1 1 auto;
  padding: var(--space-16);
}


/* ==========================================================================
   АКАДЕМИЧЕСКИЙ ТУРИЗМ – нода 32417:3604

     шапка по центру, заголовок шириной 1162
     колонки 910 / 445 / 446, зазор 20, высота карточек 649
     наклейки-заголовки колонок наезжают на верхний край карточки
     снимок в градиентной карточке – 929×558 от левого края, низом обрезан
   ========================================================================== */

.summer-tourism__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.summer-tourism__title { max-width: 1162px; }

.summer-tourism__cols {
  margin-top: 82px;
  display: grid;
  grid-template-columns: minmax(0, 910fr) minmax(0, 445fr) minmax(0, 446fr);
  gap: var(--space-20);
  align-items: stretch;
}

/* Градиентная карточка начинается на 6px ниже списков – так в макете. */
.summer-tourism__info {
  --summer-accent: var(--color-brand);
  margin-top: 6px;
  gap: var(--space-24);
  min-height: 643px;
  background: var(--summer-grad-info);
}

.summer-tourism__photo {
  --x: 0;
  --y: 163px;
  --w: 929px;
  --h: 558px;
}

.summer-tourism__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);

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

.summer-tourism__col--market { --summer-accent: var(--color-red); }
.summer-tourism__col--offer  { --summer-accent: var(--color-green); }

.summer-tourism__badge {
  position: absolute;
  z-index: 2;
  translate: -50% -50%;
  rotate: -1.17deg;

  padding-inline: var(--space-16);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);

  /* Плашка не шире колонки: при сжатии колонок фикс-координаты в px
     выталкивали её за карточку на десятки пикселей (аудит 2026-08-12).
     Координата центра – в % ширины колонки (макет: 218.81/445, 128.83/445),
     длинный текст переносится. */
  max-width: calc(100% - var(--space-8));
  white-space: normal;
  text-align: center;
}

.summer-tourism__badge--market { left: 49.17%; top: -12.24px; }
.summer-tourism__badge--offer  { left: 28.95%; top: -6.03px; }

/* На сжатых колонках смещённый центр загоняет короткую плашку за левый
   край (ловилось уже на 1660) – ниже макетной ширины обе встают по центру
   верха своей колонки. */
@media (max-width: 1919px) {
  .summer-tourism__badge--market,
  .summer-tourism__badge--offer { left: 50%; }
}


/* ==========================================================================
   ТЕСТ-ДРАЙВ – нода 32417:4127

     колонки 445 / 445 / 910, зазор 20, высота 612
     снимок в градиентной карточке – 978×546 со сдвигом 48 / 96
   ========================================================================== */

.summer-testdrive__title { margin-top: var(--space-16); }

.summer-testdrive__cols {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 445fr)) minmax(0, 910fr);
  gap: var(--space-20);
  align-items: stretch;
}

.summer-testdrive__card { min-height: 612px; }
.summer-testdrive__card--student { --summer-accent: var(--color-yellow); }
.summer-testdrive__card--after   { --summer-accent: var(--color-purple); }

.summer-testdrive__info {
  gap: var(--space-12);
  min-height: 612px;
  background: var(--summer-grad-info2);
  --summer-accent: var(--color-brand);
}

.summer-testdrive__photo {
  --x: 48px;
  --y: 96px;
  --w: 978px;
  --h: 546px;
}


/* ==========================================================================
   КОМУ ПОДОЙДУТ – нода 32417:3665

   Приём макета: заголовок набран с «дыркой», поверх которой лежит наклонная
   таблетка. Читается «Ученикам с высокими академическими амбициями», а в
   слое стоит «академическим» – наклейка накрывает окончание. Воспроизведено
   как нарисовано; см. отчёт.
     4 карточки 445×796, зазор 20, отступ 24, радиус 16
     снимки и иконки – абсолютные, карточка их обрезает
   ========================================================================== */

.summer-fit__title { margin-top: var(--space-16); }

.summer-fit__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.summer-fit__card {
  position: relative;
  overflow: hidden;
  min-height: 796px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.summer-fit__card--cold { background: var(--color-bg-cold); }
.summer-fit__card--grey { background: var(--color-bg-soft); }

.summer-fit__deco {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  max-width: none;
  rotate: var(--rot, 0deg);
}

.summer-fit__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* Наклейки этой секции уже наклеек карточек-итогов: 11.278px против 12. */
.summer-fit__text .summer-sticker { padding-inline: 11.278px; }

.summer-fit__card-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.summer-fit__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}


/* ==========================================================================
   ЧТО ДАЁТ ПРОГРАММА – нода 32417:3730

   Компонент карточки в макете имеет развёрнутое состояние со списком, но
   на этом экране все четыре стоят свёрнутыми, и сценария раскрытия в
   прототипе нет. Шеврон нарисован – оставлен как рисунок, без поведения.
     4 карточки 445×250, зазор 20
     шеврон 40px отражён по вертикали (в исходнике «галочка» смотрит вверх)
   ========================================================================== */

.summer-gains__title { margin-top: var(--space-16); }

.summer-gains__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
}

.summer-gains__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

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

.summer-gains__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
}

.summer-gains__label {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

/* Вторая строка заголовка в макете пустая: она держит место под наклейку. */
.summer-gains__line { display: block; }

/* Уже макетных 445px карточка теснит текст с наклейкой к шеврону и краям
   (заказчик, 2026-08-12): кегль ступенью ниже, зазор до шеврона держим. */
@media (max-width: 1919px) {
  .summer-gains__label { font-size: 22px; }
  .summer-gains__content { gap: var(--space-20); }
  .summer-gains__chevron { flex: 0 0 auto; }
}

@media (max-width: 1600px) {
  .summer-gains__label { font-size: 20px; }
}

.summer-gains__chevron {
  flex: none;
  width: var(--summer-chevron);
  height: var(--summer-chevron);
  scale: 1 -1;
}


/* ==========================================================================
   ГЕОГРАФИЯ ПРОГРАММ – нода 32417:3851

   Шахматка 2×3: карточка направления и заглушка под видео чередуются,
   во втором ряду порядок обратный. Ряды 453 / 452 / 453, зазор 20.
   ========================================================================== */

.summer-geo__title {
  margin-top: var(--space-16);
  max-width: 708px;
}

.summer-geo__grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(453px, auto) minmax(452px, auto) minmax(453px, auto);
  gap: var(--space-20);
}

.summer-geo__grid > :nth-child(1) { grid-area: 1 / 1; }
.summer-geo__grid > :nth-child(2) { grid-area: 1 / 2; }
.summer-geo__grid > :nth-child(3) { grid-area: 2 / 2; }
.summer-geo__grid > :nth-child(4) { grid-area: 2 / 1; }
.summer-geo__grid > :nth-child(5) { grid-area: 3 / 1; }
.summer-geo__grid > :nth-child(6) { grid-area: 3 / 2; }

.summer-geo__card {
  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);
}

.summer-geo__name {
  font-size: var(--summer-fs-card);
  line-height: var(--summer-lh-card);
  font-weight: var(--fw-h2);
  letter-spacing: var(--summer-ls-card);
  text-align: center;
}

.summer-geo__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 610px;
}

.summer-geo__desc {
  max-width: 610px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-align: center;
  opacity: .6;
}


/* ==========================================================================
   ВАЖНО ПОНИМАТЬ – нода 32460:7405

     две колонки по 910, зазор 20, панель 910×684
     сетка панели: первый ряд 2 плитки, второй 3 – считается в шести долях
   ========================================================================== */

.summer-risk__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: start;
}

.summer-risk__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.summer-risk__lead {
  margin-top: var(--space-16);
  max-width: 623px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  opacity: .6;
}

.summer-risk__note {
  margin-top: var(--space-32);
  max-width: 418px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: .6;
}

.summer-risk__panel { min-height: 684px; }

.summer-risk__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.summer-risk__grid > :nth-child(-n + 2) { grid-column: span 3; }
.summer-risk__grid > :nth-child(n + 3)  { grid-column: span 2; }


/* ==========================================================================
   ФИНАЛЬНЫЙ ПРИЗЫВ – нода 32417:3559

     фон #2597FF, 1920×1042, padding 128 по вертикали / 96 по бокам
     заголовок 40 / 1.2 / −2.4px, ширина 779
     плитки: ряд из трёх по 225.667, затем 225.667 + 463, все высотой 253
     кнопки шириной 710
     круги концентричны: центр в 580px от правого края и 692px сверху
   ========================================================================== */

.summer-cta {
  position: relative;
  overflow: hidden;
  min-height: var(--summer-cta-h);

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* В макете объявлено 128, но фрейм задан жёсткой высотой 1042, и
     содержимое в него не влезает: Figma центрирует его и «съедает» половину
     полей – по рендеру сверху остаётся ~61px. Верстаем по рендеру, иначе
     блок вытягивается на 130px и декор расходится с текстом. */
  padding-block: var(--space-64);
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.summer-cta__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: var(--page-width);
  margin-inline: auto;
}

.summer-cta__ring {
  position: absolute;
  right: 580px;
  top: 692px;
  translate: 50% -50%;
  max-width: none;
}

.summer-cta__ring--1 { width: 1090px; height: 1090px; }
.summer-cta__ring--2 { width: 1018px; height: 1018px; }
.summer-cta__ring--3 { width: 942px;  height: 942px; }

.summer-cta__photo {
  --x: 671px;
  --y: 209px;
  --w: 1561px;
  --h: 911px;
  --iy: -.08%;
  --ih: 104.57%;
  z-index: 1;
}

.summer-cta__video {
  position: absolute;
  left: 1435px;
  top: 733px;
  z-index: 2;
  width: 445px;
  height: 247px;
}

.summer-cta__inner {
  position: relative;
  z-index: 3;

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

  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--summer-bleed-pad);
}

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

/* 40px при интерлиньяже 1.2 – у токена --lh-display он 1.1, поэтому здесь
   берётся --lh-h4. Кегль и трекинг остаются системными. */
.summer-cta__title {
  max-width: 779px;
  font-size: var(--fs-display);
  line-height: var(--lh-h4);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
}

.summer-cta__sub {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.summer-cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.summer-cta__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  max-width: 873px;
}

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

  width: var(--summer-tile);
  min-height: var(--summer-tile-h);
  padding: var(--space-24);
  background: var(--color-bg-cold);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}

.summer-cta__tile--intro {
  background: var(--color-brand);
  border: 1px solid var(--color-text-invert);
  color: var(--color-text-invert);
}

.summer-cta__tile--wide { width: 463px; }

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

.summer-cta__buttons .summer-btn { width: 100%; }


/* ==========================================================================
   АДАПТИВ – ЗАГЛУШКА, А НЕ РЕШЕНИЕ

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

@media (max-width: 1600px) {
  .summer-view__inner { gap: var(--space-64); padding-inline: var(--side-padding); }
}

@media (max-width: 1440px) {
  /* Декор хиро и финала рассчитан на холст 1920: на меньшем он лезет
     на текст, поэтому снимается целиком. */
  .summer-hero__decor,
  .summer-cta__decor { display: none; }

  .summer-hero { min-height: 0; padding-block: var(--space-64); }
  .summer-hero__inner,
  .summer-cta__inner { padding-inline: var(--side-padding); }
  .summer-cta { min-height: 0; padding-block: var(--space-64); }

  .summer-tourism__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-48);
  }
  .summer-tourism__info { grid-column: span 2; }

  .summer-testdrive__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summer-testdrive__info { grid-column: span 2; }

  .summer-fit__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summer-gains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .summer-academic__body { grid-template-columns: minmax(0, 1fr); }
  .summer-academic__media .summer-video { min-height: 320px; }
  .summer-academic__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .summer-risk__cols { grid-template-columns: minmax(0, 1fr); }
  .summer-risk__panel { min-height: 0; }
}

@media (max-width: 1024px) {
  .summer-view__inner { grid-template-columns: minmax(0, 1fr); }
  .summer-view__panel { min-height: 0; }

  .summer-geo__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  /* :nth-child(n) вместо * – иначе специфичность (0,1,0) проигрывает базовым
     .summer-geo__grid > :nth-child(1..6) с явными grid-area, карточки
     оставались во «второй колонке» и уезжали за экран (замер 640, 2026-08-06). */
  .summer-geo__grid > :nth-child(n) { grid-area: auto; min-height: 320px; }

  .summer-risk__grid > :nth-child(-n + 2),
  .summer-risk__grid > :nth-child(n + 3) { grid-column: span 3; }

  .summer-fit__card { min-height: 640px; }
}

@media (max-width: 640px) {
  .summer > .summer-section + .summer-section { margin-top: var(--space-64); }

  .summer-view__grid,
  .summer-academic__grid,
  .summer-tourism__cols,
  .summer-testdrive__cols,
  .summer-fit__grid,
  .summer-gains__grid { grid-template-columns: minmax(0, 1fr); }

  .summer-tourism__info,
  .summer-testdrive__info { grid-column: auto; }

  .summer-risk__grid > :nth-child(-n + 2),
  .summer-risk__grid > :nth-child(n + 3) { grid-column: span 6; }

  .summer-academic__grid { grid-auto-rows: auto; }
  .summer-cta__tile,
  .summer-cta__tile--wide { width: 100%; }

  .summer-hero__title { font-size: var(--fs-display); }
  .summer-video__label { font-size: var(--summer-fs-card); }

  /* Таблетки в макете однострочные и шире экрана телефона: на 390 их
     приходится переносить, иначе они вылезают за границу окна. */
  .summer-pill { max-width: 100%; white-space: normal; text-align: center; }
}