/* ============================================================
   Страница «Другие сервисы» (other-services/)
   Горизонтальная навигация по экранам, как на остальных страницах
   (см. src/styles/screens/nav.css + src/scripts/nav.js).
   3 экрана + футер. Префикс .ot-*

   Состояния блоков переключаются наведением, скролл всегда уводит на
   следующий экран — так же, как на hero страницы SERM.
   ============================================================ */

.ot-h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ot-body {
  font-size: var(--fs-svc-body);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ============================================================
   1. HERO — стопка практик
   ============================================================ */
.ot-hero-grid { display: flex; gap: clamp(40px, 5vw, 80px); align-items: center; }

.ot-hero-left {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: clamp(420px, 41vw, 600px);
  flex-shrink: 0;
}
.ot-hero-title { font-size: var(--fs-hero); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
.ot-hero-lead { font-size: var(--fs-svc-lead); font-weight: 400; line-height: 1.35; color: var(--text); margin-top: 24px; }
.ot-hero-buttons { display: flex; gap: 12px; }
.ot-hero-btn-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Стопка практик. Все карточки одного размера и стоят на фиксированных
   местах (absolute + шаг --pitch), перекрывая друг друга снизу вверх —
   так в макете. Активная поднимается над соседями и подсвечивается;
   ничего не переставляется и не меняет высоту, поэтому под курсором
   всегда остаётся та же карточка.

   --card-h задаёт other.js по самой высокой карточке (текст разной
   длины), --pitch — доля от неё, снятая с макета: 93/140. */
.ot-ring {
  --card-h: 150px;
  --pitch: calc(var(--card-h) * 0.664);
  flex: 1;
  min-width: 0;
  position: relative;
  height: calc(var(--pitch) * 3 + var(--card-h));
}
/* На время замера гасим переходы, иначе меряем промежуточный кадр */
.ot-ring.is-measuring .ot-practice { transition: none; }

.ot-practice {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--pitch) * var(--i));
  height: var(--card-h);
  z-index: var(--i);
  overflow: hidden;
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* Неактивные карточки в макете почти не читаются — так и снято:
     пиковая яркость их текста на фоне страницы даёт ровно 0.07. */
  opacity: 0.07;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Активная перекрывает обе соседние карточки, поэтому фон непрозрачный.
   Средний слой — плашка surface-15, записанная градиентом: в шорткате
   background цвет допустим только в последнем слое, простой
   var(--surface-15) посередине делал всё правило невалидным, фон
   пропадал целиком и сквозь активную карточку просвечивали соседние. */
.ot-practice.active {
  z-index: 10;
  opacity: 1;
  cursor: default;
  border-color: var(--accent);
  background:
    radial-gradient(80% 180% at 100% 100%, rgba(77, 107, 255, 0.28), transparent 62%),
    linear-gradient(var(--surface-15), var(--surface-15)),
    var(--bg);
  box-shadow: 0 0 24px 0 rgba(77, 107, 255, 0.18);
}

.ot-practice-tag { font-size: var(--fs-pp-micro); font-weight: 600; letter-spacing: 0.08em; color: var(--text-50); }
.ot-practice.active .ot-practice-tag { color: var(--accent); }
.ot-practice-title { font-size: var(--fs-svc-title); font-weight: 600; line-height: 1.2; color: var(--text); margin-top: 4px; }
.ot-practice-desc { font-size: var(--fs-svc-body); color: var(--text); line-height: 1.35; margin-top: 6px; }
.ot-practice-note { font-size: var(--fs-micro); color: var(--text-50); line-height: 1.35; margin-top: clamp(10px, 1.1vw, 16px); }

/* Кнопка-стрелка стоит в правом верхнем углу карточки. Ореол цветом
   фона — тот самый вырез угла из макета: он «прорезает» и саму
   карточку, и ту, что лежит под ней. */
.ot-practice-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(32px, 2.78vw, 44px);
  height: clamp(32px, 2.78vw, 44px);
  border-radius: var(--r-btn);
  background: var(--surface-30);
  color: var(--text-50);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 clamp(8px, 0.9vw, 14px) var(--bg);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
/* Синяя стрелка — только у практики со своей страницей; у ещё не
   запущенных направлений она серая (в макете так же). */
.ot-practice.active .ot-practice-arrow { background: var(--track); color: var(--text-50); }
.ot-practice.active a.ot-practice-arrow { background: var(--accent); color: var(--text); }
.ot-practice.active a.ot-practice-arrow:hover { background: var(--accent-50); }
.ot-practice-arrow svg { width: 42%; height: 42%; }

/* ============================================================
   2. КАРТА ЗАДАЧ
   ============================================================ */
.ot-map-head { display: flex; flex-direction: column; gap: 12px; }

.ot-map-grid {
  display: flex;
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
  margin-top: clamp(28px, 3vw, 48px);
}

.ot-map-side {
  width: clamp(240px, 23vw, 335px);
  flex-shrink: 0;
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  padding: clamp(18px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-start;
}
.ot-map-side-label { font-size: var(--fs-pp-tiny); color: var(--text-50); }
.ot-map-side-title { font-size: var(--fs-svc-lead); font-weight: 600; color: var(--text); }
.ot-map-side-divider { height: 0.5px; background: var(--text-20); margin: 12px 0 4px; }

.ot-situations { display: flex; flex-direction: column; gap: 2px; }

.ot-situation {
  padding: 7px 12px;
  border-radius: 6px;
  font-size: var(--fs-svc-body);
  color: var(--text-50);
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.ot-situation:hover { color: var(--text); }
.ot-situation.active { background: var(--accent-50); color: var(--text); cursor: default; }

.ot-map-panel {
  flex: 1;
  min-width: 0;
  border-radius: var(--r-card-lg);
  border: 0.5px solid var(--text-20);
  background: var(--surface-15);
  padding: clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 20px);
}
.ot-map-panel-title { font-size: var(--fs-svc-title); font-weight: 600; line-height: 1.2; color: var(--text); }
.ot-map-panel-desc { font-size: var(--fs-svc-body); color: var(--text-50); line-height: 1.4; }

.ot-map-points { display: flex; gap: clamp(20px, 2.2vw, 40px); }
.ot-map-points-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ot-map-point { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-svc-body); color: var(--text); }
.ot-map-point::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-30); flex-shrink: 0; }

