/* staff.css — блок 12 «Обучайтесь комфортно».
   Геометрия снята с Figma по абсолютным координатам фрейма 1920 (`1:219`):

   заголовок   1:7082  y 6629, 62/0.9
   табы        1:5336  y 6725, 5 пиллов flex:1, padding 14/30, 20/1.2, radius 89
   карточка    1:5316  x 20  y 6797, 1880×540, radius 30, --shadow-card
   трек        1:5334  x 80  y 6857, 6×350            бегунок 1:5335 6×266
   лента       1:5318  x 107.22 y 6857, 4×80 gap 10 (= 350)
   имя+лид     1:5328  x 258.07 y 6989, ширина 472.04
   фото        1:5332  x 780 y 6887, 360×360
   бейджи+текст 1:5347 x 1209 y 6975, ширина 545.91
   стрелки     1:5357  x 80  y 7227, 2×50 gap 10

   Отсюда сетка карточки (content-box 1760 = 1880 − 2×60):
   107.22 | 70.85 | 472.04 | 49.89 | 360 | 69 | 545.91 | остаток 85.09 справа.
   Строки: 350 (лента) + 20 + 50 (стрелки) = 420 = 540 − 2×60.
   Имя, фото и правая колонка центрированы по высоте карточки (проверено по Y). */

.staff {
  padding-block: 20px;
}

.staff__title {
  margin-bottom: clamp(20px, 2.128cqw, 40px);
}

.staff__title-muted {
  color: var(--color-gray-2);
}

/* Табы категорий: пиллы равной ширины (в макете 5 шт. → по 360 на 1880).
   min-width: min-content не даёт длинному тексту («география, биология, химия»)
   обрезаться, когда на 1600/1400 равной доли уже не хватает. */
.staff__tabs {
  display: flex;
  gap: var(--gap-cards);
  margin-bottom: var(--gap-cards);
}

.staff__tab {
  flex: 1 1 0;
  min-width: min-content;
  padding: clamp(10px, 0.745cqw, 14px) clamp(16px, 1.596cqw, 30px);
  border: 1px solid var(--color-light-blue);
  border-radius: var(--radius-pill);
  font-size: var(--fs-btn);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-blue-2);
  background: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Только неактивные: у активного таба фон синий, и общий ховер красил текст
   в тот же --color-blue — надпись пропадала. */
.staff__tab:not(.staff__tab--active):hover {
  border-color: var(--color-blue-2);
  color: var(--color-blue);
}

.staff__tab--active {
  border-color: var(--color-blue);
  color: var(--color-white);
  background: var(--color-blue);
}

/* ⚠️ Сетка задана ДОЛЯМИ макета, а не пикселями.
   Раньше здесь стояли абсолютные значения из Figma (107.22 | 70.85 | 472.04 |
   49.89 | 360 | 69 | 545.91 + остаток 85.09 справа), и композиция была верна
   ровно на одной ширине — 1920. На всех остальных колонки не сжимались, поэтому
   ниже 1400 приходилось перестраивать раскладку отдельной ступенью.
   Те же числа как `fr` дают ту же пропорцию на любой ширине: сумма 1760
   распределяется по контент-боксу карточки, каким бы он ни был. Восьмая
   колонка — тот самый остаток справа: в макете правая колонка не доходит
   до внутреннего края карточки, и это надо сохранить.

   Строки: лента миниатюр (её высоту задаёт .staff__nav в cqw) + строка стрелок.
   Обе `auto`, поэтому если текст в средней колонке окажется выше ленты,
   карточка вырастет, а не обрежет его. */
