/* S15 «Что умеет none» (/vozmozhnosti) — К4, 26.09.2026.

   СВОЙ ЛИСТ, А НЕ css/v2/public.css: общий слой витрины правит В под S14,
   и две сессии в одном листе столкнулись бы (решение К 26.09). Здесь только
   классы `.voz-*` этой страницы; цвета, радиус и движение — из токенов
   (css/v2/tokens.css), своих значений нет.

   Размеры — SPEC §S15 п. 2: контейнер 1200, поля 32 (телефон 20); первый
   экран 72 (40), разделы 80 (48); h1 52/60 (34/42), h2 32/40 (26/34), lead
   18/28 (16/26), описание раздела 16/26. */

.voz { background: var(--color-surface); color: var(--color-text); }

.voz-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.voz-h1 { margin: 0; font: 600 52px/60px var(--font); letter-spacing: -0.01em; color: var(--color-text); }
.voz-h2 { margin: 0; font: 600 32px/40px var(--font); color: var(--color-text); }
.voz-lead { margin: 16px 0 0; max-width: 720px; font: 400 18px/28px var(--font); color: var(--color-text-2); }

/* feat-hero + feat-roles */
.voz-hero { padding: 72px 0 32px; }
.voz-roli { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.voz-roli__podpis { font: var(--type-label); color: var(--color-text-3); }
.voz-roli__chipy { display: flex; gap: 8px; flex-wrap: wrap; }
.voz-chip {
  display: inline-flex; align-items: center; min-height: var(--control-md); padding: 0 14px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text);
  font: var(--type-nav); font-weight: 600; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.voz-chip:hover { border-color: var(--color-accent); color: var(--color-text); }
.voz-chip--vybran,
.voz-chip--vybran:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.voz-chip:focus-visible,
.voz-nav__punkt:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* feat-nav — липнет под шапкой (top = высота шапки), прокрутка вбок без полосы. */
.voz-nav {
  position: sticky; top: var(--public-nav-h); z-index: 20;
  /* Сначала непрозрачная подложка: браузер без color-mix выбросит вторую
     строку и оставит первую, а не прозрачную полосу над текстом. Вычисленный
     цвет второй строки — `color(srgb 1 1 1 / 0.97)`, не rgb(): замер, который
     читает только rgb(), примет его за чёрный и насчитает контраст 1,12
     (так и случилось 26.09; на отрисовке 8,72 светлая / 8,80 тёмная). */
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-surface) 97%, transparent);
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
}
.voz-nav__ryad { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.voz-nav__ryad::-webkit-scrollbar { display: none; }
.voz-nav__punkt {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 14px 0 12px;
  border-bottom: 2px solid transparent; color: var(--color-text-2);
  font: var(--type-nav); text-decoration: none; white-space: nowrap;
}
.voz-nav__punkt:hover { color: var(--color-text); }
.voz-nav__punkt[aria-current="true"] { font-weight: 600; color: var(--color-text); border-bottom-color: var(--color-accent); }
.voz-nav__chislo { font: var(--type-caption); color: var(--color-text-3); font-variant-numeric: tabular-nums; }

/* feat-section: слева номер, заголовок, описание и мини-показ (липкие от 1024),
   справа карточки по две. Отступ прокрутки к разделу — 116 (SPEC п. 2). */
.voz-razdel { padding: 80px 0; border-bottom: 1px solid var(--color-line); scroll-margin-top: 116px; }
.voz-razdel__setka { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
.voz-razdel__levo { position: sticky; top: calc(var(--public-nav-h) + 72px); }
.voz-razdel__nomer { margin-bottom: 8px; font: var(--type-micro); color: var(--color-text-3); font-variant-numeric: tabular-nums; }
.voz-razdel__opisanie { margin: 12px 0 0; font: 400 16px/26px var(--font); color: var(--color-text-2); }

.voz-kartochki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.voz-karta {
  position: relative; padding: 18px 20px;
  border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface);
  transition: opacity var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.voz-karta__nazvanie { margin: 0; font: 600 15px/22px var(--font); color: var(--color-text); }
.voz-karta__chto { margin: 6px 0 0; font: 400 14px/22px var(--font); color: var(--color-text-2); }
/* Роль выбрана: у карточки роли рамка 1,5 accent и метка «для вас»; остальные
   приглушены до 0,45 — видны, но не спорят (роль ничего не прячет). Фон
   выбранной — ближайший токен к #F7F8FC макета: своих цветов в листе нет. */
.voz-karta--svoya { border: 1.5px solid var(--color-accent); background: var(--color-row-hover); padding: 17.5px 19.5px; }
.voz-karta--tiho { opacity: .45; }
.voz-karta__metka {
  display: inline-block; margin-bottom: 6px; padding: 0 6px; border-radius: var(--radius);
  background: var(--color-accent); color: var(--color-on-accent); font: var(--type-micro);
}

/* Мини-показ — пример, собран как список кабинета. */
.voz-mini { margin-top: 24px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; }
.voz-mini__shapka { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--color-surface-2); font: var(--type-caption); color: var(--color-text-3); }
.voz-mini__primer { font: var(--type-micro); text-transform: lowercase; }
.voz-mini__stroka { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--color-line); font: var(--type-cell); color: var(--color-text); }
.voz-mini__stroka b { font: var(--type-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.voz-mini__plokho { color: var(--color-danger); }
.voz-mini__horosho { color: var(--color-success); }

/* feat-cta */
.voz-cta { padding: 80px 0; text-align: center; }
.voz-cta__tekst { margin: 12px auto 0; max-width: 560px; font: 400 16px/26px var(--font); color: var(--color-text-2); }
.voz-cta__knopki { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.voz-cta__glavnaya { min-height: var(--control-lg); padding: 0 24px; }
.voz-cta__vtoraya { min-height: var(--control-lg); padding: 0 20px; }

/* Меньше 1024 — одна колонка, левая часть не липнет. */
@media (max-width: 1023px) {
  .voz-razdel__setka { grid-template-columns: 1fr; gap: 24px; }
  .voz-razdel__levo { position: static; }
}

@media (max-width: 719px) {
  .voz-wrap { padding: 0 20px; }
  .voz-hero { padding: 40px 0 24px; }
  .voz-h1 { font: 600 34px/42px var(--font); }
  .voz-h2 { font: 600 26px/34px var(--font); }
  .voz-lead { font: 400 16px/26px var(--font); }
  .voz-razdel,
  .voz-cta { padding: 48px 0; }
  .voz-kartochki { grid-template-columns: 1fr; }
  .voz-chip { min-height: var(--touch); }
}

@media (prefers-reduced-motion: reduce) {
  .voz-chip,
  .voz-karta { transition: none; }
}