/* Блок программы pg-kart: карточки экзаменов / карточки "как устроено".
   Один чанк, две страницы:
     - program-kart (body.program--kart) - секция "Экзамены", карточки
       без тегов, мерки nvDaU (1440) / qL1Ap (390);
     - program-nativ (body.program--nativ) - секция "Как устроено",
       карточки с тегами, мерки A8Rqn (1440) / vJfgp (390).
   Разметка общая (pg-kart.tpl), геометрия почти везде совпадает - там,
   где по дампу разошлось (заголовок карточки, зазор внутри карточки),
   разница задана через класс страницы на <body> (program-kart.tpl /
   program-nativ.tpl), а не через вторую вёрстку.

   Полоса 1440 с контентом 1328 (56/20 на телефоне) - сайтовый .wrap,
   здесь не повторяется. Сетку ряда в 3 колонки на столе и в столбик на
   телефоне даёт общий .pg-ryad (pg.css) - здесь только зазор и то, что
   карточки разной высоты не растягиваются. */

[data-section="kart"] {
  background: var(--paper);   /* дамп: fill секции #F7F4EE = var(--paper) */
  padding-block: 100px;        /* дамп: padding [100,56] (не токен --section-y=110) */
}

@media (max-width: 860px) {
  [data-section="kart"] {
    padding-block: 52px;       /* дамп мобильный: padding [52,20] = токену --section-y-m */
  }
}

.pg-kart__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);     /* дамп: gap заголовок -> ряд - 44, совпадает с токеном */
}

.pg-kart__head {
  display: flex;
  flex-direction: column;
  gap: 14px;   /* дамп: gap кикер -> h2 - 14, одинаково на обеих страницах и брейкпоинтах */
}

.pg-kart__kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;    /* высота строки в макете не задана: 12 x 1.25 (дамп) */
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--magenta-text);
}

.pg-kart__h2 {
  margin: 0;
  max-width: 1328px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 48px;       /* дамп = токену --h2-sm */
  line-height: 55px;     /* 48 x 1.14 (дамп), целое число, не множитель */
  letter-spacing: -1.6px;
  color: var(--ink);
}

@media (max-width: 860px) {
  .pg-kart__kicker {
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 (дамп), как и hm-chas__kicker */
  }

  .pg-kart__h2 {
    font-size: 30px;      /* дамп: не совпадает с токеном --m-h2 (28px) */
    line-height: 34px;    /* 30 x 1.14 (дамп) */
    letter-spacing: -0.9px;
  }
}

/* Ряд: .pg-ryad (pg.css) даёт 3 колонки на столе и 1 в столбик на
   телефоне. Карточки разной высоты по тексту (дамп: 221/195/195 на
   экзаменах, 324/298/298 на носителях) - без выравнивания по верху грид
   растянул бы их до одной высоты. */
.pg-kart__row {
  gap: 26px;            /* дамп: зазор ряда 26, одинаково на всех четырёх кадрах */
  align-items: start;
}

.pg-kart__card {
  display: flex;
  flex-direction: column;
  padding: 30px;          /* дамп: padding карточки 30 на обеих страницах */
  background: var(--white);
  border-radius: 8px;      /* дамп: cornerRadius 8 */
}

.pg-kart__line {
  flex: none;
  width: 44px;
  height: 3px;
  border-radius: 2px;      /* дамп: cornerRadius 2 */
  background: var(--sun);   /* дамп: fill #F0C23C = var(--sun) */
}

.pg-kart__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
}

.pg-kart__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 26px;     /* 15 x 1.75 (дамп), целое число */
  color: var(--muted);
}

/* Теги - только у карточек "Как устроено" (подполе tegi, см.
   pg-kart-tag.tpl). У карточек экзаменов список пуст - :empty прячет
   блок целиком, а не оставляет пустую рамку с паддингом. */
.pg-kart__tags {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;        /* дамп: padding-top блока тегов 4 */
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* дамп: gap между тегами 8 */
}

.pg-kart__tags:empty {
  display: none;
}

.pg-kart__tag {
  display: flex;
  align-items: center;
  gap: 9px;                 /* дамп: gap иконка -> текст тега 9 */
}

.pg-kart__tag-icon {
  width: 15px;
  height: 15px;
  color: var(--magenta-text);     /* дамп: fill иконки #E2318C = var(--magenta) */
}

.pg-kart__tag-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;    /* 14 x 1.5 (дамп), целое число */
  color: var(--ink);
}

@media (max-width: 860px) {
  .pg-kart__card { padding: 20px; }

  .pg-kart__text {
    font-size: 14px;
    line-height: 25px;   /* 14 x 1.75 = 24.5 (дамп), округление вверх */
  }

  .pg-kart__tag-text {
    font-size: 13px;
    line-height: 20px;   /* 13 x 1.5 = 19.5 (дамп), округление вверх */
  }
}

/* Заголовок карточки и зазор внутри неё - единственное, что разошлось
   между двумя страницами в самом дампе (не ошибка вёрстки, так в
   макете): экзамены - 20/26/-0.4, карточка-гэп 14; носители - 24/29/-0.6,
   карточка-гэп 16. Различает их тело страницы (program-kart.tpl /
   program-nativ.tpl задают <body class="program program--kart|--nativ">),
   а не вторая копия разметки. */
body.program--kart .pg-kart__card { gap: 14px; }
body.program--nativ .pg-kart__card { gap: 16px; }

body.program--kart .pg-kart__title {
  font-size: 20px;
  line-height: 26px;     /* 20 x 1.3 (дамп) */
  letter-spacing: -0.4px;
}

body.program--nativ .pg-kart__title {
  font-size: 24px;
  line-height: 29px;     /* 24 x 1.2 = 28.8 (дамп), округление вверх */
  letter-spacing: -0.6px;
}

@media (max-width: 860px) {
  body.program--kart .pg-kart__title {
    font-size: 18px;
    line-height: 23px;    /* 18 x 1.3 = 23.4 (дамп), округление вниз */
    letter-spacing: -0.3px;
  }

  body.program--nativ .pg-kart__title {
    font-size: 19px;
    line-height: 23px;    /* 19 x 1.2 = 22.8 (дамп), округление вверх */
    letter-spacing: -0.4px;
  }
}