/*
  Панель «Описание модели» (444:3891), разметка — partials/model-description.njk.

  Вертикаль фрейма: панель 576 → заголовок 618 → низ панели 844.
  Текст внутри панели: 612…808 (196 высотой), красная черта 616…807.
  Горизонталь: панель 30…1410 (1380 = --wide-content-width), заголовок с
  75, текст 603…1365 (762 шириной) — то есть по 45 от краёв панели с обеих
  сторон.
*/

/*
  Стык с первым экраном. В макете панель начинается на 576, а фото первого
  экрана кончается на 649 — то есть панель лежит ПОВЕРХ нижних 73px фото
  (там снимок уже сведён в фон собственным градиентом, и белая плашка
  накрывает ровно эту растворённую зону). Отсюда отрицательный отступ.

  position:relative обязателен: .model-hero — позиционированная секция, и
  статичный сосед после неё рисовался бы ПОД ней, а не поверх, какой бы
  ни был порядок в разметке.

  Наезд съедает нижний внутренний отступ первого экрана (80px), а не его
  текст: даже если текст модели длиннее макетного, панель упрётся в конец
  этого отступа, а не в строки. Фиксированных высот для этого не нужно.
*/
.model-description {
  position: relative;
  margin-top: -73px;
  /* 1440 - 1380 = 60, по 30 с каждой стороны — та же полка, что у
     карточки CTA-блока. */
  padding: 0 30px;
}

.model-description__panel {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--wide-content-width);
  margin-inline: auto;
  /* 612 - 576 сверху и 844 - 808 снизу — оба 36; 75 - 30 по бокам. */
  padding: 36px 45px;
  border-radius: var(--radius-wide-panel);
  background: var(--color-surface);
}

/* Заголовок стоит на 6px ниже верха текстовой колонки (618 против 612). */
.model-description__heading {
  margin: 6px 0 0;
  font-size: var(--fs-model-heading);
  line-height: var(--lh-model-heading);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/*
  Текстовая колонка: 762 = 2 черты + 20 просвета + 740 текста. basis, а не
  фиксированная ширина, — ниже макетной ширины колонка обязана сжиматься
  вместе с панелью.

  pre-line: переносы строк, которые поставит редактор, остаются как
  абзацы, лишние пробелы схлопываются. Поле у описания одно и структуры не
  имеет — размечать абзацы нечем, и придумывать им свой отступ (которого
  нет в макете) незачем: пустая строка даёт ровно интерлиньяж.
*/
.model-description__text {
  position: relative;
  flex: 0 1 762px;
  min-width: 0;
  margin: 0;
  padding-left: 22px;
  white-space: pre-line;
  font-size: var(--fs-model-description);
  line-height: var(--lh-model-description);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/*
  Красная черта. Высота в макете 191 при тексте в 196 — черта выровнена по
  глазу строк, а не по строчным боксам: сверху срезан полуинтерлиньяж
  первой строки, снизу — последней. Считается от самого текста, поэтому
  растёт вместе с ним.
*/
.model-description__text::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 1px;
  left: 0;
  width: 2px;
  background: var(--color-accent);
}

/*
  Мобильного макета у страницы модели нет — задача только в том, чтобы
  ничего не разваливалось и не уезжало за край. Фото первого экрана на
  этой ширине становится обычным блоком в потоке, поэтому наезд на него
  снимается, а панель встаёт под фото с обычным отступом. Полка и
  скругление — те же числа, что у карточек CTA-блока на этой ширине
  (10 и 40), второго набора не заводим. Кегли остаются макетными: своей
  мобильной типографики у страницы нет.
*/
@media (max-width: 599.98px) {
  /*
    Кегли переопределяются ТОКЕНАМИ на самой секции, а не по месту: число
    остаётся объявленным один раз, а .model-description__heading/__text
    продолжают читать var() из базовых правил. Значения — макетные
    (30/41 заголовок, 14/28 текст), добавлена только вторая ветка формулы:
    на 390px кегль тот же, что был, ниже 390px он сжимается вместе с
    панелью, а не остаётся ПК-шным на сузившейся колонке.
  */
  .model-description {
    margin-top: 0;
    padding: min(30px, calc(30 / 390 * 100vw)) min(10px, calc(10 / 390 * 100vw)) 0;
    --fs-model-heading: min(30px, calc(30 / 390 * 100vw));
    --lh-model-heading: min(41px, calc(41 / 390 * 100vw));
    --fs-model-description: min(14px, calc(14 / 390 * 100vw));
    --lh-model-description: min(28px, calc(28 / 390 * 100vw));
  }

  .model-description__panel {
    flex-direction: column;
    gap: min(20px, calc(20 / 390 * 100vw));
    padding: min(25px, calc(25 / 390 * 100vw));
    border-radius: min(40px, calc(40 / 390 * 100vw));
  }

  .model-description__heading {
    margin-top: 0;
  }

  /* Колонка обязана тянуться по ширине панели, а не по своей макетной.
     Отбивка от красной черты — макетные 22px с деградацией ниже 390px
     (сама черта в 2px не сжимается: на такой толщине это дало бы
     полупиксельную линию вместо ровной). */
  .model-description__text {
    flex: 0 1 auto;
    padding-left: min(22px, calc(22 / 390 * 100vw));
  }
}