/* ege-banner.css — блок 9 «70% выпускников получают 240+ баллов ЕГЭ».
   Замеры: Figma 1:3836 (десктоп 1920) и 1:11187 (мобилка 360), сверка по 1920.png.

   Десктоп: карточка 1880×292 (Y 5052–5344), padding 60, radius 30.
   Фон — СПЛОШНОЙ --color-pink: «градиент» на макете даёт не заливка, а декор-вихрь
   (Figma отдаёт fill баннера как #FF2A7F). Заголовок 48/0.9 в четыре строки,
   маркеры — на 2-й и 3-й; поверх вихря — вырезка ученицы и бейджи ФГОС/ФИПИ.

   Весь декор спозиционирован в cqw от ширины карточки (как в universities.css):
   так композиция масштабируется вместе с баннером на 1600/1200. 1cqw = 18.8px на 1920. */

.ege-banner {
  padding-block: 20px;
}

/* ⚠️ container-type висит на .container, а не на самой карточке: cqw считается
   от CONTENT-box контейнера, и на карточке с padding 60 единица вышла бы
   1760/100 вместо 1880/100 — весь декор уезжал влево и мельчал на 6%.
   У .container же content-box (ширина минус --page-gap) в точности равен
   ширине карточки на всех брейкпоинтах. */
.ege-banner > .container {
  container-type: inline-size;
}