/* Карточка рекомендованной практики: подсветка уходит вправо вниз, как
   в макете. */
.ot-practice-card {
  border-radius: var(--r-card);
  border: 0.5px solid var(--text-20);
  background:
    radial-gradient(90% 160% at 100% 100%, rgba(77, 107, 255, 0.4), transparent 62%),
    var(--surface-15);
  padding: clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
}
.ot-practice-card-title { font-size: var(--fs-svc-title); font-weight: 600; color: var(--text); }
.ot-practice-card-desc { font-size: var(--fs-svc-body); color: var(--text-50); line-height: 1.4; }
.ot-practice-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--accent);
  font-size: var(--fs-btn);
  color: var(--text);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.ot-practice-card-cta:hover { background: var(--accent-50); }
/* Практики без своей страницы: кнопка показывается, но не кликается */
.ot-practice-card-cta.inactive { background: var(--surface-30); color: var(--text-30); cursor: default; }

/* ============================================================
   3. КАК ПОДБИРАЕМ ЭКСПЕРТИЗУ
   ============================================================ */
.ot-flow-grid { display: flex; gap: clamp(40px, 5vw, 90px); align-items: center; }

.ot-flow-left {
  width: clamp(400px, 38vw, 560px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
}
.ot-flow-desc { font-size: var(--fs-svc-body); color: var(--text-50); line-height: 1.4; }

.ot-flow-pager { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
.ot-flow-pager-btn {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-svc-body);
  color: var(--text-30);
  cursor: pointer;
  padding: 0;
  transition: color 0.25s var(--ease);
}
.ot-flow-pager-btn:hover { color: var(--text-50); }
.ot-flow-pager-btn.active { color: var(--accent); cursor: default; }
.ot-flow-pager-sep { color: var(--text-20); }

/* Шаги: раскрыт только активный, остальные — одна строка заголовка с
   разделителем, как в макете. Высота ряда постоянна (см. measureFlow
   в other.js), поэтому левая колонка не ездит. */
.ot-flow-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ot-flow-step {
  border-radius: var(--r-card);
  border: 0.5px solid transparent;
  background: transparent;
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 24px);
  border-bottom: 0.5px solid var(--text-20);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ot-flow-step:last-child { border-bottom: 0.5px solid var(--text-20); }
.ot-flow-step.active {
  border: 0.5px solid var(--text-20);
  background:
    radial-gradient(80% 180% at 100% 100%, rgba(77, 107, 255, 0.28), transparent 62%),
    var(--surface-15);
}
.ot-flow-step-title { font-size: var(--fs-svc-lead); font-weight: 600; color: var(--text-30); transition: color 0.3s var(--ease); }
.ot-flow-step.active .ot-flow-step-title { color: var(--text); }
.ot-flow-step-desc { font-size: var(--fs-svc-body); color: var(--text-50); line-height: 1.4; margin-top: 8px; }
.ot-flow-step:not(.active) .ot-flow-step-desc { display: none; }

/* ============================================================
   Адаптив
   ============================================================ */
/* Мобильный макет (архив Other Services): стопка практик и карта задач
   сохраняют механику, порядок подбора экспертизы работает скролл-треком. */
@media (max-width: 1024px) {
  .ot-hero-grid, .ot-map-grid, .ot-flow-grid { flex-direction: column; align-items: stretch; }
  .ot-hero-left, .ot-flow-left { width: 100%; }
  .ot-hero-buttons { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .ot-hero-btn-col { width: 100%; gap: 0; }
  .ot-hero-btn-col .btn { width: 100%; }

  /* Заголовок и лид по центру, подписи под кнопками сняты */
  .ot-hero-left { align-items: center; text-align: center; }
  .ot-hero-btn-col .caption { display: none; }

  /* Стопка практик остаётся стопкой — в макете карточки так же
     перекрываются, активная подсвечена, у неё же стрелка.
     flex: none обязателен: в колоночной сетке flex-basis: 0% от
     flex: 1 перебивал height, и стопка схлопывалась в ноль. */
  .ot-ring { flex: none; }
  .ot-practice { padding: 14px 16px; }
  .ot-practice-arrow { width: 30px; height: 30px; box-shadow: 0 0 0 8px var(--bg); }

  /* Карта задач: список ситуаций становится сеткой чипов */
  .ot-map-side {
    width: 100%;
    align-self: stretch;
    padding: 8px;
    gap: 0;
  }
  .ot-map-side-label, .ot-map-side-title, .ot-map-side-divider { display: none; }
  .ot-situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .ot-situation { text-align: center; padding: 8px 6px; font-size: var(--fs-micro); line-height: 1.15; }
  .ot-map-panel { padding: 18px 16px; }
  .ot-map-points { flex-direction: column; gap: 10px; }

  /* Карточка рекомендованной практики сворачивается до кнопки: в макете
     от неё остаётся только акцентная плашка со ссылкой. */
  .ot-practice-card { border: none; background: none; padding: 0; margin-top: 4px; }
  .ot-practice-card-title, .ot-practice-card-desc { display: none; }
  .ot-practice-card-cta { align-self: stretch; justify-content: center; margin-top: 0; }

  /* Порядок подбора экспертизы — скролл-трек: видна одна карточка,
     остальные приглушены. Пейджера в мобильном макете нет. */
  .ot-flow-pager { display: none; }
  .ot-flow-steps { min-height: 0; }
  .ot-flow-step {
    border-bottom-color: transparent;
    opacity: 0.3;
    filter: blur(3px);
    transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
  }
  .ot-flow-step:last-child { border-bottom-color: transparent; }
  .ot-flow-step.active { opacity: 1; filter: none; }
  .ot-flow-step-desc, .ot-flow-step:not(.active) .ot-flow-step-desc { display: block; }
  .ot-flow-step-title { color: var(--text); }
}

@media (max-width: 640px) {
  .ot-flow-pager { flex-wrap: wrap; }
}

/* Ноутбучные экраны (1366×768 и ниже): карта задач — самый высокий блок
   страницы, на коротком вьюпорте он подлезал под шапку. Поджимаем
   внутренние отступы, сама сетка не меняется. */
@media (min-width: 1025px) and (max-height: 760px) {
  .ot-map-head { gap: 8px; }
  .ot-map-grid { margin-top: clamp(16px, 1.8vw, 28px); }
  .ot-map-panel { gap: clamp(10px, 1.1vw, 14px); padding: clamp(14px, 1.5vw, 20px); }
  .ot-map-points-col { gap: 8px; }
  .ot-practice-card { gap: 8px; padding: clamp(14px, 1.5vw, 20px); }
}