/* Правило вечера. Макет: JJ01w (1440) и Sfba1 (390).

   Надстрочник и крупная фраза взяты из общих .hw-kicker/.hw-h2, пояснение -
   из .hw-lead: здесь только то, что в макете отличается от общего ритма -
   размер и межстрочный интервал фразы и пояснения, разрядка надстрочника
   на телефоне (в макете 3px, а не общие 2,4px) и вертикальный отступ
   секции на телефоне (в макете 64px, а не общие 52 из prazdnik.css).
   Отступы между строками - из вставных "Отступ"-рамок макета: 26/24/52 на
   десктопе, 4/4/4 на телефоне. */

@media (max-width: 860px) {
  .hw-rule { padding-block: 64px; }
}

.hw-rule__wrap { text-align: center; }

.hw-rule__phrase {
  max-width: 900px;
  margin: 26px auto 0;
  text-align: center;
  /* Перевод строки в поле "Крупная фраза" - перевод строки на странице. */
  white-space: pre-line;
}

.hw-rule__lead {
  max-width: 740px;
  margin: 24px auto 0;
}

/* Размер и межстрочный у фразы и пояснения - на десктопе свои, не общие
   .hw-h2/.hw-lead (58/1.12/-2 и 18/1.85 против общих 52/1.10/-1.8 и
   17/1.75). На телефоне фраза совпадает с общим .hw-h2 (28/1.12/-0.9) -
   трогать незачем, но держим правило только для min-width, иначе оно
   перебивает общий мобильный размер по порядку подключения файлов. */
@media (min-width: 861px) {
  .hw-rule__phrase {
    font-size: 58px;
    line-height: 1.12;
    letter-spacing: -2px;
  }

  .hw-rule__lead {
    font-size: 18px;
    line-height: 1.85;
  }
}

/* У пояснения межстрочный 1.85 отличается от общего .hw-lead (1.75) и на
   телефоне тоже - это единственное, что там нужно переопределить.
   Пишем целым px, а не коэффициентом: при мобильном размере 16px
   (16 x 1.85 = 29.6, в макете (Sfba1/U3YiQ) 6 строк высотой 180px,
   то есть 30px на строку) дробный line-height даёт 6 x 29.6 = 177.6 -
   блок короче эталона на 2.4px. */
@media (max-width: 860px) {
  .hw-rule__lead { line-height: 30px; }
}

.hw-rule__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  margin-top: 52px;
  text-align: left;
}

.hw-rule__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
}

.hw-rule__bar {
  width: 34px;
  height: 3px;
  background: var(--accent);
}

.hw-rule__card-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  /* В макете у заголовка довода нет своего lineHeight - значит использован
     натуральный интервал шрифта. У своего файла шрифта Manrope он не 1.75
     (то, что Chrome считает для line-height: normal), а 1.36 - та же
     метрика, что уже задокументирована в base.css для Manrope. Без явного
     значения каждая карточка была на ~7px выше, чем в эталоне. */
  line-height: 1.36;
  color: var(--text);
}

.hw-rule__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-3);
}

@media (max-width: 860px) {
  /* В макете на телефоне у секции нет alignItems: center и у текста нет
     textAlign: center (в отличие от десктопа) - всё прижато влево. */
  .hw-rule__wrap { text-align: left; }
  .hw-rule__phrase { margin-top: 4px; text-align: left; }
  .hw-rule__lead { margin-top: 4px; }

  /* Общий .hw-h2 даёт на телефоне line-height: 1.1 без округления
     (prazdnik.css, не наш файл, трогать нельзя). При 28px шрифта это
     28 x 1.1 = 30.8px на строку; в макете (Sfba1/pAPGF, 2 строки, 62px)
     строка 31px. Дробный интервал даёт 2 x 30.8 = 61.6 - короче эталона
     на 0.4px на каждую карточку фразы. Переопределяем точечно. */
  .hw-rule__phrase { line-height: 31px; }

  .hw-rule__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
    margin-top: 4px;
  }

  /* Карточка на телефоне тоже 300px, не на всю ширину колонки (350px):
     обход макета с реальной геометрией (tools/pen/bounds.sh Sfba1)
     показывает, что у ряда "Три довода" ширина 350 (fill_container), а у
     каждой карточки внутри - честные 300, прижатые влево. Ширина 300 в
     дампе узла - не дизайнерская опечатка, а правда про рендер; свойство
     width тут ни при чём, bounds.sh - источник истины. */

  /* Те же метрики Manrope x1.36 и Inter x1.7, что и на десктопе, но на
     мобильных размерах шрифта (16 и 13px) дают дробь: 16 x 1.36 = 21.76
     (в макете строка 22, дамп Sfba1/bRdyP) и 13 x 1.7 = 22.1 x 2 строки
     = 44.2 (в макете 44, дамп Sfba1/M4IED4). Пишем округлённым px. */
  .hw-rule__card-title { font-size: 16px; line-height: 22px; }
  .hw-rule__card-text { font-size: 13px; line-height: 22px; }
}