/* ============================================================
   07a — Empathy manifesto
   Figma: «Empathy Text Block», брейкпоинты 1600/1200/1024/768/430/375/320.
   Базовые стили = фрейм 1600 (1600×1008), дальше переопределения вниз.
   Фиолетовое свечение — экспорт из Figma (размытый круг #8421B2):
   emp-glow.svg (компонент R, все брейкпоинты кроме 375/320)
   и emp-glow-375.svg (отдельный узел «r» на 375/320).
   ============================================================ */

.emp {
  position: relative;
  overflow: hidden;
  background: transparent;   /* фон общий, своей подложки нет */
  color: #eaeaea;
}

.emp-inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  height: 1008px;
}

/* Свечение: бокс по координатам фрейма, картинка расползается за его
   пределы ровно как в макете (inset слоя картинки внутри компонента) */
.emp-glow {
  position: absolute;
  left: 82px;
  top: 468px;
  width: 557px;
  height: 578px;
  pointer-events: none;
}

.emp-glow-img {
  position: absolute;
  display: block;
}

.emp-glow-img--base {
  inset: -136.99%;
}

.emp-glow-img--sm {
  display: none;
  inset: -107.14% -111.52%;
}

.emp-h2 {
  position: absolute;
  left: 346px;
  top: 278px;
  width: 1110px;
  /* страховка на промежуточных вьюпортах: на самих брейкпоинтах не влияет */
  max-width: calc(100% - 346px - 20px);
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 69px;
  letter-spacing: -0.64px;
  color: #eaeaea;
  word-break: break-word;
}

.emp-h2-dim {
  color: rgba(234, 234, 234, 0.48);
}

/* Явный перенос строки появляется в макете начиная с 768 */
.emp-br {
  display: none;
}

.emp-sub {
  position: absolute;
  left: 737px;
  top: 634px;
  width: 562px;
  max-width: calc(100% - 737px - 20px);
  box-sizing: border-box;
  padding-right: 15px;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.168px;
  color: #eaeaea;
  /* Между кадрами макетные переносы уже сняты, а свои строки браузер иначе
     оставляет огрызком. Там, где переносы стоят, балансировать нечего:
     каждый отрезок между ними и так одна строка. */
  text-wrap: balance;
}

/* Переносы взяты из кадра 1600: там текст разбит на строки вручную, и это
   разбиение — часть макета, а не следствие ширины. Работают они только пока
   коробка держит свои макетные 562: ниже она ужимается вычетом left, строки
   перестают влезать, и жёсткий перенос порвал бы их не на месте. */
.emp-sub-br { display: none; }

@media (min-width: 1320px) {
  .emp-sub-br { display: inline; }
}

/* ---------- 1200 (фрейм 1200×880) ---------- */
@media (max-width: 1200px) {
  .emp-inner { height: 880px; }

  .emp-glow {
    left: -15px;
    top: 403px;
    width: 460px;
    height: 477px;
  }

  .emp-h2 {
    left: 310px;
    top: 286px;
    width: 740px;
    max-width: calc(100% - 310px - 20px);
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -0.44px;
  }

  .emp-sub {
    left: 570px;
    top: 530px;
    width: 336px;
    max-width: calc(100% - 570px - 20px);
    padding-right: 0;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.1176px;
  }
}

/* ---------- 1024 (фрейм 1024×548) ---------- */
@media (max-width: 1024px) {
  .emp-inner { height: 548px; }

  .emp-glow {
    left: -15px;
    top: 235px;
    width: 460px;
    height: 477px;
  }

  .emp-h2 {
    left: 205px;
    top: 144px;
    width: 628px;
    max-width: calc(100% - 205px - 20px);
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -0.36px;
  }

  .emp-sub {
    left: 429px;
    top: 340px;
    width: 336px;
    max-width: calc(100% - 429px - 20px);
    padding-right: 15px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.1008px;
  }
}

