/* Блок хаба праздников: pz-hero - первый экран (крошки, H1, лид, календарь
   года). Макет: секция #lNn48 (десктоп 1440) и #oSquK (телефон 390).
   Мерки - хаб-десктоп.txt ветка "frame #lNn48", хаб-мобильная.txt ветка
   "#oSquK"; типографика - раздел "Первый экран" в хаб-тексты(-мобильная).txt.

   На хабе нет data-holiday ни на теле, ни на секции (как и в pz-all/pz-how/
   pz-why) - заголовок, лид, дату и название плитки красим брендовыми
   токенами --ink/--muted/--paper, а не --text/--text-2/--bg: голидей-токены
   тут не заданы и дали бы пустое значение. Только полоса и метка
   "БЛИЖАЙШИЙ" берут цвет своего праздника через var(--accent) - он
   резолвится от data-holiday, который уже стоит на самой плитке
   (pz-cal-item.tpl). */

.pz-hero {
  /* мерки: 629 - (15 крошки + 34 гэп + 136 h1 + 22 гэп + 102 лид + 44 гэп
     + 116 календарь) = 160, отступ сверху и снизу поровну */
  padding-block: 80px;
  background: var(--paper);
}

@media (max-width: 860px) {
  /* мерки: 997 - (13+48+132+48+224+48+396) = 88, поровну */
  .pz-hero { padding-block: 44px; }
}


.pz-hero__h1 {
  margin: 34px 0 0;   /* гэп крошки -> h1: мерки 34 */
  /* Поле pz_h1 в базе - одна строка без <br>, контент не мой. В макете
     перенос жёстко после "которых" (ширина строки 1 в эталоне ~775px из
     1328) - без ограничения ширины браузер переносит иначе ("...по-" на
     первой строке). 900px уже между 775 (строка 1) и шириной строки 1+2
     слова, переносит в нужном месте на обоих брейкпоинтах. */
  max-width: 900px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 64px;
  line-height: 68px;   /* 64 x 1.06 = 67,84 -> 68, пен рисует строку целым */
  letter-spacing: -2.3px;
  color: var(--ink);
}

.pz-hero__lead {
  margin: 22px 0 0;   /* гэп h1 -> лид: мерки 22 */
  max-width: 820px;   /* мерки: ширина лида 820 из 1328 */
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 34px;   /* 19 x 1.8 = 34,2 -> 34 */
  color: var(--muted);
}

.pz-hero__cal {
  margin-top: 44px;   /* гэп лид -> календарь: мерки 44 */
  display: flex;
}

@media (max-width: 860px) {
  /* Гэп у всех трёх переходов один: мерки дают базовый шаг 22 плюс
     отдельный спейсер высотой 4 (22+4+22=48) - и перед h1, и перед лидом,
     и перед календарём. */
  .pz-hero__h1 {
    margin-top: 48px;
    /* Тот же перенос по словам, что и на десктопе (поле pz_h1 - одна
       строка без <br>): эталон рисует 4 строки ("Праздники, ради" /
       "которых" / "дети говорят по-" / "английски"), для этого нужна
       ширина меньше контейнера (350) - измерено по эталону, самая широкая
       строка ~248px. Перенос чисто по ширине не даёт тот же разбор, что
       в эталоне ("которых" отдельной строкой, хотя "которых дети" короче
       строки 1) - похоже на жёсткий перенос в самом поле, но в тексте его
       нет (проверено: на полной ширине браузер переносит иначе); оставляю
       близкий перенос по ширине, расхождение входит в допуск 1,6%. */
    max-width: 260px;
    font-size: 31px;
    line-height: 33px;   /* 31 x 1.08 = 33,48 -> 33 */
    letter-spacing: -1px;
  }
  .pz-hero__lead {
    margin-top: 48px;
    max-width: none;   /* мерки: лид на телефоне во всю ширину wrap (350) */
    font-size: 18px;    /* в макете 18, токен --m-lead (16) сюда не подходит */
    line-height: 32px;  /* 18 x 1.8 = 32,4 -> 32 */
  }
  .pz-hero__cal {
    margin-top: 48px;
    flex-direction: column;
    gap: 14px;   /* мерки: шаг между плитками 396 - (111+81+81+81) = 42, на 3 зазора = 14 */
  }
}

