/* Стоимость: таблица форматов и цен (pc-tablica.tpl + pc-tablica-item.tpl).
   Макет: секции unEIt (десктоп 1440) и i20f9N (телефон 390).

   Одна разметка, два разных вида: на десктопе строка - это ряд из пяти
   ячеек (подписи колонок даёт общая шапка таблицы), на телефоне та же
   строка становится карточкой (заголовок, линия, три подписанные строки,
   разделитель, абзац). Переключение - только эта таблица стилей, DOM не
   меняется. Высота строки/карточки нигде не задана числом: она целиком
   из текста (padding + высота контента), поэтому строка с двумя строками
   текста в "Кому подходит" получается выше остальных сама собой - так и
   в дампе (96px у первых трёх строк против 70px у "Пробного занятия"). */

[data-section="tablica"] {
  padding-block: 100px;   /* мерки: padding [100, 56] у unEIt */
  background: var(--paper);
}

@media (max-width: 860px) {
  [data-section="tablica"] { padding-block: var(--section-y-m); }   /* мерки: padding [52, 20] у i20f9N = токену */
}

.pc-tablica__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);   /* мерки: gap 44 у unEIt/i20f9N = токену */
}

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

.pc-tablica__head {
  display: flex;
  flex-direction: column;
  gap: 14px;   /* мерки: gap "Заголовок" 14 */
}

.pc-tablica__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: var(--kicker-ls);
  color: var(--magenta-text);
}

.pc-tablica__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);
}

@media (max-width: 860px) {
  .pc-tablica__kicker { font-size: var(--m-kicker); line-height: 13px; }   /* 11 x 1.21 */
  .pc-tablica__h2 { font-size: 30px; line-height: 34px; letter-spacing: -0.9px; }   /* дамп: 30, не токен --m-h2 (28) - своя шкала, как у pg-cena/pg-kak */
}

/* ─── Таблица ────────────────────────────────────────────────── */

.pc-tablica__table {
  display: flex;
  flex-direction: column;
}

.pc-tablica__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;   /* мерки: gap "Строка"/"Шапка таблицы" 24 */
  padding-block: 22px;   /* мерки: padding "Строка" [22,0] */
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent);   /* мерки: stroke #16233D14 низ 1 - обводка внутренняя, border прибавил бы высоту */
}

.pc-tablica__row--head {
  align-items: flex-end;
  padding: 0 0 14px 0;   /* мерки: padding "Шапка таблицы" [0,0,14,0] */
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--ink) 8%, transparent);   /* мерки: stroke низ 2 - толще, чем у строк */
}

.pc-tablica__c {
  font-family: var(--font-body);
}

.pc-tablica__c--nazvanie { flex: 0 0 260px; width: 260px; }
.pc-tablica__c--chelovek { flex: 0 0 200px; width: 200px; }
.pc-tablica__c--dlitelnost { flex: 0 0 200px; width: 200px; }
.pc-tablica__c--cena { flex: 0 0 220px; width: 220px; }
.pc-tablica__c--komu { flex: 1 1 auto; min-width: 0; }

.pc-tablica__row--head .pc-tablica__c {
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;   /* 11 x 1.3 (дамп lineHeight=1.3) */
  letter-spacing: 2px;
  color: var(--muted);
}

.pc-tablica__name {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;   /* 16 x 1.6 (дамп lineHeight=1.6) */
  color: var(--ink);
}

.pc-tablica__line,
.pc-tablica__field-label,
.pc-tablica__hr {
  display: none;   /* мобильные декорации карточки - на десктопе их нет вовсе */
}

.pc-tablica__field {
  line-height: 26px;   /* строка-"обёртка" без своего текста: без явного line-height блок берёт
                           унаследованный от body (28px) для анонимной строки и выходит выше
                           своего видимого содержимого - тот же, что у .pc-tablica__field-value,
                           чтобы высота строки совпадала с видимым текстом */
}

.pc-tablica__field-value {
  font-size: 16px;
  line-height: 26px;   /* 16 x 1.6 */
  color: var(--ink);
}

.pc-tablica__komu {
  margin: 0;
  font-size: 16px;
  line-height: 26px;   /* 16 x 1.6 */
  color: var(--ink);
}

/* ─── Телефон: строка становится карточкой (≤860) ───────────── */

@media (max-width: 860px) {
  .pc-tablica__table {
    gap: 14px;   /* мерки: gap "Таблица" 14 у i20f9N */
  }

  .pc-tablica__row--head {
    display: none;   /* подписи колонок на телефоне - инлайн-подпись у каждой строки карточки */
  }

  .pc-tablica__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;   /* мерки: gap карточки 12 */
    padding: 22px;   /* мерки: padding карточки 22 */
    background: var(--white);
    border-radius: 8px;   /* мерки: cornerRadius 8 */
    box-shadow: none;
  }

  .pc-tablica__c--nazvanie,
  .pc-tablica__c--chelovek,
  .pc-tablica__c--dlitelnost,
  .pc-tablica__c--cena,
  .pc-tablica__c--komu {
    flex: none;
    width: auto;
  }

  .pc-tablica__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
    line-height: 27px;   /* 20 x 1.36 (метрика Manrope) - совпало с pg-cena-item__name, но это своё значение, не общий токен */
    letter-spacing: -0.4px;
  }

  .pc-tablica__line {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--sun);
  }

  .pc-tablica__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;   /* мерки: gap строки "СКОЛЬКО ЧЕЛОВЕК" 12 */
  }

  .pc-tablica__field-label {
    display: block;
    flex: 0 0 140px;   /* мерки: ширина подписи 140 */
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 */
    letter-spacing: 1.6px;   /* дамп: 1.6, не 2 как в заголовке десктопа */
    color: var(--muted);
  }

  .pc-tablica__field-value {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;   /* 14 x 1.4 (дамп lineHeight=1.4) */
    text-align: right;
  }

  .pc-tablica__hr {
    display: block;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  .pc-tablica__komu {
    font-size: 13px;
    line-height: 21px;   /* 13 x 1.6 */
    color: var(--muted);
  }
}