.staff__card {
  display: grid;
  grid-template-columns:
    107.22fr            /* лента: трек 6 + 21.22 + миниатюра 80 */
    70.85fr
    minmax(0, 472.04fr) /* имя + лид */
    49.89fr
    360fr               /* круглое фото */
    69fr
    minmax(0, 545.91fr) /* бейджи + текст */
    85.09fr;            /* остаток справа — так в макете */
  grid-template-rows: auto auto;
  row-gap: var(--gap-cards);
  align-items: center;
  padding: var(--card-pad);
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Левая колонка: трек скроллбара + вертикальная лента миниатюр */
/* Высота ленты — 350 на 1920 (4 миниатюры по 80 + 3 зазора по 10), в cqw.
   Пол 240px, чтобы на узком десктопе миниатюры не выродились в точки. */
.staff__nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 1.129cqw;   /* 21.22 */
  /* Высота = ровно 4 миниатюры + 3 зазора (как в макете: 4×80 + 3×10 = 350).
     Значения и здесь, и у миниатюры считаются от одной единицы cqw, поэтому
     четвёртая миниатюра встаёт вровень с низом ленты на любой ширине.
     Пол 242 = 4×56 + 3×6 — те же миниатюры и зазоры на своих минимумах. */
  height: clamp(242px, 18.617cqw, 350px);
}

.staff__scrollbar {
  position: relative;
  flex: none;
  width: clamp(4px, 0.319cqw, 6px);
  height: 100%;
  background: var(--color-light-blue);
  border-radius: 22px;
}

/* Высоту и позицию бегунка считает staff.js по реальному скроллу ленты */
.staff__scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 6px;
  background: var(--color-blue-2);
  border-radius: 22px;
  transition: top 0.25s ease;
}

.staff__thumbs {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.532cqw, 10px);
  flex: 1;
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.staff__thumbs::-webkit-scrollbar {
  display: none;
}

/* В макете неактивная миниатюра — на --color-surface, активная — на синем.
   Затемнения/прозрачности нет, состояние читается только по подложке. */
/* Миниатюра 80 на 1920 — в cqw, той же единицей, что и высота ленты выше
   (иначе они расходятся: колонка ленты — доля контента карточки, а её padding
   резиновый, и на 1440 миниатюры, посчитанные от колонки, переставали
   помещаться в ленту — четвёртая подрезалась). */
.staff__thumb {
  position: relative;
  flex: none;
  width: clamp(56px, 4.255cqw, 80px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface);
  transition: background-color 0.25s ease;
}

/* В макете (1:12607 и соседи) фото — вырезка без фона: ширина во всю миниатюру,
   высота своя у каждого кадра (74.64 / 76.16 / 90 / 84.37 при круге 80), низ вровень
   с низом круга, что выше круга — срезается overflow. Отсюда и подложка видна
   над головой: у активной синяя, у остальных светлая. Растягивать фото на весь
   круг (object-fit: cover) нельзя — подложка исчезает и состояние не читается. */
.staff__thumb img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.staff__thumb:not(.staff__thumb--active):hover {
  background: var(--color-light-blue);
}

.staff__thumb--active {
  background: var(--color-blue);
}

/* Имя + короткое описание */
.staff__info {
  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Кегль имени — общая ступень макета --fs-h3 (48 → 32 → 28) вместо жёстких 48
   с ручными 40/32/28 в ступенях. Ширины — доли своей колонки (390 и 462
   при колонке 472). */
.staff__name {
  max-width: 83%;
  margin-bottom: var(--gap-cards);
  font-size: var(--fs-h3);
  line-height: 0.9;
  color: var(--color-black);
}

.staff__lead {
  max-width: 98%;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--color-gray-2);
}

/* Акцентная часть текста — темнее основной (в макете #525252) */
.staff__lead .accent,
.staff__text .accent {
  color: var(--color-gray-1);
}

/* Круглое фото 360: портрет «вырастает» из круга, поэтому прижат к низу */
/* Круг во всю ширину своей колонки; форму держит aspect-ratio,
   поэтому фото едет вместе с карточкой без ступеней 360/320/280/240 */
.staff__photo {
  grid-column: 5;
  grid-row: 1 / span 2;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface);
}

.staff__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* Подпись видна только когда фото ещё не прислали (ставит staff.js) */
.staff__photo-empty {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-gray-2);
}

.staff__photo--empty .staff__photo-img {
  display: none;
}

.staff__photo--empty .staff__photo-empty {
  display: flex;
}

/* Правая колонка: бейджи + развёрнутый текст */
.staff__about {
  grid-column: 7;
  grid-row: 1 / span 2;
}

