/* ============================================================
   SCREEN 3 — FAN OF CARDS
   ============================================================ */
.s3-content {
  display: flex;
  gap: clamp(40px, 4.2vw, 80px);
  align-items: center;
  position: relative;
}

.s3-left {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3vw, 48px);
  width: clamp(420px, 36vw, 620px);
  flex-shrink: 0;
}

.s3-title {
  font-size: var(--fs-home-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}


.s3-desc {
  font-size: var(--fs-home-lead);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
}

.s3-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s3-pagination {
  font-size: var(--fs-body);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.s3-pagination .current { color: var(--accent); }
.s3-pagination .sep, .s3-pagination .total { color: var(--text-50); }

.s3-track {
  width: clamp(160px, 12vw, 220px);
  height: 6px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.s3-track-fill {
  height: 100%;
  width: 25%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.5s var(--ease-out);
}

/* Точки-пейджер: на десктопе роль индикатора играет пара
   «[ 01 ] / [ 04 ]» + рельса, точки нужны только мобильному макету
   (Reconversia_18). */
.s3-dots { display: none; }

/* На десктопе обёртка прозрачная: карточки веера лежат абсолютно и
   считаются от .s3-fan, как раньше. Боксом она становится только на
   мобильном, где из веера собирается карусель. */
.mech-rows { display: contents; }

.s3-fan {
  position: relative;
  flex: 1;
  height: var(--card-h-slim);
  min-width: var(--card-w-slim);
  margin-top: 40px;
}

.mech-card {
  position: absolute;
  left: 6%;
  top: 0;
  width: var(--card-w-slim);
  height: var(--card-h-slim);
  border-radius: var(--r-hero);
  border: 0.5px solid var(--text-20);
  overflow: hidden;
  backdrop-filter: blur(22.5px);
  -webkit-backdrop-filter: blur(22.5px);
  background:
    linear-gradient(90deg, rgba(18, 20, 26, 0.6) 0%, rgba(18, 20, 26, 0.6) 100%),
    linear-gradient(90deg, rgba(52, 61, 79, 0.3) 0%, rgba(52, 61, 79, 0.3) 100%);
  transform-origin: bottom center;
  transition:
    transform 0.5s var(--ease-out),
    opacity 0.35s var(--ease),
    filter 0.35s var(--ease);
  cursor: pointer;
  /* Раньше заголовок и список позиций стояли на фиксированных %
     (top: 6.5% / top: 33%) независимо друг от друга — на механизмах
     с более длинным заголовком (2 строки в title + 2 строки в
     subtitle) заголовок наезжал на первый пункт списка. Теперь это
     flex-колонка: список всегда идёт сразу после заголовка, какой бы
     высоты тот ни был. */
  display: flex;
  flex-direction: column;
  /* Поля 24px при окне 1440 — снято с макета. Раньше они задавались
     процентами от размеров карточки: при смене её пропорций поля
     разъезжались, а вертикальные оказывались вдвое больше боковых. */
  padding: clamp(18px, 1.67vw, 28px);
}

/* Текст активной карточки должен быть максимально резким, поэтому с
   неё снимается всё, что уводит элемент в отдельный композитный слой
   (там теряется субпиксельное сглаживание и текст выглядит мутным,
   «как под другим слоем»). backdrop-filter здесь почти ничего не
   давал: фон карточки и так плотный (суммарная альфа ~0.72), а за
   активной карточкой лежит ровный фон страницы. will-change нужен
   только тем карточкам, которые реально анимируются. */
.mech-card.active {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Без backdrop-filter полупрозрачный фон открывал карточки сзади,
     поэтому у активной он плотный — тот же цвет, что давало стекло
     над фоном страницы (см. --panel-glass в tokens.css). */
  background: var(--panel-glass);
  border-color: var(--text-30);
}
.mech-card:not(.active) { will-change: transform, opacity, filter; }

/* Свечение в левом верхнем углу. Пропорции — с прошлой версии
   (docs/reference/reconversia-v0.html: 253×232 на карточке 361×378).

   z-index обязателен. Свечение — позиционированный элемент, а контент
   карточки (шапка, список, итоговая строка) — статический, и по
   порядку отрисовки позиционированное всегда идёт ПОВЕРХ статического.
   В прошлой версии этого не было видно, потому что там шапка и список
   тоже были absolute и шли в разметке после свечения. Как только
   карточка стала flex-колонкой, синее пятно легло на текст. */
.mech-glow {
  position: absolute;
  z-index: 0;
  width: 70%;
  height: 61%;
  left: -17.6%;
  top: -15%;
  background: radial-gradient(closest-side, rgba(77, 107, 255, 0.4) 0%, transparent 100%);
  pointer-events: none;
}

/* Контент — над свечением */
.mech-top,
.mech-items {
  position: relative;
  z-index: 1;
}

/* .mech-header и .mech-icon раньше стояли каждый на своих % (left/
   right относительно ширины карточки) — из-за этого ширина заголовка
   не подстраивалась под реальное доступное место и текст либо
   налезал на иконку, либо (при пересчёте % после появления padding
   на .mech-card) начинал переносится на лишнюю строку. Теперь это
   обычный flex-ряд: заголовок занимает всё доступное место, иконка —
   фиксированную ширину, ширина каждого считается браузером сама. */
.mech-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.mech-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Строка под названием шага: одно предложение о его сути. Раньше на
   этом месте стояла надпись капсом НАД заголовком (EXPERTISE /
   SERVICES / …) — в новых макетах её нет. */
.mech-lead {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
}

/* 16px, а не общий заголовок карточки (22px): карточка шага узкая
   (360px при 1440), и в макете название набрано мельче — на 22px оно
   переносилось на вторую строку и выдавливало последний пункт за низ
   карточки. */
.mech-title {
  font-size: var(--fs-home-lead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mech-icon {
  flex-shrink: 0;
  width: var(--icon-mech);
  height: var(--icon-mech);
  border-radius: 12px;
  background: var(--accent-15);
  border: 0.5px solid rgba(77, 107, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
/* Как на экране 2: viewBox добит до общего квадрата 30, высота 30 из
   плашки 54 = 56% — и каждый шаг получает свой экспортный размер
   (полосы 25x30, график и орбита 30x30, диалог 30x22). */
.mech-icon svg { height: 56%; width: auto; }

/* justify-content: center здесь раньше было ошибкой: когда контент
   пунктов не помещался в отведённое место (узкий экран + длинный
   заголовок), центрирование растягивало переполнение в обе стороны —
   первый пункт залезал ВВЕРХ поверх заголовка. Прижимаем к началу:
   переполнение (если случится) уйдёт только вниз, под фейд. */
.mech-items {
  position: relative;
  width: 100%;
  /* Воздух между шапкой карточки и списком. В макете 49px при 1440,
     но там и шапка, и сам список на несколько пикселей ниже наших —
     на 49 последний пункт вылезал за низ карточки, поэтому 24. */
  margin-top: clamp(12px, 1.7vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

.mech-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--text-20);
}
.mech-item:last-child { border-bottom: none; }

/* Плашка на всю ширину карточки, как в прошлой версии. Раньше стояло
   align-self: flex-start — плашка обжимала текст, и список выглядел
   рваным по правому краю. */
.mech-item-pill {
  background: var(--accent-15);
  border-radius: 4px;
  /* 22px высотой при кегле 14 — как в макете. */
  padding: 4px 8px;
  font-size: var(--fs-home-body);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mech-item-desc {
  font-size: var(--fs-home-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-50);
  padding: 0 8px;
}

/* Итоговой строки внизу карточки (.mech-footer) в новых макетах нет —
   карточка заканчивается последним пунктом списка.

   Затемняющей виньетки .mech-fade внизу тоже нет: раньше она
   подсказывала, что контент обрезан, но только гасила текст,
   создавая эффект «текст лежит под другим слоем». */

/* ---------- Мобильная раскладка ----------
   Веер карточек (эффект «стопки», в котором соседние карточки
   выглядывают сзади со сдвигом/поворотом) на мобильном не нужен —
   Figma показывает одну активную карточку на всю ширину и
   пагинацию под ней. Инлайновые transform/opacity/filter карточек
   ставит JS (updateFan в main.js) на любой ширине экрана, поэтому
   их приходится глушить через !important — то же решение, что и для
   .rail в nav.css. */
@media (max-width: 1024px) {
  .s3-content {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 6vw, 36px);
  }
  .s3-left {
    display: contents;
  }
  .s3-title { order: 1; }
  .s3-desc { order: 2; }
  /* backdrop-filter на мобильном не нужен: фон под каруселью ровный,
     а пересчёт на каждом кадре листания стоит дорого. */
  .mech-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .s3-fan { order: 3; }
  /* Макет Reconversia_18: вместо «[ 01 ] / [ 04 ]» и рельсы — точки. */
  /* stretch, а не center: полоса прогресса тянется во всю ширину
     колонки, и по содержимому обёртка схлопнулась бы в ноль. */
  .s3-scroll { order: 4; align-self: stretch; }
  .s3-pagination,
  .s3-track { display: none; }
  /* В мобильном макете это не точки, а полоса прогресса во всю
     ширину: четыре штриха по 82 при зазоре 6, активный акцентный. */
  .s3-dots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    align-self: stretch;
    width: 100%;
  }
  .s3-dot {
    width: auto;
    height: 3px;
    border-radius: 999px;
    background: var(--track);
    cursor: pointer;
    transition: background 0.25s var(--ease);
  }
  .s3-dot.active { background: var(--accent); }

  /* Карусель: окно по ширине колонки, карточки едут внутри него.
     Высоту окну задаёт активная карточка — остальные вынуты из потока,
     поэтому окно ужимается по самой высокой (min-height ниже). */
  .s3-fan {
    width: 100%;
    min-width: 0;
    height: auto;
    margin-top: 0;
    position: relative;
    overflow: hidden;
  }
  /* Окно карусели (см. initCardCarousel в nav.js). Высоту ставит он же —
     по самой длинной карточке, раз и навсегда: карточки вынуты из
     потока, и без этого окно осталось бы высотой в min-height, а
     карточка обрезалась снизу по overflow. Высота больше не
     анимируется: раньше она ехала за активной карточкой, и блок с
     пейджером дёргался на каждом переключении. */
  .mech-rows {
    display: block;
    position: relative;
    min-height: clamp(340px, 90vw, 420px);
  }
  .mech-card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: clamp(340px, 90vw, 420px);
    filter: none;
    /* Никакого стекла на телефоне. В окне всегда одна карточка, за ней
       ровный фон страницы — размывать нечего, а backdrop-filter на
       соседних карточках в Safari накапливался: с каждым пролистыванием
       содержимое становилось всё мутнее. Фон берём плотный, тот же, что
       у активной карточки на десктопе. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel-glass);
    /* Переход задаёт общее правило .card-carousel-item в nav.css — одно
       на все карусели сайта. Здесь его дублировать нельзя: разъедутся. */
  }
  /* will-change оставляет карточку в отдельном композитном слое — на
     телефоне это лишний слой под каждую из четырёх карточек и ещё один
     повод для мутного текста. */
  .mech-card,
  .mech-card:not(.active) { will-change: auto; }
}