/* ============================================================
   Страница специалиста (about/<слаг>/)
   Обычная вертикальная страница, а не scroller/rail: в макетах
   `Reconversia_80.zip` это одна длинная лента, а не набор экранов.
   Префикс .sp-*

   Шкала сентябрьских макетов, общая с on-page / off-page /
   technical / products: имя и заголовки блоков 22, лид и текст
   карточек 16/18, подписи 14, плашки 12 в боксе 24.
   ============================================================ */

/* base.css фиксирует html/body в height:100% — это рассчитано на
   .scroller (100vh) остальных страниц. Здесь обычный поток документа,
   он должен расти по контенту. */
html, body {
  height: auto;
  min-height: 100%;
  overflow-y: visible;
}

.sp-container {
  max-width: var(--design-w);
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(40px, 6.25vw, 105px)) var(--pad-x) clamp(60px, 6.94vw, 117px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.94vw, 33px);
}

/* Обёртки, в которые specialist.js складывает блоки: сами по себе
   они в раскладке не участвуют, зазор между блоками даёт контейнер. */
.sp-body { display: contents; }

/* ---------- Кнопка «Вернуться» ---------- */
.sp-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: clamp(36px, 3.06vw, 52px);
  padding: 0 clamp(16px, 1.67vw, 28px);
  border-radius: 8px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
  font-size: var(--fs-home-lead);
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sp-back:hover { border-color: var(--text-30); background: var(--surface-30); }

/* ============================================================
   ШАПКА ПРОФИЛЯ
   ============================================================ */

.sp-profile {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.81vw, 31px);
}

.sp-photo {
  width: clamp(200px, 25vw, 420px);
  flex: none;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(52, 61, 79, 0.45), rgba(18, 20, 26, 0.9));
}
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--surface-50);
  background:
    radial-gradient(70% 90% at 100% 0%, var(--accent-20) 0%, transparent 100%),
    var(--surface-15);
}

.sp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-badge {
  display: inline-flex;
  align-items: center;
  height: calc(var(--fs-home-micro) * 2);
  padding: 0 clamp(9px, 0.88vw, 15px);
  border-radius: 4px;
  background: var(--accent);
  font-size: var(--fs-home-micro);
  color: var(--text);
  white-space: nowrap;
}

.sp-name {
  margin-top: clamp(12px, 1.25vw, 21px);
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-role {
  margin-top: clamp(8px, 0.84vw, 15px);
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.sp-bio {
  margin-top: clamp(16px, 1.67vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.97vw, 16px);
}
.sp-bio p {
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Соцсети: адресов пока нет, поэтому это не ссылки, а неактивные
   кнопки — тем же приёмом, что «Войти» в шапке. */
.sp-socials {
  margin-top: auto;
  padding-top: clamp(16px, 1.67vw, 28px);
  display: flex;
  gap: 12px;
}
.sp-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.06vw, 52px);
  height: clamp(34px, 3.06vw, 52px);
  border-radius: 8px;
  border: 1px solid var(--surface-50);
  background: var(--surface-30);
  color: var(--text);
}
.sp-social svg { width: 42%; height: 42%; }
.sp-social.inactive { cursor: default; }

/* ============================================================
   ПОЛОСА ПОКАЗАТЕЛЕЙ (highlights с иконками и metrics без них)
   ============================================================ */

.sp-strip {
  display: flex;
  align-items: stretch;
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--surface-15);
}

.sp-strip-item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.97vw, 16px);
  padding: 0 clamp(16px, 1.67vw, 28px);
}
.sp-strip-item:first-child { padding-left: 0; }
.sp-strip-item:last-child { padding-right: 0; }
/* Разделители — кромка ячейки, а не отдельный элемент: так они не
   ломают равную ширину колонок. */
.sp-strip-item + .sp-strip-item { border-left: 1px solid var(--surface-50); }

.sp-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 3.06vw, 52px);
  height: clamp(30px, 3.06vw, 52px);
  flex: none;
  color: var(--surface-50);
}
.sp-strip-icon svg { width: 100%; height: 100%; }

.sp-strip-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-strip-value {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-strip-label {
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ============================================================
   КАРТОЧКИ ЭКСПЕРТИЗЫ
   ============================================================ */

.sp-focus {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 28px);
}

.sp-focus-card {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
}

.sp-focus-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.89vw, 66px);
  height: clamp(40px, 3.89vw, 66px);
  flex: none;
  border-radius: 8px;
  background: var(--accent-15);
  color: var(--accent);
}
.sp-focus-icon svg { width: 52%; height: 52%; }

