/* Пасха: "Правила охоты". Макет: GJwmf (1440) и c7cIA (390).

   Секция на контрастном белом (--card), а не на фоне страницы (--bg) -
   так нарисовано в макете. Шапка - кикер+h2 слева, абзац справа, прижатый
   к правому краю ряда (space-between, как в hw-noms.css: "gap=40" в
   данных макета - это минимальный зазор Figma-автолейаута, а не
   фактический отступ). Число карточек правил задаёт заказчица, поэтому
   на десктопе они делят ширину ряда поровну через flex:1 1 0, без
   привязки к количеству. */

/* Вертикальный отступ секции в макете - 110px на десктопе и 56px на
   телефоне, а не общие 116/52 из prazdnik.css (данные GJwmf/c7cIA). */
.ea-rules { background: var(--card); padding-block: 110px; }

@media (max-width: 860px) {
  .ea-rules { padding-block: 56px; }
}

.ea-rules__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 46px;
}

.ea-rules__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Без flex-grow колонка сжимается до ширины текста (max-content) и
     заголовок переносится в три строки вместо двух из макета (848px
     в данных - H79vu). Лишняя строка поднимала секцию на 57px. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Кикер этого блока - фирменный маджента, а не акцент праздника (в
   макете так же, как у кнопок): цвет глобальный, не из палитры Пасхи. */
.ea-rules__kicker { color: var(--magenta-text); }

.ea-rules__title { white-space: pre-line; }

.ea-rules__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) {
  .ea-rules__head {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    /* На телефоне в макете заголовок и карточки идут впритык, без
       зазора (cg2gO 205 + TkyVS 1089 = c7cIA 1406 без остатка). */
    margin-bottom: 0;
  }

  /* Заголовок этого блока на телефоне нарисован 27px, а не общие 28
     (--m-h2): токен снят с хэллоуинских дампов, в пасхальном - своё
     значение, проверено по дампу c7cIA. */
  .ea-rules__title {
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.1 = 29,7 */
    letter-spacing: -.8px;
  }

  .ea-rules__lead {
    width: 100%;
    font-size: 14px;
    line-height: 25px;   /* 14 x 1.8 = 25,2, в макете строка целая - 25 */
  }
}

.ea-rules__grid {
  display: flex;
  gap: 16px;
}

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

.ea-rules__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  background: var(--bg);
  border-radius: 16px;
  /* Обводка в макете внутренняя (strokeAlignment: inner) - обычный
     border добавил бы 2px к размеру карточки. */
  box-shadow: inset 0 0 0 1px var(--line-h);
}

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

.ea-rules__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg-soft);
}

.ea-rules__icon img {
  max-width: 20px;
  max-height: 20px;
}

.ea-rules__card-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 23px;   /* 18 x 1.3 = 23,4 */
  color: var(--text);
}

.ea-rules__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 22px;   /* 13 x 1.7 = 22,1 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .ea-rules__card-title { font-size: 16px; line-height: 21px; }   /* 16 x 1.3 = 20,8 */
  .ea-rules__card-text { font-size: 12px; line-height: 20px; }    /* 12 x 1.7 = 20,4 */
}