/* hw-fears - "Страхи родителей". Фреймы макета: JWZZ2 (1440) и Su4Kc (390).

   Пары - список kList по полю hw_fears_items, карточка - hw-fears-item.tpl.
   Линия между парами - border-top у всех пар кроме первой: в макете линий
   на одну меньше, чем пар, и после последней пары линии нет. Так число
   строк не привязано к вёрстке ни в css, ни в разметке.

   Внутри пары "страх | ответ" на десктопе - строка (страх фиксированной
   ширины 400px слева, ответ занимает остаток), на телефоне - столбец
   (страх на всю ширину, ответ под ним). В макете у пары на телефоне
   меняются направление, ширина страха и промежуток (48 -> 16) - поэтому
   выравнивание пары на мобильном брейкпоинте stretch, а не flex-start:
   без этого страх и ответ не растягивались бы на всю ширину колонки.

   Оранжевая черта перед ответом (28x2) - декоративная, без текста и без
   поля, поэтому ::before у .hw-fears__a, а не отдельный элемент в карточке.
   По факту совпадает с замером макета: черта и текст ответа начинаются
   на одной высоте (оба y=0 внутри блока "Ответ"), поэтому выравнивание
   flex-start без компенсирующих отступов.

   Разрядка надстрочника на телефоне (3px, как на десктопе) - значение из
   макета, не совпадает с общим --m-kicker-ls (2.4px) из tokens.css.

   Межстрочный ответа и заголовка - целым px, а не дробным множителем.
   У pen высота строки в дампе всегда целая, у Chrome множитель даёт
   дробный пиксель и накопленную нехватку высоты на несколько строк:
     - .hw-fears__a-text: дамп даёт 29px на строку (87 = 3 x 29 у первой
       пары, 58 = 2 x 29 у остальных). Было line-height: 1.8, то есть
       16 x 1.8 = 28.8px - по 0.2px на строку, на трёх строках первой
       пары это 0.6px недостачи.
     - .hw-fears__q: дамп даёт 28px на десктопе (28 и 56 = 2 x 28) и 26px
       на телефоне (26 и 52 = 2 x 26). Было 1.35 (21 x 1.35 = 28.35) и на
       телефоне тот же множитель от font-size 19px (19 x 1.35 = 25.65) -
       оба мимо целого значения из дампа.
     - высота строки заголовка (57px на десктопе, 31px на телефоне)
       теперь приходит из общего .hw-h2 - её там починили целыми
       пикселями после того, как ту же причину нашли пять блоков сразу.

   Надстрочник и заголовок секции берутся из общих .hw-kicker и .hw-h2
   в prazdnik.css - высоты строк там уже целыми пикселями. */

.hw-fears__in {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hw-fears__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hw-fears__title {
  /* Перевод строки в поле "Заголовок" - перевод строки на странице. */
  white-space: pre-line;
}

.hw-fears__list {
  display: flex;
  flex-direction: column;
}

.hw-fears__item {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-block: 30px;
}

.hw-fears__item:not(:first-child) {
  border-top: 1px solid var(--line-h);
}

.hw-fears__q {
  flex: 0 0 400px;
  width: 400px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  line-height: 28px; /* из дампа: 28 и 56 = 2 x 28 */
  color: var(--text);
}

.hw-fears__a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hw-fears__a::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 2px;
  background: var(--accent);
}

.hw-fears__a-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 29px; /* из дампа: 87 = 3 x 29, 58 = 2 x 29 */
  color: var(--text-2);
}

@media (max-width: 860px) {

  .hw-fears__item {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hw-fears__q {
    flex: 1 1 auto;
    width: auto;
    font-size: 19px;
    line-height: 26px; /* из дампа: 26 и 52 = 2 x 26 */
  }

  .hw-fears__a-text {
    font-size: var(--m-body);
    line-height: 27px; /* из дампа: 15 x 1.8 = 27 целым - совпадает уже */
  }
}