/* invite.css — блок 13 «Приходите познакомиться».

   Эталон — Figma 1:5362 (в 1920.png баннер лежит на x=20, y=7357):
   1880×320, padding 60, radius 30, «Фоновый синий», контент по вертикали по центру.
   Внутри колонка с gap 40: заголовок 48/0.9/−0.02em (первая строка белая под плашкой,
   вторая — --color-light-blue) и CTA 340×74.

   Замеры, снятые прямо с 1920.png (координаты внутри баннера):
   • плашка-маркер   57…1111 по x, 59…108 по y → 1054×49 при сдвиге −3/−1 (совпало с 1:5923);
   • кнопка          60…400 по x, 186…260 по y → 340×74;
   • дети            правый край баннера, низ вровень, 602×308 (1:5929).

   Декор — два экспорта Figma поверх градиента:
   • сетка 1:5363 — (643; 0) 1237×320, прозрачность 0.15 вшита в сам SVG;
   • вихрь 1:5420 «Blend Group 3» — 497 кругов с градиентами. Figma отдаёт его рамку
     725.99×595.93, а экспорт обрезан по краске (585.75×543), поэтому ставим краску
     по центру рамки: 797.59+70.12 = 867.7 и −161.36+26.47 = −134.9. Проверено по
     1920.png: посчитанный левый край вихря совпадает с макетом (расхождение — только
     ширина мягкой кромки). */

.invite {
  padding-block: 20px;
}

/* container-type вешаем на .container — у него нет внутренних отступов, поэтому его
   content-box равен ширине баннера и 1cqw = 1% ширины баннера на всех брейкпоинтах.
   На саму карточку с padding 60 вешать нельзя — единица уехала бы на 6%. */
.invite .container {
  container-type: inline-size;
}

