/* Преподаватели: "Наши педагоги" - кикер+заголовок, ряд карточек. Макет:
   фреймы Y2nK55 (десктоп 1440x868) и qZZQk (телефон 390) страницы
   "Преподаватели". Разметка - tc-sostav.tpl + tc-sostav-item.tpl +
   tc-sostav-tag.tpl.

   Полоса 1440 с контентом 1328 (56/20 на телефоне) - сайтовый .wrap,
   здесь не повторяется. */

[data-section="sostav"] {
  background: var(--white);
  padding-block: 100px;   /* дамп: padding [100,56], не токену --section-y (110) */
}

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

.tc-sostav__head {
  display: flex;
  flex-direction: column;
  gap: 14px;   /* дамп: gap кикер -> h2 */
}

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

.tc-sostav__h2 {
  margin: 0;
  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);
}

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

.tc-sostav__card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 8px;   /* дамп: cornerRadius 8 */
  overflow: hidden;      /* дамп: clip=true - фото обрезается по скруглению */
}

.tc-sostav__photo {
  width: 100%;
  height: 300px;   /* дамп: высота "Фото" 300 */
  overflow: hidden;
}

.tc-sostav__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Дамп: у блока "Текст" padding [28,0,0,0] - только отступ сверху, слева и
   справа карточки его нет вовсе (кикер, заголовок, абзац и теги идут
   вплотную к краям карточки). Непривычно для карточки, но так в дампе у
   всех трёх карточек одинаково - не опечатка одной карточки. */
.tc-sostav__body {
  display: flex;
  flex-direction: column;
  gap: 14px;   /* дамп: gap внутри "Текст" */
  padding-top: 28px;
}

.tc-sostav__vozrast {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;   /* 11 x 1.21 (метрика Inter) */
  letter-spacing: 2.4px;
  color: var(--muted);
}

.tc-sostav__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 33px;   /* 24 x 1.36 (метрика Manrope), дамп: высота строки 33 */
  letter-spacing: -0.6px;
  color: var(--ink);
}

.tc-sostav__line {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;   /* дамп: cornerRadius 2 */
  background: var(--sun);
}

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

.tc-sostav__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;   /* дамп: gap между тегами 10 */
}

.tc-sostav__tags:empty {
  display: none;
}

.tc-sostav__tag {
  background: var(--white);
  border-radius: 3px;   /* дамп: cornerRadius 3 */
  padding: 7px 12px;    /* дамп: padding тега [7,12] */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 (дамп: высота строки тега 15) */
  color: var(--ink);
}

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

  .tc-sostav__kicker {
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 (дамп) */
  }

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

  .tc-sostav__row {
    gap: 26px;   /* дамп: тот же зазор, что на десктопе */
  }

  .tc-sostav__photo {
    height: 290px;   /* дамп: высота "Фото" телефон 290 */
  }

  .tc-sostav__vozrast {
    font-size: 10px;
    line-height: 12px;   /* 10 x 1.21 (дамп) */
  }

  .tc-sostav__title {
    font-size: 19px;
    line-height: 26px;   /* 19 x 1.36 (дамп) */
    letter-spacing: -0.4px;
  }

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

  .tc-sostav__tag {
    font-size: 11px;
    line-height: 13px;   /* 11 x 1.21 (дамп) */
  }
}