/* === 7. COMPARISON — путь покупателя (версус-таймлайн) ===
   Три параллельных пути по одинаковым этапам. Helios — подсвеченная
   центральная колонка. На мобильном этапы складываются в столбик. */

.vs {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.vs-head,
.vs-row {
  display: grid;
  grid-template-columns: 136px 1fr 1fr 1fr;
}

/* Helios — первой колонкой среди вариантов (порядок без правки разметки) */
.vs-gutter, .vs-stage { order: -2; }
.vs-colhead--helios, .vs-cell--helios { order: -1; }

/* --- шапка с названиями вариантов --- */
.vs-head { border-bottom: 1px solid var(--border); }
.vs-colhead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  border-left: 1px solid var(--border);
}
.vs-colhead__name { font-weight: 700; font-size: var(--h4); color: var(--ink); }
.vs-colhead__tag { font-family: var(--mono); font-size: var(--caption); letter-spacing: 0.06em; color: var(--ink-muted); }
.vs-colhead__badge {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--accent); color: #000; padding: 4px 10px; border-radius: 999px;
}

/* подсветка центральной колонки Helios */
.vs-colhead--helios,
.vs-cell--helios {
  background: rgba(224, 138, 60, 0.07);
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

/* --- строки этапов --- */
.vs-row { border-bottom: 1px solid var(--border); }
.vs-row:last-child { border-bottom: none; }

.vs-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-secondary);
}
.vs-stage__num { font-family: var(--mono); font-size: var(--caption); letter-spacing: 0.1em; color: var(--accent); }
.vs-stage__name { font-family: var(--mono); font-size: var(--body-s); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-muted); }

.vs-cell {
  padding: var(--space-3) var(--space-4);
  font-size: var(--body);
  line-height: 1.45;
  color: var(--ink-muted);
  border-left: 1px solid var(--border);
}
.vs-cell--helios { color: var(--ink); }
.vs-cell__who { display: none; }   /* виден только на мобильном */

/* --- итог --- */
.vs-tally { margin-top: var(--space-4); color: var(--ink-muted); font-size: var(--body); }
.vs-tally a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease); }
.vs-tally a:hover { border-bottom-color: var(--accent); }

/* --- адаптив: этапы в столбик --- */
@media (max-width: 880px) {
  .vs-head { display: none; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-stage { border-bottom: 1px solid var(--border); }
  .vs-stage__name { font-size: var(--body); }
  .vs-cell { border-left: none; border-bottom: 1px solid var(--border); }
  .vs-row:last-child .vs-cell:last-child { border-bottom: none; }
  .vs-cell--helios { border-left: 2px solid var(--accent); border-right: none; }
  .vs-cell__who {
    display: block;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 4px;
  }
  .vs-cell--helios .vs-cell__who { color: var(--accent); }
}

/* ===== мобильная матрица «+ / −» (заменяет «маршрут» на телефоне) ===== */
.vs-m { display: none; }

@media (max-width: 560px) {
  .vs { display: none; }            /* «маршрут» прячем — на телефоне нечитаем */

  .vs-m {
    display: table; width: 100%; table-layout: fixed;
    border-collapse: collapse;
    margin-top: var(--space-4);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .vs-m th, .vs-m td {
    border-bottom: 1px solid var(--border);
    padding: 11px 4px; text-align: center; vertical-align: middle;
  }
  .vs-m tr:last-child td { border-bottom: none; }
  .vs-m thead th {
    font-family: var(--mono); font-size: 10px; line-height: 1.18;
    letter-spacing: 0; text-transform: none;        /* обычный регистр — узнаваемее и уже */
    color: var(--ink-muted); background: var(--bg-secondary);
    word-break: break-word; vertical-align: bottom; /* длинные слова переносятся, не вылезают */
  }
  /* левая колонка — название признака */
  .vs-m .vs-m__feat {
    width: 44%; text-align: left; padding-left: 10px;
    font-size: 12.5px; line-height: 1.25; color: var(--ink);
  }
  .vs-m .vs-m__col { width: 28%; }
  .vs-m thead th { padding-left: 3px; padding-right: 3px; }
  /* колонка Helios — подсвечена */
  .vs-m__hl { background: rgba(224, 138, 60, 0.10); }
  .vs-m thead .vs-m__hl { background: rgba(224, 138, 60, 0.10); color: var(--accent); font-weight: 700; }

  /* звёздная оценка (5 баллов): --s задаёт число закрашенных звёзд */
  .vs-rate { --s: 0; display: inline-block; line-height: 1; font-size: 14px; }
  .vs-rate::before {
    content: "★★★★★";
    letter-spacing: 1px;
    background: linear-gradient(90deg,
      #E0A83C 0 calc(var(--s) / 5 * 100%),
      rgba(255, 255, 255, 0.16) calc(var(--s) / 5 * 100%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}