/* ─── Календарь года: четыре плитки ──────────────────────────────────
   Десктоп - ряд с разделителями 1px, у обычной плитки отступ 22px с двух
   сторон (331,25 - 2x22 = 287,25 = ширина полосы и названия в мерке).
   У ближайшей плитки (--next) отступа нет - полоса и текст во всю ширину,
   и добавлена метка. Внутри плитки шаг 10px между каждой парой соседей
   (полоса-дата-название-метка) - мерки совпали на этом шаге и для обычной,
   и для ближайшей плитки (4+10+6+10+26+10+20[+10+20] = 86 / 116). */
.pz-cal__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Фикс-ширина, а не flex:1 1 0: при разном padding-inline у соседей
     (0 у --next, 22 у остальных) grow:1/basis:0 распределяет ширину
     неравно (автоминимум флекс-айтема тянет за собой padding) - замерено
     живьём, плитки выходили 298/343 вместо равных 331,25. */
  flex: 0 0 331.25px;
  padding-inline: 22px;
  border-left: 1px solid var(--line);
}

.pz-cal__item:first-child {
  border-left: none;
}

.pz-cal__item--next {
  padding-inline: 0;
}

.pz-cal__bar {
  display: block;
  height: 4px;
  background: var(--accent);
}

.pz-cal__date {
  margin: 0;
  margin-top: 16px;   /* доп. 6px (мерки) поверх базового шага 10 = 26 между полосой и датой */
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 26px;   /* метрика Manrope x1.36 = 25,84 -> 26, строка в макете не задана */
  letter-spacing: -0.4px;
  color: var(--ink);
}

.pz-cal__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;   /* 14 x 1.4 = 19,6 -> 20 */
  color: var(--muted);
}

.pz-cal__label {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  /* Надпись на оранжевой таблетке - чернилами, а не белым. Белый на
     фирменном оранжевом (#FF7A18) даёт 2,6 при норме 4,5 из
     docs/tech-spec.md (раздел 9), а чернила на том же оранжевом - 6,0.
     Красить саму таблетку темнее пришлось бы на треть, и оранжевый
     перестал бы быть оранжевым; надпись на 10 пикселях - меньшая потеря,
     чем фирменный цвет. Тот же приём уже стоит у номеров комнат на
     Хэллоуине (hw-map.css): тёмная цифра на оранжевом кружке. */
  color: var(--ink);
}

@media (max-width: 860px) {
  /* Телефон: плитки в столбик, без вертикальных разделителей. Отступ
     22px у обычной плитки и 0 у ближайшей - те же значения, что и на
     десктопе (мерки совпали на обеих раскладках). */
  .pz-cal__item {
    /* На десктопе flex: 0 0 331.25px - это ширина (строка). На телефоне
       .pz-hero__cal становится столбцом (flex-direction: column), и то
       же свойство превращается в ВЫСОТУ плитки - без сброса все плитки
       растягивались на 331px вместо своей, найдено по живому снимку. */
    flex: 0 0 auto;
    border-left: none;
  }
  .pz-cal__date {
    margin-top: 14px;   /* доп. 4px (мерки) поверх базового шага 10 = 14 */
    font-size: 18px;
    line-height: 25px;   /* в мерке 25 (формула 18 x 1.36 даёт 24,48 -> 24, берём число из мерки) */
    letter-spacing: -0.3px;
  }
  .pz-cal__name {
    font-size: 13px;
    line-height: 18px;   /* 13 x 1.4 = 18,2 -> 18 */
  }
}