/* no-homework.css — блок 11 «Нет домашних заданий».
   Замеры: Figma 1:4605 (десктоп 1920) и 1:11866 (мобилка 360), сверка по 1920.png.

   Десктоп: карточка 1880×222 (Y 6307–6529), padding 60, radius 30, фон --color-light-blue.
   Раскладка row / space-between / align-end: слева текст 1081, справа CTA.
   Поверх — два абсолютных слоя: вихрь (1:4606) и вырезка мальчика (1:5310);
   оба вылезают за карточку и срезаются overflow.

   ⚠️ Вихрь: Figma отдаёт ноду как 1224.34×687.72, а рендер приходит 1207×608 —
   группа отмасштабирована неравномерно. Проверено замером по 1920.png (сверка
   границ ленты на строках 6310/6360/6480/6528): совпадает только вариант
   с РАСТЯЖЕНИЕМ картинки в 1224.34×687.72, поэтому height задан явно,
   а не auto.

   🫧 Блок РЕЗИНОВЫЙ: вся десктопная геометрия — коробка карточки, ширина и кегль
   текста, кнопка — задана в cqw (база 1880 = 100cqw, т.е. 1px ≈ 0.05319cqw),
   как и декор. Композиция — равномерный масштаб макета 1920 на всём диапазоне
   1025–1920 (выше 1920 cqw заморожен: .container с max-width 1920 держит
   content-box 1880). Перенос текста на 3 строки инвариантен: ширина и шрифт
   ужимаются одним коэффициентом. Мобилка ≤1024 перестраивается в колонку и
   гасит cqw явными px (иначе единица протекла бы в мелкий шрифт/зазоры). */

.no-homework {
  padding-block: 20px;
}

/* ⚠️ container-type — на .container, а не на карточке: cqw считается от content-box,
   и на карточке с padding 60 единица вышла бы 1760/100 вместо 1880/100
   (та же ловушка, что в ege-banner.css). */
.no-homework > .container {
  container-type: inline-size;
}

.no-homework__card {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.128cqw;         /* 40 */
  min-height: 11.809cqw; /* 222 */
  padding: 3.191cqw;     /* 60 */
  background: var(--color-light-blue);
  border-radius: 1.596cqw; /* 30 — резиновый, чтобы не отставать от масштаба карточки */
  box-shadow: var(--shadow-card);
}

/* Слои по порядку из Figma: вихрь → текст → мальчик → кнопка */

/* Вихрь 1:4606 — 1224.34×687.72 в точке (724, −204) от карточки */
.no-homework__wave {
  position: absolute;
  z-index: 0;
  left: 38.511cqw;
  top: -10.851cqw;
  width: 65.125cqw;
  height: 36.581cqw;
  pointer-events: none;
  user-select: none;
}

/* Вырезка 1:5310 — 495×256 в точке (1061, 0): прижата к верху карточки
   и на 34px свисает за низ, срез даёт overflow */
.no-homework__boy {
  position: absolute;
  z-index: 2;
  left: 56.436cqw;
  top: 0;
  width: 26.330cqw;
  pointer-events: none;
  user-select: none;
}

.no-homework__boy img {
  width: 100%;
  height: auto;
}

.no-homework__text {
  position: relative;   /* поверх вихря */
  z-index: 1;
  max-width: 57.500cqw; /* 1081 — резиновая, чтобы отслеживать позицию мальчика (left: 56.436cqw) */
  font-size: 1.489cqw;  /* 28 — резиновый кегль: перенос на 3 строки инвариантен ширине */
  line-height: 1.2;
  color: var(--color-blue);
}

.no-homework__accent {
  color: var(--color-pink);
}

/* CTA выше вырезки: в макете кнопка перекрывает и вихрь, и мальчика.
   В Figma стрелка лежит в боксе 42×42 (padding 22/22/22/40, gap 10) — итог 261×86.
   Здесь стрелка обычная 20×20, поэтому бокс развёрнут в плоские отступы:
   справа 22+(42−20)/2 = 33, слева от текста 10+(42−20)/2 = 21,
   высота добирается min-height. Ширина и высота сходятся с макетом 1-в-1. */
.no-homework__btn {
  position: relative;
  z-index: 3;
  flex: none;
  min-height: 4.574cqw;                              /* 86 */
  padding: 1.170cqw 1.755cqw 1.170cqw 2.128cqw;      /* 22 33 22 40 */
  gap: 1.117cqw;                                     /* 21 */
  font-size: 1.064cqw;                               /* 20 (--fs-btn на 1920) */
  border-radius: 1.064cqw;                           /* 20 (--radius-btn) */
}

.no-homework__btn .btn__arrow {
  width: 1.064cqw;   /* 20 */
  height: 1.064cqw;
}

/* Промежуточные ширины 1025–1920 отдельного медиазапроса больше не требуют:
   резиновые cqw держат пропорцию макета сами (раньше здесь чинили наезд текста
   на мальчика через max-width, теперь ширина текста тоже в cqw и едет с ним). */

