/* Блок хаба праздников: "Ближайший праздник" (фрейм макета pTeEY, мобильная
   раскладка - Qg010). Единственный тёмный блок на светлом хабе: палитра
   приходит через data-holiday на самой секции, здесь только var(--bg),
   var(--accent), var(--text-*) - своих цветов нет.

   Высота секции в макете фиксированная (478 / 799) и не совпадает с общим
   ритмом .hw-sec (padding-block 116/52 - это ритм лендинга праздника, не
   хаба), поэтому паддинг секции здесь обнулён, а высота и центрирование
   колонок заданы явно flex-ом: так высота гарантированно совпадает с
   эталоном независимо от того, насколько точно совпадёт высота контента.

   Обе колонки (текст слева, карточка отсчёта справа) в дампе встроены как
   инстансы компонентов - их АБСОЛЮТНЫЕ x/y в дампе сломаны (объект
   отсчитывается от места мастер-компонента на холсте, а не от секции),
   но РАЗНИЦЫ между соседними полями внутри одного инстанса целые и
   совпадают с суммой до объявленной высоты контейнера - по ним и собрана
   вертикальная раскладка обеих колонок. Проверено: сумма зазоров и высот
   строк совпадает с высotой родителя из дампа день-в-день на обеих
   раскладках. */

.pz-next.hw-sec {
  position: relative;
  overflow: hidden;   /* здесь же обрезается свет справа (и сверху) */
  background: var(--bg);
  padding-block: 0;
  height: 478px;
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  .pz-next.hw-sec { height: 799px; }
}

/* ─── Свет за блоком ──────────────────────────────────────────────
   Эллипс 900x900 (520x520 на телефоне) - тот же приём, что и свет первого
   экрана (.hw-hero__glow в hw-hero.css): closest-side обязателен, иначе
   радиальный градиент растягивается до дальнего угла квадрата и стопы
   уезжают дальше, чем нарисовано. Левый край в дампе цел (x эллипса
   считается от секции верно), а верх - нет (тот же сломанный инстанс), он
   подобран по видимому теплому ореолу на эталоне и обрезается секцией. */
.pz-next__glow {
  position: absolute;
  left: 760px;
  top: -300px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--accent) 35%, transparent) 0%,
    color-mix(in srgb, var(--accent) 8%, transparent) 45%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%
  );
}

@media (max-width: 860px) {
  .pz-next__glow {
    left: -140px;
    top: -170px;
    width: 520px;
    height: 520px;
  }
}

.pz-next__wrap {
  position: relative;
  z-index: 1;   /* иначе контент красится раньше позиционированного света
     и свет перекрывает текст и карточку - тот же приём, что в hw-hero.css */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 860px) {
  .pz-next__wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;   /* зазор между колонкой и карточкой на телефоне, посчитан
       из высоты "Ряд" дампа: 687 - 315 - 356 = 16 */
  }
}

/* ─── Левая колонка: кикер, заголовок, лид, кнопка ───────────────── */

.pz-next__left {
  display: flex;
  flex-direction: column;
  gap: 18px;   /* один зазор на все четыре элемента - в дампе CDnnJ он
     целых четыре раза подряд: 318 = 15+18+102+18+93+18+54 */
  max-width: 932px;
}

@media (max-width: 860px) {
  .pz-next__left { max-width: none; }
}

.pz-next__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 46px;
  line-height: 51px;   /* 46 x 1.1 = 50,6 (строка не нарисована, метрика Manrope) */
  letter-spacing: -1.6px;
  color: var(--text);
}

@media (max-width: 860px) {
  .pz-next__title { font-size: 27px; line-height: 30px; letter-spacing: -0.8px; }   /* 27 x 1.1 */
}

.pz-next__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 31px;   /* 17 x 1.8 = 30,6 */
  color: var(--text-2);
  max-width: 620px;   /* дамп: лид уже всей колонки (620 против 932 у
     заголовка) - без своей ширины строка даёт 2 строки вместо 3, и вся
     колонка становится на 31px короче */
}

@media (max-width: 860px) {
  .pz-next__lead { font-size: 15px; line-height: 27px; }   /* 15 x 1.8 */
}

.pz-next__action {
  display: flex;
  align-items: center;
  gap: 18px;
}

