/* ═══════════════════════════════════════════════════════════════════════
   cases.css — «Кейсы и отзывы»: плоская карусель на главной, сетка на
   /cases/ и общее окно с видео. Неймспейс .cs-* / .cslb-*.

   🔴 Почему НЕ переиспользуем .oc-* из #work: там 3D-орбита (rotateY +
   translateZ + perspective). Кейсов два, и вращать два элемента по кругу
   бессмысленно — здесь нужен горизонтальный scroll-snap без transform-движка.
   Общего кода у компонентов нет, поэтому и общих классов быть не должно.

   Подключается ПОСЛЕ tokens.css. Значения — только из токенов.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --gap-cs: clamp(16px, 2vw, 24px); }

/* ─────────────────────── КАРУСЕЛЬ (главная) ─────────────────────── */

.cs-root { margin-top: clamp(28px, 4vw, 44px); }

/* Полоса прокрутки = сама карусель. Снап нативный: никакого JS-движка,
   поэтому колесо, тачпад и свайп работают «из коробки». */
.cs-viewport {
  display: flex;
  gap: var(--gap-cs);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Поле под тень карточки при наведении. 🔴 Только по вертикали: любое
     боковое padding сдвигает точку снапа, первый слайд встаёт на
     scrollLeft = padding, и «начало» перестаёт определяться сравнением с
     нулём — стрелка «назад» остаётся активной на первом кейсе. */
  padding: 6px 0 14px;
  margin: -6px 0 -14px;
}
.cs-viewport::-webkit-scrollbar { display: none; }
.cs-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

/* Ширина карточки задаётся ЗДЕСЬ, а не в JS: layout считает браузер,
   инициализация не двигает вёрстку → CLS не растёт. */
.cs-viewport > .cs-card {
  flex: 0 0 calc((100% - var(--gap-cs)) / 2);   /* > 640px — две в экране */
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .cs-viewport > .cs-card { flex-basis: 100%; }  /* телефон — ровно одна */
}

/* Перетаскивание мышью: пока тянем — курсор и запрет выделения текста. */
.cs-viewport.cs-drag { cursor: grabbing; scroll-behavior: auto; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .cs-viewport { cursor: grab; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-viewport { scroll-behavior: auto; }
}

/* ─────────────────────── СЕТКА (/cases/) ─────────────────────── */

/* 🔴 Внутренние страницы держат .phero во весь экран (min-height:100svh+240px),
   потому что справа от текста стоит демо-визуал. На /cases/ правой колонки нет,
   и без этого правила между заголовком и карточками зияет пустой экран —
   на 1440px это ~1100px пустоты, карточки уезжают под сгиб. */
.phero.cs-phero { min-height: auto; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.phero.cs-phero .wrap { grid-template-columns: 1fr; }

.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* десктоп и планшет — 2 колонки */
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 640px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────── КАРТОЧКА ─────────────────────── */

.cs-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cs-card { cursor: pointer; }
  .cs-card:hover { transform: translateY(-3px); border-color: rgba(109,73,206,.4); box-shadow: var(--sh-2); }
  .cs-card:hover .cs-play { transform: translate(-50%,-50%) scale(1.08); background: var(--accent); }
  .cs-card:hover .cs-open { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
}

/* Обложка. aspect-ratio держит место до загрузки постера → CLS 0. */
.cs-cover {
  position: relative;
  display: block;
  aspect-ratio: 1280 / 832;
  background: var(--bg-2);
  overflow: hidden;
}
/* -webkit-user-drag: перетаскивание карусели мышью начинается на картинке,
   и без этого браузер вместо прокрутки тащит саму картинку. */
.cs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }

.cs-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: var(--r-pill);
  background: rgba(6,29,41,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
  transition: transform var(--dur-base) var(--spring), background var(--dur-base) var(--ease);
}
.cs-play svg { width: 22px; height: 22px; margin-left: 3px; }

.cs-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.2vw, 24px); flex: 1; }

.cs-card h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cs-card h3 small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Выжимка — цитата клиента. Кавычки-ёлочки уже в тексте, поэтому
   декоративных кавычек из CSS здесь нет: получилось бы удвоение. */
.cs-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Три пункта — ритм .vitem из #value-stack: бейдж-иконка, текст, линия.
   Иконки разные: на «По прайсу — 54 000 ₽» галочка «включено» читалась бы
   как обещание, хотя это факт сделки. */
.cs-facts { margin-top: auto; }
.cs-fact {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.45;
}
.cs-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.cs-fact b { font-weight: 600; color: var(--ink); }
.cs-fact .ck {
  flex: none;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--tint-lav); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.cs-fact .ck svg { width: 15px; height: 15px; }

