/* Словарь вечера. Макет: ag8FV (1440) и kJ5ai (390).

   Фон секции тёмный - fill #08050F у фрейма совпадает с токеном
   --bg-deep, поэтому в разметке класс .hw-sec--deep из prazdnik.css,
   а не свой цвет здесь.

   Надстрочник и заголовок взяты из общих .hw-kicker/.hw-h2 - их размеры
   на обоих брейкпоинтах совпадают с токенами один в один. Своё здесь -
   вертикальный ритм блока (gap 16/44/12/12/6 из данных макета),
   межстрочный интервал пояснения (1.8, а не общий 1.75) и его размер на
   телефоне (15px, а не общий --m-lead 16px), сетка карточек и разрядка
   надстрочника на телефоне (в макете 3px, а не общие 2,4px). */

.hw-vocab__wrap {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

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

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

.hw-vocab__lead {
  max-width: 760px;
  line-height: 31px;   /* 17 x 1.8 = 30.6, в макете строка 31 */
}

.hw-vocab__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hw-vocab__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--card);
  /* Обводка в дампе внутренняя (strokeAlignment: inner, strokeWidth 1) -
     обычный border добавил бы 2px к высоте и ширине карточки. */
  box-shadow: inset 0 0 0 1px var(--line-h);
  border-radius: 12px;
}

.hw-vocab__word {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  /* В дампе у этого текста межстрочный - "авто" (поля lineHeight нет),
     строка по конвенции проекта: Manrope x1.36 = 20 x 1.36 = 27.2,
     в макете строка 27. */
  line-height: 27px;
  letter-spacing: -0.4px;
  color: var(--accent-2);
}

.hw-vocab__ipa {
  font-family: var(--font-body);
  font-size: 13px;
  /* "Авто" в дампе, конвенция: Inter x1.21 = 13 x 1.21 = 15.73, строка 16. */
  line-height: 16px;
  color: var(--text-3);
}

.hw-vocab__note {
  font-family: var(--font-body);
  font-size: 14px;
  /* В дампе явный lineHeight 1.6: 14 x 1.6 = 22.4, строка 22 (Chrome
     не округляет единичный множитель, поэтому пишем целым px). */
  line-height: 22px;
  color: var(--text-2);
}

@media (max-width: 860px) {

  .hw-vocab__lead {
    max-width: none;
    font-size: 15px;
    line-height: 27px;   /* 15 x 1.8 = 27 точно */
  }

  .hw-vocab__grid { grid-template-columns: 1fr; }

  /* Телефонные размеры шрифта - из дампа kJ5ai. Высота строки - та же
     конвенция (Manrope x1.36, Inter x1.21), round(18 x 1.36 = 24.48) даёт
     24, но по высоте карточки в макете (113 = 40 паддинга + 12 зазоров +
     61 текста) нужна сумма 25+15+21 - тот же случай погрешности конвенции,
     что описан в form.css у .modal__phone: 25 и 24 - оба в пределах
     погрешности, берём 25, иначе высота карточки "не дотягивает" 1px. */
  .hw-vocab__word { font-size: 18px; line-height: 25px; letter-spacing: -0.3px; }
  .hw-vocab__ipa { font-size: 12px; line-height: 15px; }   /* 12 x 1.21 = 14.52 */
  .hw-vocab__note { font-size: 13px; line-height: 21px; }   /* дамп: lineHeight 1.6, 13 x 1.6 = 20.8 */
}