@media (max-width: 860px) {
  .pz-next__action { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Кнопка: .btn даёт цвет и форму, здесь только точный размер макета -
   291x54 на десктопе, 276x53 на телефоне (общая кнопка его не знает). */
.pz-next__btn {
  width: 291px;
  height: 54px;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 (метрика Inter, строка не нарисована) */
}

@media (max-width: 860px) {
  .pz-next__btn { width: 276px; height: 53px; font-size: 14px; line-height: 17px; }   /* 14 x 1.21 */
}

.pz-next__url {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;
  color: var(--text-3);
}

@media (max-width: 860px) {
  .pz-next__url { font-size: 12px; line-height: 15px; }
}

/* ─── Карточка отсчёта ─────────────────────────────────────────────
   Радиус в дампе не снять (там только габариты прямоугольников) - карточка
   того же масштаба, что карточки "Все праздники" в pz-all.css, взят их
   токен, а не число на глаз. */
.pz-next__cd {
  width: 340px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--line-h);   /* обводка внутренняя - border добавил бы 2px к размеру */
  border-radius: var(--r-card-lg);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;   /* один зазор на подпись/цифры/линию/факты - в дампе PhFp1
     он целых три раза подряд: 196 - 2x26 паддинга = 13+14+67+14+1+14+21 */
}

@media (max-width: 860px) {
  .pz-next__cd { width: 100%; }
}

.pz-next__cd-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 2px;
  text-transform: uppercase;
  /* Правлено ради AA: общий третий серый палитры праздника (--text-3,
     у Хэллоуина #958EAF) на тёмных карточках этого блока даёт 3,58-4,49
     при норме 4,5 из docs/tech-spec.md (раздел 9) - самый тяжёлый фон
     rgb(93,47,30), оранжево-коричневый. Светлее на 14 %, тон тот же
     сиреневый: стало 4,55 на нём и 5,7-6,1 на остальных карточках.
     Почему не сам токен: он лежит и на светлых поверхностях страницы
     праздника, где светлее - хуже. Промер сделан по действующему
     празднику (Хэллоуин); три остальные палитры этого блока надо
     перемерить, когда праздник сменится - tools/qa/режим.sh.
     Макетное значение возвращает tools/qa/shot.mjs - правку цвета
     самого текста отдельным слоем не сделать. */
  color: #A9A2BE;
}

.pz-next__cd-row {
  display: flex;
}

@media (max-width: 860px) {
  .pz-next__cd-row { flex-direction: column; gap: 14px; }   /* на телефоне группы
     идут не в ряд, а одна под одной - в дампе h3kp8 229 = 3x67 + 2x14 */
}

.pz-next__cd-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;   /* дамп: группа 67 = число 52 + 2 + подпись 13 */
}

.pz-next__cd-n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  line-height: 52px;   /* 38 x 1.36 = 51,68 */
  letter-spacing: -1.4px;
  color: var(--accent-text);
}

.pz-next__cd-w {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 */
  letter-spacing: 1.6px;
  text-transform: uppercase;
  /* Правлено ради AA: общий третий серый палитры праздника (--text-3,
     у Хэллоуина #958EAF) на тёмных карточках этого блока даёт 3,58-4,49
     при норме 4,5 из docs/tech-spec.md (раздел 9) - самый тяжёлый фон
     rgb(93,47,30), оранжево-коричневый. Светлее на 14 %, тон тот же
     сиреневый: стало 4,55 на нём и 5,7-6,1 на остальных карточках.
     Почему не сам токен: он лежит и на светлых поверхностях страницы
     праздника, где светлее - хуже. Промер сделан по действующему
     празднику (Хэллоуин); три остальные палитры этого блока надо
     перемерить, когда праздник сменится - tools/qa/режим.sh.
     Макетное значение возвращает tools/qa/shot.mjs - правку цвета
     самого текста отдельным слоем не сделать. */
  color: #A9A2BE;
}

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

.pz-next__cd-facts {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 21px;   /* 13 x 1.6 = 20,8 */
  color: var(--text-2);
}

@media (max-width: 860px) {
  .pz-next__cd-facts { font-size: 12px; line-height: 19px; }   /* 12 x 1.6 = 19,2 */
}