/* Блок "Все праздники": надстрочник, заголовок, сетка 2x2 карточек.
   Геометрия снята с мерки/хаб-десктоп.txt (ветка "frame #XPYDB") и
   хаб-мобильная.txt (#WlQ60), типографика - из хаб-тексты(-мобильная).txt,
   раздел "Все праздники". */

/* У этой секции свой вертикальный отступ - 100px, а не 116 из .hw-sec:
   973 (высота XPYDB) = 100 + 159 (заголовок) + 40 (зазор) + 574 (сетка) + 100.
   На телефоне отступ совпадает со значением по умолчанию .hw-sec (52px),
   но сбрасываем его явно: иначе десктопный override из этого файла
   перекрыл бы медиа-правило prazdnik.css, он подключается позже него. */
.pz-all {
  padding-block: 100px;
}

/* Надстрочник и заголовок секции - общий текст хаба, а не праздника:
   ни на одном предке нет data-holiday, поэтому токены --accent/--text/
   --muted из палитры праздника здесь не определены. Красим фирменными
   токенами бренда (--magenta/--ink/--muted из :root), а не токенами
   праздника и не хардкодом. */
.pz-all__kicker {
  color: var(--magenta-text);
}

.pz-all__h2 {
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 48px;
  line-height: 54px;   /* 48 x 1.12 = 53,76 -> 54, пен рисует строку целым */
  letter-spacing: -1.7px;
  color: var(--ink);
}

.pz-all__lead {
  margin-top: 14px;
  max-width: 820px;    /* лид уже всей сетки - ширина 820 видна в мерке XPYDB */
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 31px;   /* 17 x 1.8 = 30,6 -> 31 */
  color: var(--muted);
}

.pz-all__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;           /* зазор и по строкам, и по колонкам - 20px в мерке */
}

@media (max-width: 860px) {
  .pz-all {
    padding-block: 52px;   /* на телефоне отступ совпадает со значением
       .hw-sec по умолчанию - сбрасываем явно, иначе десктопный override
       выше перекрыл бы его: pz-all.css подключается после prazdnik.css */
  }
  .pz-all__h2 {
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.12 = 30,24 -> 30 */
    letter-spacing: -0.8px;
  }
  .pz-all__lead {
    font-size: 15px;
    line-height: 27px;   /* 15 x 1.8 = 27 */
  }
  .pz-all__grid {
    grid-template-columns: 1fr;   /* на телефоне карточки в столбик */
  }
}

/* ─── Карточка праздника ──────────────────────────────────────────
   Цвет только токенами праздника через data-holiday на самой карточке:
   фон, заголовок, описание и акцент у каждого праздника свои, а правило
   одно. Внутренние отступы (40/36px) и зазор между элементами (18px)
   совпадают на обеих раскладках - смерено по обоим дампам, поэтому для
   геометрии карточки медиа-запрос не нужен, меняется только типографика. */
.pz-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 36px;
  min-width: 0;   /* иначе ячейка сетки растёт по содержимому строки
     ссылка+адрес вместо того, чтобы дать ей вылезти в паддинг - см. комментарий
     у .pz-card__more */
  border-radius: var(--r-card-lg);   /* радиус в дампе не снять (там только
     прямоугольники габаритов) - карточка того же масштаба, что билет на
     странице праздника, взят его токен, а не число на глаз */
  background: var(--bg);
}

.pz-card__date {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 (метрика Inter) - в макете строка не нарисована */
  letter-spacing: 2px;
  color: var(--accent-text);
}

.pz-card__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  line-height: 39px;   /* 34 x 1.15 = 39,1 -> 39 */
  letter-spacing: -1.1px;
  color: var(--text);
}

.pz-card__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;   /* 15 x 1.75 = 26,25 -> 26 */
  color: var(--text-2);
}

.pz-card__line {
  height: 1px;
  background: var(--line-h);
}

.pz-card__more {
  display: flex;
  align-items: baseline;
  min-width: 0;   /* без этого flex растягивает карточку вместо того, чтобы
     дать строке вылезти в правый паддинг: по мерке у этой строки разная
     ширина на каждой карточке (289/287/290/268 на телефоне) - шире, чем
     остальные строки (278), и в карточку это вписано (36 + 289 = 325 < 350) */
  gap: 8px;   /* зазор ссылка - адрес: 8px и на десктопе, и на телефоне */
}

.pz-card__link {
  flex-shrink: 0;
  white-space: nowrap;   /* не переносить по словам при недостатке места */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 (метрика Inter) */
  color: var(--accent-text);
}

.pz-card__url {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 = 15,73 -> 16 */
  /* В дампе у Рождества и Валентина цвет адреса совпал с соседним
     тёмным/светлым праздником, а не со своим --text-3 (похоже на
     неточность исходника макета - различие на вид глазом не заметно,
     цвет тусклый и мелкий кегль). Токен берём системно по палитре своей
     карточки: другого подходящего токена под этот цвет нет, а хардкод
     запрещён границами задания. */
  color: var(--text-3);
}

@media (max-width: 860px) {
  .pz-card__date {
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 = 13,31 -> 13 */
  }
  .pz-card__name {
    font-size: 27px;
    line-height: 31px;   /* 27 x 1.15 = 31,05 -> 31 */
    letter-spacing: -0.8px;
  }
  .pz-card__text {
    font-size: 14px;
    line-height: 25px;   /* 14 x 1.75 = 24,5 -> 25 */
  }
  .pz-card__link {
    font-size: 14px;
    line-height: 17px;   /* 14 x 1.21 = 16,94 -> 17 */
  }
  .pz-card__url {
    font-size: 12px;
    line-height: 15px;   /* 12 x 1.21 = 14,52 -> 15 */
  }
}