.sp-focus-title {
  margin-top: clamp(16px, 1.67vw, 28px);
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-focus-sub {
  margin-top: 8px;
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.sp-focus-text {
  margin-top: clamp(16px, 1.67vw, 28px);
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ============================================================
   КЕЙСЫ
   ============================================================ */

.sp-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 28px);
}

.sp-case {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  background:
    radial-gradient(70% 90% at 100% 60%, var(--accent-20) 0%, transparent 100%),
    var(--surface-15);
}
/* Третий кейс в макетах идёт во всю ширину ряда */
.sp-case.wide { grid-column: 1 / -1; }

.sp-case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.67vw, 28px);
}
.sp-case-num {
  font-size: var(--fs-home-lead);
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.sp-case-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sp-case-chip {
  display: inline-flex;
  align-items: center;
  height: calc(var(--fs-home-micro) * 2.2);
  padding: 0 clamp(10px, 0.97vw, 16px);
  border-radius: 999px;
  border: 1px solid var(--accent-30);
  background: var(--accent-15);
  font-size: var(--fs-home-micro);
  color: var(--text);
  white-space: nowrap;
}

.sp-case-title {
  margin-top: clamp(12px, 1.25vw, 21px);
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.sp-case-text {
  margin-top: clamp(20px, 2.08vw, 35px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.97vw, 16px);
}
.sp-case-text p {
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* Строка показателей кейса отделена линией и прижата к низу карточки:
   в ряду из двух кейсов текст разной длины, а кнопки в макете стоят на
   одной высоте. */
.sp-case-metrics {
  margin-top: auto;
  padding-top: clamp(16px, 1.67vw, 28px);
  border-top: 1px solid var(--surface-50);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 28px);
}
/* У кейса с тремя показателями колонок тоже три */
.sp-case-metrics.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sp-case-metric-value {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-case-metric-label {
  margin-top: 8px;
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

.sp-case-more {
  align-self: flex-start;
  margin-top: clamp(20px, 2.08vw, 35px);
  display: inline-flex;
  align-items: center;
  height: clamp(32px, 2.78vw, 47px);
  padding: 0 clamp(14px, 1.39vw, 23px);
  border-radius: 6px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
  font-size: var(--fs-home-lead);
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Адресов у кейсов пока нет — кнопка показана, но никуда не ведёт */
.sp-case-more.inactive { cursor: default; }

/* ============================================================
   ТАЙМЛАЙН
   ============================================================ */

.sp-timeline {
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
}
.sp-timeline-title {
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-timeline-row {
  margin-top: clamp(20px, 2.08vw, 35px);
  display: flex;
  align-items: flex-start;
}
.sp-timeline-item { flex: 1 0 0; min-width: 0; }
/* Последний пункт не растягивается: за ним нет линии, и с flex: 1 его
   текст уезжал бы от правой кромки. */
.sp-timeline-item:last-child { flex: 0 1 auto; }

.sp-timeline-head { display: flex; align-items: center; gap: 8px; }
.sp-timeline-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.sp-timeline-period {
  font-size: var(--fs-home-body);
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.sp-timeline-line { flex: 1; min-width: 12px; height: 1px; background: var(--accent); }
.sp-timeline-item:last-child .sp-timeline-line { display: none; }

.sp-timeline-label {
  margin-top: 10px;
  padding-right: clamp(12px, 1.25vw, 21px);
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ============================================================
   ПРОЕКТЫ
   ============================================================ */

.sp-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.67vw, 28px);
}
.sp-project {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
}
.sp-project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.67vw, 28px);
}
.sp-project-meta {
  font-size: var(--fs-home-lead);
  letter-spacing: 0.02em;
  color: var(--text-30);
}
.sp-project-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(var(--fs-home-micro) * 2.2);
  padding: 0 clamp(10px, 0.97vw, 16px);
  border-radius: 999px;
  border: 1px solid var(--surface-50);
  background: var(--surface-30);
  font-size: var(--fs-home-micro);
  color: var(--text);
  white-space: nowrap;
}
.sp-project-title {
  margin-top: clamp(16px, 1.67vw, 28px);
  font-size: var(--fs-home-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-project-text {
  margin-top: clamp(16px, 1.67vw, 28px);
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ============================================================
   НАГРАДЫ И ПУБЛИКАЦИИ
   ============================================================ */

.sp-notes {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.67vw, 28px);
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--surface-50);
  background: var(--surface-15);
}
.sp-note {
  padding: clamp(16px, 1.67vw, 28px);
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--surface-15);
}
.sp-note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 1.67vw, 28px);
}
.sp-note-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-home-lead);
  letter-spacing: 0.02em;
  color: var(--accent);
}
.sp-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--fs-home-lead) * 1.5);
  height: calc(var(--fs-home-lead) * 1.5);
  flex: none;
  border-radius: 5px;
  background: var(--accent-15);
}
.sp-note-icon svg { width: 62%; height: 62%; }
.sp-note-date {
  flex: none;
  font-size: var(--fs-home-lead);
  letter-spacing: -0.02em;
  color: var(--text-30);
}
.sp-note-title {
  margin-top: clamp(14px, 1.39vw, 23px);
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-note-text {
  margin-top: 8px;
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* ============================================================
   ДРУГИЕ СПЕЦИАЛИСТЫ
   ============================================================ */

.sp-related {
  margin-top: clamp(20px, 2.08vw, 35px);
  display: flex;
  align-items: stretch;
}
.sp-related-item {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(16px, 1.67vw, 28px);
}
.sp-related-item:first-child { padding-left: 0; }
.sp-related-item:last-child { padding-right: 0; }
.sp-related-item + .sp-related-item { border-left: 1px solid var(--surface-50); }

.sp-related-head { display: flex; align-items: center; gap: 12px; }
/* Имя и должность — строками, а не в подбор: оба <span>, и без этого
   они склеивались в одну строку. */
.sp-related-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sp-related-photo {
  width: clamp(30px, 2.78vw, 47px);
  height: clamp(30px, 2.78vw, 47px);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-30);
}
.sp-related-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-related-name {
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sp-related-role {
  margin-top: 4px;
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.sp-related-desc {
  flex: 1;
  margin-top: clamp(12px, 1.25vw, 21px);
  font-size: var(--fs-home-lead);
  line-height: 1.125;
  letter-spacing: -0.02em;
  color: var(--text-50);
}
.sp-related-link {
  margin-top: clamp(14px, 1.39vw, 23px);
  font-size: var(--fs-home-lead);
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
}
.sp-related-link:hover { text-decoration: underline; }

/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА
   ============================================================ */
@media (max-width: 1024px) {
  .sp-container {
    padding-top: calc(var(--header-h) + 32px);
    gap: 16px;
  }
  .sp-profile { flex-direction: column; gap: 14px; }
  .sp-photo { width: 100%; }
  .sp-card { padding: 16px; }
  .sp-socials { margin-top: 20px; padding-top: 0; }

  .sp-strip {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  .sp-strip-item { padding: 0; }
  .sp-strip-item + .sp-strip-item {
    border-left: none;
    border-top: 1px solid var(--surface-50);
    padding-top: 16px;
  }

  .sp-focus { grid-template-columns: 1fr; gap: 12px; }
  .sp-focus-card { padding: 16px; }
  .sp-focus-title,
  .sp-focus-text { margin-top: 14px; }

  .sp-cases { grid-template-columns: 1fr; gap: 12px; }
  .sp-case { padding: 16px; }
  .sp-case-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sp-case-chips { justify-content: flex-start; }
  .sp-case-metrics { grid-template-columns: 1fr; gap: 14px; }
  .sp-case-metrics.three { grid-template-columns: 1fr; }

  .sp-timeline { padding: 16px; }
  .sp-timeline-row { flex-direction: column; gap: 14px; margin-top: 18px; }
  .sp-timeline-item,
  .sp-timeline-item:last-child { flex: none; width: 100%; }
  .sp-timeline-line { display: none; }
  .sp-timeline-label { padding-right: 0; margin-top: 6px; }

  .sp-projects { grid-template-columns: 1fr; gap: 12px; }
  .sp-project { padding: 16px; }
  .sp-project-top { flex-direction: column; align-items: flex-start; gap: 10px; }

  .sp-notes { padding: 12px; gap: 12px; }
  .sp-note { padding: 16px; }
  .sp-note-top { flex-direction: column; align-items: flex-start; gap: 8px; }

  .sp-related { flex-direction: column; margin-top: 16px; }
  .sp-related-item { padding: 0; }
  .sp-related-item + .sp-related-item {
    border-left: none;
    border-top: 1px solid var(--surface-50);
    padding-top: 16px;
    margin-top: 16px;
  }
  .sp-related-desc { flex: none; }
}