.ege-banner__banner {
  position: relative;
  overflow: hidden;
  padding: var(--card-pad);
  background: var(--color-pink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Декор-вихрь 1:3837 — 1899.23×676.15 в точке (262, −12).
   Втрое выше баннера: всё лишнее срезается overflow + скруглением. */
.ege-banner__wave {
  position: absolute;
  left: 13.936cqw;
  top: -0.638cqw;
  width: 101.023cqw;
  /* Без max-width: none глобальное `img { max-width: 100% }` из base.css режет
     вихрь до ширины карточки — 1899 схлопывались в 1880, на 1% уже макета.
     На телефоне это критичнее: там ширина задана в 903px при карточке 360. */
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* --- Заголовок --- */

.ege-banner__title {
  position: relative;   /* поверх вихря */
  z-index: 2;
  max-width: 50.05cqw;   /* 941 при баннере 1880 */
  font-size: var(--fs-h3);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

/* Маркер. В макете это два отдельных прямоугольника — на 2-й строке (280×49)
   и на 3-й (497×49); здесь один инлайн-span, а box-decoration-break клонирует
   фон на каждую строку — получаются ровно те же две плашки.
   Выступ по бокам 3px — по макету (плашка от x=60 при глифах от x=63).
   Форма и способ заливки — те же, что у маркера заголовка в universities.css:
   ⚠️ обычный `background` инлайну не годится — он заливает content area шрифта
   (~1.15em ≈ 55px), а строки идут с шагом line-height 0.9em (43px), и плашки
   2-й и 3-й строк наезжают друг на друга. Поэтому заливка задана картинкой
   с явной высотой 0.9em (= шаг строк): плашки встают ровно встык, как в макете,
   и высота едет вместе с font-size на брейкпоинтах. Скругления нет — в Figma 0.
   ⚠️ backdrop-filter: blur(20) из Figma применять нельзя — у многострочного
   инлайна браузер берёт общий бокс всех строк, и блюр съедает соседний текст
   (плашки в макете лежат ПОД текстом, а фон инлайна красится ПОВЕРХ уже
   отрисованных строк — «получают» и низ первой строки уходили в кашу).
   Заливка сплошная: полупрозрачная над декор-вихрем меняла бы цвет. */
.ege-banner__hl {
  background-image: linear-gradient(var(--color-pink-hl), var(--color-pink-hl));
  background-size: 100% 0.9em;
  background-position: 0 50%;
  background-repeat: no-repeat;
  padding: 0 3px;
  margin-left: -3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Вырезка и бейджи --- */

/* На десктопе обёртка в раскладке не участвует: вырезка и бейджи в макете
   привязаны к краям карточки, а не друг к другу. На узких экранах обёртка
   становится обычным блоком — там бейджи, наоборот, привязаны к вырезке. */
.ege-banner__media {
  display: contents;
}

/* Ученица 1:7094 — 387×292 в точке (866, 0): ровно во всю высоту баннера,
   поэтому задаём именно высоту (ширина 387 получается сама из пропорции
   690×520). Так вырезка упирается в оба края и когда баннер выше макетных
   292 — например на 1601–1919, где кегль заголовка ещё 48. */
.ege-banner__girl {
  position: absolute;
  display: block;
  left: 46.064cqw;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.ege-banner__girl img {
  height: 100%;
  width: auto;
}

.ege-banner__badge {
  position: absolute;
  z-index: 1;
  border-radius: 1.064cqw;   /* 20px на 1920 */
}

/* ФИПИ 1:4444 — 117×126 в точке (1703, 32) */
.ege-banner__badge--fipi {
  left: 90.585cqw;
  top: 1.702cqw;
  width: 6.223cqw;
  height: 6.702cqw;
}

/* ФГОС 1:4443 — карточка 143×143, повёрнутая на −14°.
   Figma отдаёт её габаритом 174.56×174.13 в точке (1522, 85.87) — это AABB
   повёрнутого квадрата; сторона и угол посчитаны по 1920.png. */
.ege-banner__badge--fgos {
  left: 81.797cqw;
  top: 5.396cqw;
  width: 7.606cqw;
  height: 7.606cqw;
  transform: rotate(-14deg);
}

/* --- Адаптив --- */

/* ≤1024 — раскладка мобильного макета 1:11187: заголовок сверху,
   под ним вырезка во всю ширину, бейджи лежат на ней справа.
   Боковая композиция ломается раньше: на ~800px строки заголовка
   догоняют вырезку (она стоит в 46cqw от левого края). */
@media (max-width: 1024px) {
  .ege-banner__banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 50px 20px;
  }

  /* Вихрь 1:11188 — 903×321.48 в точке (−210, 195), низ почти вровень с баннером */
  .ege-banner__wave {
    left: calc(50% - 390px);   /* на 360 даёт x = −210 */
    top: auto;
    bottom: 3.5px;
    width: 903px;
  }

  .ege-banner__title {
    max-width: none;
  }

  /* 340×314 в точке (10, 206) — прижата к нижнему краю и вылезает
     за внутренний отступ по 10px с каждой стороны (в макете так же). */
  .ege-banner__media {
    display: block;
    position: relative;
    z-index: 1;
    align-self: center;
    width: 340px;
    max-width: calc(100% + 20px);
    aspect-ratio: 340 / 314;
    margin-top: 55px;
    margin-bottom: -50px;
  }

  /* Здесь вырезка, наоборот, заполняет всю обёртку: у мобильной обрезки
     пропорция 340×314 совпадает с ней один в один */
  .ege-banner__girl {
    inset: 0;
  }

  .ege-banner__girl img {
    width: 100%;
    height: 100%;
  }

  /* Бейджи переезжают в координаты относительно вырезки (в % от 340×314) */
  .ege-banner__badge {
    border-radius: 20px;
  }

  /* 69×75 в точке (269.36, 371) макета → (259.36, 165) от вырезки */
  .ege-banner__badge--fipi {
    left: 76.28%;
    top: 52.55%;
    width: 20.29%;
    height: auto;
  }

  /* Карточка 85.3×85.3 (габарит 103.36 в точке (162, 402.9)) → (161, 205.8) */
  .ege-banner__badge--fgos {
    left: 47.36%;
    top: 65.54%;
    width: 25.09%;
    height: auto;
  }
}

/* ≤767 — секция типа A по `Tz/mobile-360.md` (как у вузов): во всю ширину 360,
   без скруглений и бокового поля, внутренний отступ 50/20. Соседние блоки на
   телефоне стыкуются вплотную, поэтому вертикальный зазор тоже снимается. */
@media (max-width: 767px) {
  .ege-banner { padding: 0; }

  .ege-banner > .container { padding-inline: 0; }

  .ege-banner__banner {
    padding: var(--section-pad-y) var(--section-pad-x);
    border-radius: 0;
    box-shadow: none;
  }

  /* Единый кегль заголовков на телефоне — 32 (решение клиента 20.07.2026).
     В макете у этого баннера стоит 28, но у соседних (вузы, приглашение,
     «выберите класс») — 32; разнобой макета выравниваем. */
  .ege-banner__title { font-size: var(--fs-h2); }

  /* Ручные переносы рассчитаны на четыре строки десктопа. На 32px в колонке 320
     каждая такая строка переносится ещё раз, и в конце повисают одиночные слова
     («более», «предмета»). Отдаём разбивку браузеру. */
  .ege-banner__title br { display: none; }

  /* ⚠️ Вихрь здесь НЕ переводить в доли ширины баннера. Так было (−58.333% /
     250.833% = −210/360 и 903/360), и на 360 совпадало с макетом, но раскладка
     360 тянется до 767, а вырезка ученицы в ней зафиксирована на 340px и не
     растёт. Вихрь же рос с баннером и обгонял её: на 462 он выходил 1159×413
     (3.4 ширины вырезки против макетных 2.66) и верхом залезал в заголовок —
     на y=118 при верхе вырезки 220. Правило ≤1024 (903px, центр на 61.5px
     правее середины) держит макетную пропорцию к вырезке на всём диапазоне
     и всё так же перекрывает баннер: на 767 вихрь идёт от −6.5 до 896.5. */
}