/* Блок хаба праздников: pz-how - "Что одинаково на любом празднике".
   Макет: секция SBdQt (десктоп) и HMrNP (телефон).

   Цвета своими токенами --ink/--muted/--magenta, а не --text/--accent:
   на хабе нет data-holiday ни на теле, ни на секции (он стоит только на
   карточках праздников), поэтому голидей-токены здесь не заданы и были бы
   пустыми. --paper/--ink/--muted/--magenta - базовые токены бренда, они
   не зависят от праздника и есть всегда. */

[data-section="how"] {
  padding-block: 100px;   /* мерки: 522 - (83 заголовок + 40 гэп + 199 плитки) = 200 */
  background: var(--paper);
}

@media (max-width: 860px) {
  [data-section="how"] { padding-block: 52px; }   /* мерки: 949 - (87+40+718) = 104 */
}

/* .hw-kicker уже даёт нужный размер на обоих брейкпоинтах (12/15 и 11/13,
   ls3) - своего кегля тут нет. Красит она токеном --accent, которого на
   хабе нет, поэтому только цвет переопределяем. */
.pz-how__kicker {
  color: var(--magenta-text);
}

/* Заголовок крупнее общего .hw-h2 (48 вместо 52) - перебиваем в своём файле. */
.pz-how__h2 {
  margin: 14px 0 0;   /* гэп от кикера: мерки 129-(0+15)=14 */
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 48px;
  line-height: 54px;   /* 48 x 1.12 */
  letter-spacing: -1.7px;
  color: var(--ink);
}

.pz-how__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;   /* мерки: шаг между плитками 336 - ширина 320 = 16 */
  margin-top: 40px;   /* мерки: гэп заголовок -> плитки, 223-183=40 */
}

.pz-how__tile {
  display: flex;
  flex-direction: column;
  gap: 12px;   /* мерки: гэп иконка-заголовок и заголовок-текст внутри плитки, оба 12 */
  padding: 28px 24px;   /* мерки: отступ сверху/снизу 28, слева/справа 24 - симметрично */
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);   /* обводка внутренняя - border добавил бы 2px к размеру */
  border-radius: var(--r-card);
}

.pz-how__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--magenta-text);
}

.pz-how__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pz-how__tile-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 25px;   /* 19 x 1.3, в макете задано и округлено до целого */
  color: var(--ink);
}

.pz-how__tile-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 24px;   /* 14 x 1.7, в макете не задано - метрика Inter, округлено */
  color: var(--muted);
}

@media (max-width: 860px) {
  .pz-how__h2 {
    font-size: 27px;
    line-height: 30px;   /* 27 x 1.12 */
    letter-spacing: -0.8px;
  }
  /* Гэп заголовок -> плитки на телефоне тот же 40px (мерки: 40), отступы
     внутри плитки тоже в px совпадают с десктопом (28/24/12) - меняется
     только кегль текста и раскладка в один столбец. */
  .pz-how__tiles {
    grid-template-columns: 1fr;
    gap: 14px;   /* мерки: шаг между плитками 183 - высота 169 = 14 */
  }
  .pz-how__tile-title { font-size: 18px; line-height: 23px; }   /* 18 x 1.3 */
  .pz-how__tile-text { font-size: 13px; line-height: 22px; }    /* 13 x 1.7 */
}