.staff__badges {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.532cqw, 10px);
  margin-bottom: clamp(20px, 2.128cqw, 40px);
}

/* 10/20 + 18×1.4 = 45.2 по высоте, как в макете */
.staff__badge {
  display: inline-flex;
  align-items: center;
  padding: clamp(6px, 0.532cqw, 10px) clamp(12px, 1.064cqw, 20px);
  border-radius: var(--radius-pill);
  font-size: var(--fs-text);
  line-height: 1.4;
  background: var(--color-blue-chip-bg);
  color: var(--color-blue-chip);
}

.staff__badge--solid {
  background: var(--color-blue-chip);
  color: var(--color-blue-chip-bg);
}

.staff__text {
  max-width: 98%;
  font-size: var(--fs-text);
  line-height: 1.4;
  color: var(--color-gray-2);
}

/* Стрелки: 50×50 на 1920, gap 10, под лентой миниатюр */
.staff__arrows {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  gap: clamp(6px, 0.532cqw, 10px);
}

.staff__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(40px, 2.66cqw, 50px);
  height: clamp(40px, 2.66cqw, 50px);
  border: 1px solid var(--color-light-blue);
  border-radius: var(--radius-pill);
  color: var(--color-blue-2);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.staff__arrow:hover:not(:disabled) {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.staff__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* В категории один человек — навигация не нужна (правило проекта):
   первые две колонки убираем целиком, остальные съезжают влево */
.staff__card--single .staff__nav,
.staff__card--single .staff__arrows {
  display: none;
}

.staff__card--single {
  grid-template-columns:
    minmax(0, 472.04fr)
    49.89fr
    360fr
    69fr
    minmax(0, 545.91fr)
    263.16fr;  /* остаток: освободившиеся колонки ленты (178.07) + правое поле (85.09) */
}

.staff__card--single .staff__info { grid-column: 1; }
.staff__card--single .staff__photo { grid-column: 3; }
.staff__card--single .staff__about { grid-column: 5; }

/* ⚠️ Ступень ≤1400 удалена целиком. Она существовала только потому, что сетка
   была в пикселях и на 1400 переставала помещаться: колонки не сжимались,
   и раскладку приходилось перестраивать (правая колонка под имя, фото 320).
   Долевая сетка сжимается сама и держит композицию макета вплоть до 1025,
   где включается планшетная раскладка ниже. */

/* ≤1280: пиллы уже не помещаются в ряд — уводим в горизонтальный скролл */
@media (max-width: 1280px) {
  .staff__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-gap));
    padding-inline: var(--page-gap);
  }

  .staff__tabs::-webkit-scrollbar { display: none; }

  .staff__tab { flex: 0 0 auto; }
}

