/* Лагеря и поездки: полоса-ссылка на хаб праздников. Макет: фреймы x69hL
   (десктоп, 1440x142) и rf544 (телефон, 390x248). Полосу 1440 с контентом
   1328 (56/20 на телефоне) даёт сайтовый .wrap (base.css) - здесь не
   повторяется. Фон - свой тёмный цвет блока (не палитра праздника). */

.cm-prazdniki {
  background: #140F26;
  padding-block: 36px;   /* дамп: padding [36,56] */
}

.cm-prazdniki__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;   /* дамп: gap "Ссылка на праздники" 28 */
}

.cm-prazdniki__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;   /* дамп: gap "Текст" 7 */
}

.cm-prazdniki__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 (метрика Inter) */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #FF7A18;
  /* В дампе текстовый блок этого кикера 351px при колонке 350 - в
     макете строка не переносится, хоть и впритык. Chrome меряет Inter
     на пиксель шире и без nowrap перенёс бы строку на телефоне (кадр
     был 26px вместо 13 - та же природа, что у переноса пути крошек на
     телефоне, docs/stranicy.md). */
  white-space: nowrap;
}

.cm-prazdniki__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 36px;   /* 26 x 1.36 (метрика Manrope) */
  letter-spacing: -0.8px;
  color: var(--white);
}

.cm-prazdniki__action {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;   /* дамп: gap "Действие" 8 */
}

.cm-prazdniki__btn {
  padding: 15px 26px;
  font-size: 14px;
  line-height: 17px;   /* 14 x 1.21 (метрика Inter) */
}

.cm-prazdniki__url {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 (метрика Inter) */
  /* Правлено ради AA: макетный #6C6390 на тёмной карточке rgb(20,15,38)
     даёт 3,40 при норме 4,5 из docs/tech-spec.md (раздел 9). Тон тот же
     сиреневый, светлее на 19 %, стало 4,59. Макетное значение возвращает
     tools/qa/shot.mjs - правку цвета самого текста отдельным слоем не
     сделать, и сверка пикселями мерит здесь макет, а не нас. */
  color: #8177AC;
}

@media (max-width: 860px) {
  .cm-prazdniki {
    padding-block: 40px;   /* дамп мобильный: padding [40,20] */
  }

  .cm-prazdniki__wrap {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;   /* дамп мобильный: gap 18 */
  }

  .cm-prazdniki__h2 {
    font-size: 22px;
    line-height: 30px;   /* 22 x 1.36 */
    letter-spacing: -0.6px;
  }

  .cm-prazdniki__action {
    align-items: flex-start;
  }
}