/* Номинации конкурса костюмов. Макет: wT7Cv (1440) и RJYso (390).

   Надстрочник и крупный заголовок - из общих .hw-kicker/.hw-h2 (токены
   совпадают точно на обоих брейкпоинтах, кроме разрядки кикера на
   телефоне - см. переопределение ниже, конвенция как в hw-rule.css).
   Абзац справа от заголовка - свой класс: у него 15/14px и line-height
   1.8, а не 17/19px общего .hw-lead.

   Число карточек в сетке задаёт заказчица (4, 5, 6 - любое), поэтому
   карточки на десктопе - flex: 1 1 0 в общем ряду: делят ширину поровну
   без привязки к количеству, без nth-child и без отдельных классов.

   Шапка на десктопе: "gap=40" в данных макета - это минимальный зазор
   Figma-автолейаута с распределением "space between", а не фактический
   отступ - реально абзац справа прижат к правому краю ряда (проверено
   по пикселям эталона: текст начинается на x≈944, а не 676, как даёт
   gap:40 без space-between). Эталонный скриншот - источник истины для
   разметки, так же как в hw-rule.css. */

.hw-noms__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}

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

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

.hw-noms__lead {
  flex: none;
  width: 440px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 27px;   /* 15 x 1.8 = 27 */
  color: var(--text-2);
}

@media (max-width: 860px) {

  .hw-noms__head {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
  }

  .hw-noms__lead {
    width: 100%;
    font-size: 14px;
    line-height: 25px;   /* 14 x 1.8 = 25.2, в макете строка 25 */
  }
}

.hw-noms__grid {
  display: flex;
  gap: 16px;
}

@media (max-width: 860px) {
  .hw-noms__grid { flex-direction: column; }
}

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

@media (min-width: 861px) {
  .hw-noms__card {
    /* Делит ширину ряда поровну при любом числе карточек. */
    flex: 1 1 0;
    min-width: 0;
  }
}

.hw-noms__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  /* #2A2050 - фон значка из макета, токена палитры праздника под него
     нет (не путать с --card #1C1436), значение явное. */
  background: #2A2050;
  color: var(--accent-text);
}

.hw-noms__icon .ico {
  width: 20px;
  height: 20px;
}

.hw-noms__card-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 22px;   /* 17 x 1.3 = 22.1 */
  color: var(--text);
}

.hw-noms__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 21px;   /* 13 x 1.65 = 21.45 */
  color: var(--text-3);
}

@media (max-width: 860px) {
  .hw-noms__card-title { font-size: 15px; line-height: 20px; }   /* 15 x 1.3 = 19.5 */
  .hw-noms__card-text { font-size: 12px; line-height: 20px; }    /* 12 x 1.65 = 19.8 */
}