/* ≤1024: лента миниатюр ложится горизонтально над карточкой */
@media (max-width: 1024px) {
  .staff__card,
  .staff__card--single {
    grid-template-columns: minmax(0, 1fr) 49.89px 280px;
    grid-template-rows: auto auto auto auto;
    row-gap: 30px;
    padding: 40px;
  }

  .staff__nav {
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
  }

  /* горизонтальная лента: вертикальный скроллбар не нужен */
  .staff__scrollbar { display: none; }

  .staff__thumbs {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  /* ⚠️ Обязательный сброс: на десктопе миниатюра тянется на всю ширину своей
     колонки (width: 100%), а здесь лента горизонтальная — каждая миниатюра
     заняла бы всю ширину карточки. Возвращаем макетные 80. */
  .staff__thumb {
    width: 80px;
    height: 80px;
  }

  .staff__info,
  .staff__card--single .staff__info { grid-column: 1; grid-row: 2; }
  .staff__photo,
  .staff__card--single .staff__photo { grid-column: 3; grid-row: 2 / span 2; width: 280px; height: 280px; }
  .staff__about,
  .staff__card--single .staff__about { grid-column: 1; grid-row: 3; margin-top: 0; }
  .staff__arrows { grid-column: 1 / -1; grid-row: 4; }

  .staff__name { font-size: 32px; }
}

/* ≤768: всё в одну колонку, фото по центру.
   Брейкпоинт оставлен на 768, а не поднят до 1024: выше уже есть свой
   блок ≤1024 с трёхколоночной раскладкой, и два одинаковых медиазапроса
   просто погасили бы его. Ровно 768px попадает сюда, ниже — мобильный проход. */
@media (max-width: 768px) {
  .staff__card,
  .staff__card--single {
    grid-template-columns: minmax(0, 1fr);
    padding: 30px;
  }

  .staff__info,
  .staff__card--single .staff__info { grid-column: 1; grid-row: 2; }
  .staff__photo,
  .staff__card--single .staff__photo {
    grid-column: 1;
    grid-row: 3;
    width: 240px;
    height: 240px;
    justify-self: center;
  }
  .staff__about,
  .staff__card--single .staff__about { grid-column: 1; grid-row: 4; }
  .staff__arrows { grid-column: 1; grid-row: 5; justify-content: center; }

  .staff__name { font-size: 28px; }
  .staff__badges { margin-bottom: 24px; }
}

/* ═══════════ Телефоны 360–767 — ноды 1:12576…1:12620 ═══════════
   Заголовок и табы стоят от x=20, карточка — тип B (340 при поле 10, радиус 20).
   Карточка 340×777, внутри сверху вниз: лента миниатюр → стрелки → имя и лид →
   круглое фото → бейджи и текст. Замеры — Tz/mobile-360.md. */
@media (max-width: 767px) {
  .staff { padding-block: 50px; }

  /* Заголовок и табы в макете от x=20, а карточка от x=10 —
     контейнер даёт 10, недостающие 10 добираем здесь */
  .staff__title,
  .staff__tabs {
    padding-inline: 10px;
  }

  .staff__title { margin-bottom: 20px; }

  /* Пиллы столбиком во всю ширину (1:12577), а не горизонтальным скроллом.
     ⚠️ margin-inline: 0 обязателен — правило ≤1279 уводит табы в скролл
     отрицательным margin на --page-gap, и без сброса они распирались
     на все 360 вместо макетных 320. */
  .staff__tabs {
    flex-direction: column;
    gap: 10px;
    margin-inline: 0;
    margin-bottom: 20px;
    overflow: visible;
  }

  .staff__tab {
    flex: none;
    padding: 14px 30px;
    white-space: normal;
    text-align: center;
  }

  /* Grid → flex: порядок карточки на телефоне линейный, а DOM-порядок
     (стрелки последние) правим через order, не трогая разметку. */
  .staff__card,
  .staff__card--single {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 20px;
  }

  .staff__nav { order: 1; }
  .staff__arrows { order: 2; }
  .staff__info { order: 3; }
  .staff__photo { order: 4; }
  .staff__about { order: 5; }

  /* Внутри группы «лента + стрелки» зазор 20, до имени — 30.
     Базовый gap карточки 15, разницу добирают поля строки стрелок. */
  .staff__arrows,
  .staff__card--single .staff__arrows {
    margin-top: 5px;
    margin-bottom: 15px;
    justify-content: flex-start;
  }

  /* Стрелки на телефоне 40×40, а не 50 (1:12615) */
  .staff__arrow {
    width: 40px;
    height: 40px;
  }

  /* Лента 1:12605 — ширина 320 при контенте карточки 300, то есть уходит
     под правый край карточки: четвёртая миниатюра срезается, как в макете */
  .staff__nav {
    gap: 0;
    margin-right: -20px;
  }

  .staff__thumbs { gap: 10px; }

  .staff__info,
  .staff__card--single .staff__info { margin-top: 0; }

  .staff__name {
    max-width: none;
    margin-bottom: 20px;
  }

  .staff__lead { max-width: none; }

  /* Круг фото 220 по центру (1:12593) */
  .staff__photo,
  .staff__card--single .staff__photo {
    width: 220px;
    height: 220px;
    align-self: center;
  }

  .staff__about,
  .staff__card--single .staff__about { margin-top: 0; }

  /* Бейджи в ряд по центру, до текста 20 (1:12595) */
  .staff__badges {
    justify-content: center;
    margin-bottom: 20px;
  }

  .staff__badge { font-size: 12px; }

  .staff__text { max-width: none; }
}