/* --- Планшет 768–1024: блок остаётся баннером ---
   Решение клиента 21.07.2026: по форме — как «Приходите познакомиться» (invite):
   слева колонка «текст → кнопка», справа вырезка, карточка со скруглением.
   Раньше с 1024 включалась мобильная колонка, и вырезка шла во всю ширину:
   на 988 мобильный кроп 424px растягивался до 1028 (×2.4, мыло) и занимал
   пол-экрана. Ниже 768 мобильная раскладка остаётся как была.

   Геометрия карточки, вихрь и позиция вырезки — десктопные, в cqw, они едут
   пропорционально сами. Здесь гасим только то, что от пропорции страдает:
   кегли (иначе текст 1.489cqw = 11px на 768) и коробку кнопки. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Текст и кнопка — колонкой слева, как в invite; вырезка лежит абсолютом
     и в этой колонке не участвует */
  .no-homework__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-height: 0;    /* высота — по контенту: строк больше, чем на десктопе */
    padding: 40px;
  }

  /* Место под вырезку справа. 60% — при большей ширине последняя строка
     доезжает до мальчика, при меньшей текст рвётся на лишнюю строку. */
  .no-homework__text {
    max-width: 60%;
    font-size: var(--fs-h4);
  }

  /* Кнопка по содержимому, а не во всю ширину (в мобильной раскладке она
     растянута). Коробка в px: резиновые cqw дали бы 34px высоты на 768. */
  .no-homework__btn {
    min-height: 0;
    padding: 16px 26px;
    gap: 10px;
    font-size: var(--fs-btn);
    border-radius: var(--radius-btn);
  }

  /* Стрелка — назад к 20px: резиновое правило блока специфичнее layout.css */
  .no-homework__btn .btn__arrow {
    width: 20px;
    height: 20px;
  }

  /* Вырезка прижата к правому-нижнему углу карточки. Привязка к низу, а не
     к верху как на десктопе: карточка здесь выше (текст переливается на
     большее число строк), и от верха мальчик повис бы в воздухе. */
  .no-homework__boy {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    /* 36% — вырезка встаёт вплотную к колонке текста (её бокс кончается на 59%)
       и занимает по высоте ~80% карточки: при 32% мальчик закрывал только
       нижнюю половину правой части и справа зияла пустота. Доля меньше прежних
       40%, потому что здесь работает полный кадр 424×272 (см. <picture>
       в index.html) — он выше десктопного при той же ширине. */
    width: 36%;
  }

  /* Вихрь тоже уходит в правый-нижний угол, за вырезку. Десктопные cqw здесь
     не работают: карточка вдвое выше по отношению к своей ширине (текст идёт
     на 5 строк вместо 3), и лента, растянутая по десктопной пропорции,
     переползала поперёк карточки прямо по тексту. */
  .no-homework__wave {
    left: auto;
    top: auto;
    right: -10%;
    bottom: -15%;
    width: 55%;
    height: auto;
  }
}

/* --- Мобильный фрейм 1:11866 (360×567) ---
   Секция типа A: во всю ширину, без скруглений, padding 50px 20px, gap 30.
   Порядок: текст → CTA → мальчик во всю ширину, вихрь заходит справа.
   Мальчик и вихрь встают в поток/к низу, потому что высота карточки
   здесь определяется текстом, а он переливается по-разному.
   ⚠️ Порог опущен с 1024 до 767 (21.07.2026): на 768–1024 блок остаётся
   баннером (см. запрос выше), мобильная колонка там растягивала вырезку
   на всю ширину. */
@media (max-width: 767px) {
  .no-homework {
    padding-block: 0;
  }

  .no-homework > .container {
    padding-inline: 0;
  }

  /* Флекс-колонка, а не block: в макете порядок «текст → кнопка → мальчик»,
     а в разметке мальчик стоит перед кнопкой (там она лежит поверх вырезки).
     Переставляем через order, не трогая HTML. */
  .no-homework__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;        /* гасим резиновый cqw: на телефоне зазор фиксированный */
    min-height: 0;    /* высота колонки — по контенту, а не по cqw-минимуму */
    padding: 50px 20px 0;
    border-radius: 0;
    box-shadow: none;
  }

  .no-homework__text {
    order: 1;
    max-width: none;
    font-size: var(--fs-h4);  /* назад к ступенчатому кеглю (20 на телефоне) */
  }

  /* в макете 320×48: padding 14/30, радиус 10 (на телефоне у всех кнопок 10),
     стрелка 20×20 — плоские отступы здесь уже не нужны */
  .no-homework__btn {
    order: 2;
    display: flex;
    width: 100%;
    min-height: 0;
    margin-top: 30px;
    padding: 14px 30px;
    gap: 10px;
    font-size: var(--fs-btn);  /* назад к ступенчатому кеглю кнопки */
    border-radius: 10px;
  }

  /* Стрелка — назад к 20px: резиновое .no-homework__btn .btn__arrow (cqw)
     специфичнее правила .btn__arrow из layout.css и без сброса победило бы даже
     на телефоне, сжав стрелку до пары пикселей. */
  .no-homework__btn .btn__arrow {
    width: 20px;
    height: 20px;
  }

  /* Вырезка (мобильный кроп) — во всю ширину экрана, гасит боковые поля секции.
     position: relative (а не static) — иначе z-index не сработает и абсолютный
     вихрь ляжет поверх вырезки. */
  .no-homework__boy {
    order: 3;
    position: relative;
    inset: auto;
    display: block;
    width: calc(100% + 40px);
    margin: 30px -20px 0;
  }

  /* Вихрь 1:11867 — тот же слой в точке (−634, 175) при высоте карточки 567,
     т.е. его низ на 295.72 ниже низа карточки. Привязан к низу, а не к верху:
     так он не разъезжается с вырезкой, когда текст переливается на другое
     число строк. Проценты — от ширины карточки (360 в макете). */
  /* ⚠️ max-width: none обязателен — без него глобальное `img { max-width: 100% }`
     из base.css режет вихрь до ширины карточки (360 вместо 1224), и он целиком
     уезжает за левый край экрана вместе со своим left: −176cqw. */
  .no-homework__wave {
    left: -176.111cqw;
    top: auto;
    bottom: -82.144cqw;
    width: 340.094cqw;
    height: 191.033cqw;
    max-width: none;
  }
}