/* Программа: "Как проходит занятие" - надстрочник + заголовок, дальше
   ряд из четырёх пунктов с крупной цифрой (312,5 px в колонке на
   десктопе, в столбик на телефоне). Макет: фреймы Np5ex (1440) и nSKcB
   (390). Разметка - pg-kak.tpl + чанк одного пункта pg-kak-item.tpl. */

.pg-kak {
  background: var(--paper);
  /* Дамп: padding-block 100, не токен --section-y=110 - у этого блока
     вертикальный отступ меньше стандартного. */
  padding-block: 100px;
}

.pg-kak__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section); /* 44 в дампе = токену */
}

/* ─── Заголовок ──────────────────────────────────────────────── */

.pg-kak__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-kak__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--kicker);        /* 12 */
  line-height: 15px;                /* 12 x 1.21 (метрика Inter) */
  /* Дамп: letter-spacing 3 и на телефоне тоже - не токен --m-kicker-ls
     (2.4), здесь надстрочник не сужают на мобильной версии. */
  letter-spacing: 3px;
  color: var(--magenta-text);
}

.pg-kak__h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2-sm);         /* 48 */
  line-height: 55px;               /* 48 x 1.14 */
  letter-spacing: var(--h2-sm-ls); /* -1.6px */
  color: var(--ink);
}

/* ─── Пункты ─────────────────────────────────────────────────── */

.pg-kak__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px; /* дамп aQhLW/NZBwm: 4 x 312,5 + 3 x 26 = 1328 */
}

.pg-kak__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-kak__num {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  line-height: 46px;     /* 34 x 1.36 (метрика Manrope) */
  letter-spacing: -1px;
  color: var(--sun);
}

.pg-kak__item-h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 25px;        /* 19 x 1.3 */
  letter-spacing: var(--h3-ls); /* -0.4px, совпадает со шкалой h3 */
  color: var(--ink);
}

.pg-kak__item-p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body-sm); /* 15 */
  line-height: 26px;          /* дамп: 15 x 1.75, не токен --body-sm-lh (1.70) */
  color: var(--muted);
}

@media (max-width: 860px) {
  .pg-kak {
    padding-block: var(--section-y-m); /* 52 в дампе = токену */
  }

  .pg-kak__kicker {
    font-size: var(--m-kicker);  /* 11 */
    line-height: 13px;            /* 11 x 1.21 */
  }

  .pg-kak__h2 {
    /* Дамп: 30, не токен --m-h2 (28) - у этого заголовка своя шкала
       (как --h2-sm на десктопе, а не --h2). */
    font-size: 30px;
    line-height: 34px;           /* 30 x 1.14 */
    letter-spacing: -0.9px;
  }

  .pg-kak__items {
    grid-template-columns: 1fr;
    gap: 26px; /* дамп NZBwm: тот же зазор, что на десктопе */
  }

  .pg-kak__num {
    font-size: 23px;
    line-height: 31px;           /* 23 x 1.36 */
    letter-spacing: -0.6px;
  }

  .pg-kak__item-h3 {
    font-size: 17px;
    line-height: 22px;           /* 17 x 1.3 */
    letter-spacing: -0.3px;
  }

  .pg-kak__item-p {
    font-size: 14px;
    line-height: 25px;           /* дамп: 14 x 1.75 */
  }
}