.invite__banner {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 320/1880 — на 1920 ровно 320px, ниже баннер сжимается пропорционально */
  min-height: 17.0213cqw;
  padding: var(--card-pad);
  background: var(--gradient-accent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ——— декор ——— */

.invite__decor {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Сетка прижата к правому краю баннера (643 + 1237 = 1880) и тянется на всю высоту:
   если текст переносится и баннер растёт, сетка не должна обрываться. */
.invite__decor--grid {
  top: 0;
  right: 0;
  width: 65.7979cqw;  /* 1237/1880 */
  height: 100%;
  object-fit: fill;
}

/* Вихрь лежит поверх сетки (порядок слоёв как в Figma) и выходит за верх баннера */
.invite__decor--wave {
  left: 46.1545cqw;   /* 867.7/1880 */
  top: -7.1753cqw;    /* −134.9/1880 */
  width: 31.1569cqw;  /* 585.75/1880 */
  height: 28.883cqw;  /* 543/1880 */
}

/* ——— контент ——— */

.invite__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.128cqw, 40px);
}

.invite__title {
  max-width: 63.8298cqw;  /* 1200/1880 — ширина текстовой ноды 1:5924 */
  font-size: var(--fs-h3);
  line-height: 0.9;
  /* −0.02em — как в Figma и в 1920.png: при −0.01em первая строка не влезает
     в замеренные 1048px и плашка расходится с макетом */
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.invite__muted {
  color: var(--color-light-blue);
}

/* Плашка-маркер. Полностью как у заголовка «Наши выпускники» в блоке вузов
   (.universities__hl): заливка --color-light-blue 40% (а не белый 20% из 1:5923).
   ⚠️ Высота полосы — ровно 0.9em (= шаг строк line-height), а не фикс. 49px:
   если заголовок переносится (сейчас на «LS,»), полосы фикс. высоты наезжают
   друг на друга и в зоне переноса дают двойную тёмную заливку. При 0.9em плашки
   встают встык, как в макете. backdrop-filter из Figma не переносим: на
   многострочном инлайне он съедает соседний текст. */
.invite__hl {
  padding-inline: 3px;
  margin-inline-start: -3px;
  background-image: linear-gradient(
    color-mix(in srgb, var(--color-light-blue) 40%, transparent),
    color-mix(in srgb, var(--color-light-blue) 40%, transparent)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.9em;
  background-position: 0 50%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Кнопка 1:5925 — общий .btn плюс два уточнения из макета: gap 10 (а не 12)
   и рамка иконки 30×30 (а не 20×20). Вместе они дают ровно 340×74. */
.invite__btn {
  gap: 10px;
}

/* Рамка иконки 30×30 на 1920 — резиновая, чтобы на узком десктопе стрелка
   не оставалась непропорционально крупной (на телефоне layout.css даёт 20) */
.invite__btn .btn__arrow {
  width: clamp(20px, 1.596cqw, 30px);
  height: clamp(20px, 1.596cqw, 30px);
}

/* ——— дети ——— */

/* Правый край вровень с баннером, низ вровень с низом баннера.
   ⚠️ Кадр детей сменён на портретный «головы-плечи» (952×760, соотношение 1.25,
   прежний был 602×308 = 1.95). Он выше, поэтому ширину слота ужали с 32 до 20cqw —
   иначе при height:auto высота вырастала до ~480 и overflow баннера срезал головы.
   На 20cqw высота ≈ 300 (16cqw) и вписывается в баннер 320 с зазором сверху. */
.invite__media {
  position: absolute;
  z-index: 1;
  /* Сдвинуты влево от правого края, чтобы заходить на синюю волну-декор
     (просьба клиента 30.07.2026): волна тянется до ~77cqw, дети при right:8cqw
     занимают ~72…92cqw и ложатся на её правую часть. */
  right: 8cqw;
  bottom: 0;
  width: 20cqw;
  height: auto;
}

/* ——— адаптив ———
   Обе прежние ступени (1600 и 1200) удалены целиком:
   • переменная --hl-height в них была уже мёртвой — высоту плашки задаёт
     `background-size: 100% 0.9em`, то есть она едет вместе с кеглем сама;
   • padding баннера, зазор колонки и отступы кнопки стали резиновыми
     и на этих ширинах дают ровно те же значения, что стояли в ступенях. */

/* Телефоны 360–767 — мобильный фрейм 1:12621: секция во всю ширину 360,
   без скруглений, padding 50px 20px, дети уходят под кнопку и выступают
   за левый край. Все координаты декора — в cqw, поэтому раскладка тянется
   до 767 без пересчёта (1cqw = 1% ширины экрана: у .container снят padding). */
@media (max-width: 767px) {
  .invite { padding-block: 0; }

  .invite .container { padding-inline: 0; }

  .invite__banner {
    display: block;
    min-height: 0;
    padding: var(--section-pad-y) var(--section-pad-x) 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ⚠️ Экспорт сетки на телефоне не используется — рисуем её CSS, как в блоке
     «Вузы» (.universities__banner::before). Причины (жалоба клиента 31.07.2026
     «сетка сломалась, должна быть во весь блок и на фоне»):
     • в grid.svg всего 5 горизонтальных линий против 22 вертикальных — он собран
       под низкий десктопный баннер 1237×320. На телефоне баннер выше ширины
       (на 360 — 360×646), и растянутый до 163cqw экспорт даёт ячейки 1:3 плюс
       пустую верхнюю половину без единой горизонтальной линии;
     • ширину 212.5cqw всё равно резало глобальное `img { max-width: 100% }`
       из base.css (замер на 719: 719 вместо 1528) — сетка накрывала только левую
       половину экрана, а из-за object-fit: fill ещё и сминалась по горизонтали.
     CSS-градиенты покрывают карточку целиком при любой высоте, ячейка остаётся
     квадратной 52.4 (как на десктопе), и слой лежит под фото детей — «на фоне». */
  .invite__decor--grid { display: none; }

  /* ⚠️ Сетка задаётся слоями background-image самого баннера, а НЕ отдельным
     слоем через ::before (жалоба клиента 31.07.2026 «сетка опять на детях,
     а надо на фоне»). Псевдоэлемент — позиционированный элемент, а вырезка
     детей лежит в обычном потоке, и по порядку отрисовки позиционированный слой
     всегда рисуется ПОВЕРХ потока: сетка ложилась прямо на детей. `z-index: -1`
     эту пару не разводит, а ломает совсем: ближайший контекст наложения —
     `.container` (у него `container-type: inline-size`, то есть layout
     containment), отрицательный слой ушёл бы ПОД собственный фон баннера
     и сетка пропала бы под градиентом. Фоновые слои гарантированно лежат под
     любым контентом, и порядок больше не зависит от position у соседей. */
  .invite__banner {
    background-image:
      repeating-linear-gradient(to right,
        color-mix(in srgb, var(--color-white) 15%, transparent) 0 1px, transparent 1px 52.4px),
      repeating-linear-gradient(to bottom,
        color-mix(in srgb, var(--color-white) 15%, transparent) 0 1px, transparent 1px 52.4px),
      var(--gradient-accent);
  }

  /* Вихрь в мобильном фрейме остаётся на десктопных координатах, то есть
     целиком за правым краем экрана — просто убираем его */
  .invite__decor--wave { display: none; }

  /* Ширина текстовой ноды 1:13185 — 300 при контенте 320, по ней ложатся переносы.
     Задана долей, а не в px: иначе на 767 заголовок остался бы узкой колонкой слева.
     Кегль 32 — единый для заголовков на телефоне (решение клиента 20.07.2026);
     в мобильном фрейме 1:12621 у баннера тоже 32, а --fs-h3 давал 28. */
  .invite__title {
    max-width: 93.75%;
    font-size: var(--fs-h2);
  }

  /* Радиус кнопок на телефоне 10, а не 20 (см. Tz/mobile-360.md, п. 1) */
  .invite__btn {
    align-self: stretch;
    width: 100%;
    border-radius: 10px;
  }

  /* Дети на телефоне — ОТДЕЛЬНЫЙ кроп «по пояс» kids-mobile.webp (760×951),
     подменяется через <source> в <picture>; на десктопе остаётся кадр
     «головы-плечи» kids.webp (952×760) — в низкий баннер 320 портретный
     кроп не влезает. Сделан из того же исходника клиента 4488×5608
     (rembg/u2net, кроп 120…1930 × 90…2355 по вырезке 2000×2499: сверху воздух
     над макушкой, снизу линия пояса — там кончается футболка девочки).
     Причина (просьба клиента 31.07.2026): прежний кадр «головы-плечи» на
     телефоне давал крупные лица во весь экран. При том же габарите по высоте
     кроп «по пояс» показывает детей целиком, и головы становятся вдвое мельче.
     ⚠️ max-width: none обязателен — глобальное `img { max-width: 100% }` из
     base.css здесь не мешает (вырезка уже, чем баннер), но правило оставлено,
     чтобы потолок в px не начал зависеть от ширины родителя.
     ⚠️ Ширина ограничена 300px: мобильная раскладка тянется до 767, и доля
     росла бы вместе с экраном (прежний кадр на 719 выходил 921×735 —
     почти весь экран), тогда как текст с кнопкой в кегле не растут.
     ⚠️ aspect-ratio задан явно: атрибуты width/height у <img> описывают
     ДЕСКТОПНЫЙ кадр (952×760), и до загрузки мобильного браузер считал бы
     высоту по чужой пропорции — блок дёргался бы при догрузке.
     ⚠️ margin-top положительный (был −15px): по просьбе клиента голова больше
     не заходит на кнопку — между CTA и макушкой мальчика 30px. */
  .invite__picture { display: contents; }

  /* ⚠️ position: static обязателен — базовое правило блока держит вырезку
     абсолютом в правом нижнем углу баннера (right: 8cqw; bottom: 0). Без сброса
     фото выпадает из потока: баннер не считает его высоту (замер на 535: 235
     вместо 610), а само оно висит в правом углу вместо центра. */
  .invite__media {
    position: static;
    display: block;
    width: min(83.333cqw, 300px);
    max-width: none;
    aspect-ratio: 760 / 951;
    margin: 30px auto 0;
  }
}