/* ---------- 768 (фрейм 768×694) ---------- */
@media (max-width: 1023px) {
  .emp-inner { height: 694px; }

  .emp-glow {
    left: -129px;
    top: 153px;
    width: 488px;
    height: 506px;
  }

  .emp-h2 {
    left: 127px;
    top: 186px;
    width: 515px;
    max-width: calc(100% - 127px - 20px);
    font-size: 39px;
    line-height: 42px;
    letter-spacing: -0.39px;
  }

  .emp-br { display: inline; }

  /* Ширина колонки текста здесь макетная: 378 минус правый отступ 88 = 290.
     Отступ свёрнут в саму ширину, иначе он вычитается из уже ужатой коробки.
     Левый край держится на 312 из макета, пока это оставляет колонке её 290;
     ниже он отходит влево вместо того, чтобы душить строки. */
  .emp-sub {
    left: min(312px, calc(100% - 290px - 16px));
    top: 444px;
    width: 290px;
    max-width: calc(100% - 32px);
    padding-right: 0;
  }
}

/* ---------- 430 (фрейм 430×560) ---------- */
@media (max-width: 719px) {
  /* Узкие кадры собираются потоком, а не абсолютными top. В макете заголовок
     стоит на 113, подтекст на 383 — но 383 это не самостоятельное число:
     между ними ровно 36 при шестистрочном заголовке. Пока top был жёстким,
     сужение колонки уводило заголовок на седьмую и девятую строку, и он
     садился на подтекст: на 430 перекрытие 3 px, на 376 — восемьдесят один.
     В потоке зазор держится сам, сколько бы строк ни было.
     Правое поле 9 — из макета 430: 28 + 393 + 9 = 430. */
  .emp-inner {
    height: auto;
    min-height: 560px;
    box-sizing: border-box;
    padding: 113px 9px 0 28px;
  }

  .emp-glow {
    left: -211px;
    top: 151px;
    width: 518px;
    height: 539px;
  }

  .emp-h2 {
    position: static;
    left: auto;
    top: auto;
    width: 393px;
    max-width: 100%;
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -0.36px;
  }

  .emp-sub {
    position: static;
    left: auto;
    top: auto;
    width: 305px;
    max-width: 100%;
    margin-top: 36px;
    padding-right: 0;
  }
}

/* ---------- 375 (фрейм 375×446) ---------- */
@media (max-width: 375px) {
  .emp-inner { min-height: 446px; padding: 72px 20px 0 42px; }

  .emp-glow {
    left: -178px;
    top: 174px;
    width: 538px;
    height: 560px;
  }

  .emp-glow-img--base { display: none; }
  .emp-glow-img--sm { display: block; }

  .emp-h2 {
    width: 292px;
    font-size: 26px;
    line-height: 29px;
    letter-spacing: -0.26px;
  }

  .emp-sub {
    width: 310px;
    margin-top: 32px;    /* зазор кадра 375: 278 − (72 + 174) */
    padding-right: 20px;
  }
}

/* ---------- 320 (фрейм 320×446) ---------- */
@media (max-width: 320px) {
  .emp-inner { padding-left: 22px; }

  .emp-glow {
    left: -131px;
    top: 192px;
    width: 470px;
    height: 532px;
  }

  .emp-h2 { width: auto; }
  .emp-sub { width: 282px; }
}

/* ============================================================
   Одна колонка: секция по контенту, а не по фиксированной высоте.
   Было: `.emp-inner { height: 1008px }` плюс заголовок и абзац на
   абсолютных координатах — от этого под текстом оставалась пустота
   на несколько сотен пикселей, и абзац визуально отрывался от
   следующей секции. Здесь обычный поток с явными интервалами.
   ============================================================ */
@media (max-width: 1023.98px) {
  .emp-inner {
    height: auto;
    min-height: 0;        /* прежний min-height добавлял до 153px пустоты */
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4.5vw, 40px);
    padding: clamp(56px, 11vw, 112px) clamp(16px, 4vw, 40px);
  }

  .emp-h2,
  .emp-sub {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
  }

  /* свечение — фоновый слой, не участвует в потоке */
  .emp-glow { z-index: 0; }

  /* обычный абзац течёт сам, ручных переносов в нём нет */
  .emp-br,
  .emp-sub-br { display: none; }
}