.cs-open {
  align-self: flex-start;
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.cs-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Полный текст кейса едет в окно. На карточке скрыт атрибутом hidden —
   клон в окне атрибут снимает (см. cases.js). */
.cs-full[hidden] { display: none; }

/* ─────────────────────── НАВИГАЦИЯ КАРУСЕЛИ ─────────────────────── */

.cs-nav { display: flex; align-items: center; gap: 16px; margin-top: clamp(18px, 2.4vw, 26px); }

.cs-btn {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cs-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .cs-btn:not([disabled]):hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
}
.cs-btn[disabled] { opacity: .32; cursor: default; }
.cs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cs-dots { display: flex; align-items: center; }
/* Сама кнопка — тач-цель 44×44 (§8.4), видимая полоска рисуется псевдо-
   элементом. Раздувать полоску до 44px нельзя, а «маленькая кнопка +
   невидимая зона» проваливает проверку размеров тач-целей — поэтому
   размер держит кнопка, а вид — ::before. */
.cs-dot {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  /* 🔴 border:0 обязателен: глобального сброса кнопок в проекте нет, и
     дефолтная браузерная рамка `2px outset` делает обе точки чёрными —
     активная и неактивная выглядят одинаково. */
  border: 0; background: none; padding: 0;
  -webkit-appearance: none; appearance: none;
}
.cs-dot::before {
  content: '';
  width: 20px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: background var(--dur-base) var(--ease), width var(--dur-base) var(--ease);
}
.cs-dot.on::before { background: var(--accent); width: 32px; }
.cs-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--r-sm); }

.cs-all {
  margin-left: auto;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  min-height: 44px;
  display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) { .cs-all:hover { text-decoration: underline; } }
.cs-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

@media (max-width: 520px) {
  .cs-nav { flex-wrap: wrap; row-gap: 12px; }
  .cs-all { margin-left: 0; flex-basis: 100%; }
}

/* ─────────────────────── ОКНО (лайтбокс) ─────────────────────── */

.cslb {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 3vw, 32px);
  background: rgba(6,29,41,.72);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cslb[hidden] { display: none; }
.cslb.is-open { opacity: 1; }

.cslb__win {
  position: relative;
  width: min(860px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  transform: translateY(14px);
  transition: transform var(--dur-base) var(--ease);
}
.cslb.is-open .cslb__win { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cslb, .cslb__win { transition: none; }
  .cslb__win { transform: none; }
}

/* Крестик держится над плеером и не перекрывается им: своя строка
   отрицательного z-порядка тут не поможет — iframe рисуется поверх, поэтому
   кнопка вынесена НАД видео в отдельную шапку, а не положена на него. */
.cslb__head {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: flex-end;
  padding: 10px 10px 0;
  background: var(--bg);
}
.cslb__x {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.cslb__x svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .cslb__x:hover { background: var(--bg-2); } }
.cslb__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cslb__body { padding: 4px clamp(16px, 3vw, 32px) clamp(24px, 3.4vw, 34px); }
/* Весь вертикальный ритм окна задаётся ЗДЕСЬ, тремя правилами. 🔴 Собственные
   margin у детей (`.cs-wtitle`, `.cs-facts`) не ставить: у селектора с двумя
   классами специфичность выше, и он молча съедает отступ потока — так уже
   съело отступ под видео. */
.cslb__body > * { margin: 0; }
.cslb__body > * + * { margin-top: clamp(20px, 2.4vw, 28px); }
/* После видео воздуха больше: кадр — тяжёлый прямоугольник, и заголовок,
   прижатый к нему на общий отступ, читается как подпись к кадру. */
.cslb__body > .cs-video + * { margin-top: clamp(26px, 3.4vw, 40px); }

/* Видео: пропорции через aspect-ratio (не padding-hack) — контейнер держит
   высоту до подстановки iframe, поэтому первый клик не двигает вёрстку. */
.cs-video {
  position: relative;
  aspect-ratio: 1280 / 832;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
}
.cs-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video[role="button"] { cursor: pointer; }
.cs-video[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cs-video[role="button"]:hover .cs-play { transform: translate(-50%,-50%) scale(1.08); background: var(--accent); }
}

.cslb__body .cs-wtitle {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* Разбор кейса — четыре абзаца подряд. Без типографики они читаются одной
   серой простынёй, поэтому: первый абзац работает лидом (крупнее и темнее,
   как `.lead` в остальных секциях сайта), остальные — спокойный корпус.
   Мера строки ограничена: на всю ширину окна (~800px) строка уходит за 90
   знаков, и глаз теряет начало следующей. */
.cs-text { max-width: 68ch; }
.cs-text p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink-2);
}
.cs-text p + p { margin-top: 1.1em; }
.cs-text p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.01em;
}
/* Ключевые слова автора выделяются в разметке, не в CSS — здесь только их вид. */
.cs-text b { font-weight: 600; color: var(--ink); }

/* На карточке `.cs-facts` прижат книзу через margin-top:auto — в окне
   контейнер блочный, auto превращается в 0, и сбрасывать его правилом
   не нужно (правило с двумя классами перебило бы отступ потока). */

.cs-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}
.cs-link svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .cs-link:hover { text-decoration: underline; } }
.cs-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* Узкий телефон: окно во всю ширину, поля минимальные — иначе на 320px
   от контента остаётся полоска. */
@media (max-width: 380px) {
  .cslb { padding: 0; }
  .cslb__win { border-radius: 0; min-height: 100%; }
}