/* Страница кейса (лонгрид). Значения — docs/style/d-holst.md → «Лонгрид» и «Сетка → Страница кейса». Mobile first.
   Шапка, футер, кнопки и блок «было | стало» — из home.css. */

.grid-pad { padding-inline: var(--content-pad); }

/* Ссылка в тексте: accent-text, подчёркивание 1 px со смещением 3 px; наведение — fg */
.link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: var(--line-width);
  text-underline-offset: var(--link-offset);
  transition: color var(--motion-duration) var(--motion-ease);
}
.link:hover, .link:focus-visible { color: var(--fg); }

/* ---------- Назад + мета ---------- */
.case-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--muted);
  transition: color var(--motion-duration) var(--motion-ease);
}
.back-link:hover, .back-link:focus-visible { color: var(--fg); }
.px-arrow--back { transform: rotate(180deg); }
/* «← Все кейсы» — навигация сайта: у левого края контента, на одной линии с текстом главной (не в колонке чтения) */

/* ---------- Hero: Label/M → H1 → Subtitle/1 ---------- */
.case-hero { padding-block: var(--space-48) var(--space-32); }
.case-hero__text {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.case-hero__text .subtitle-1 { margin-top: var(--space-12); max-width: 28em; }

/* Результаты — сразу под заголовком, в пунктирной рамке (как блок «было | стало» на главной), поля 24 (угол 1:1).
   Та же рамка — у цифр «было / стало» в разделе «Результат». Фактоид: Label/M → H2/H3 → Text/S, внутри space/8 */
.case-results { padding-block: var(--space-48) var(--space-32); }  /* после обложки — 48, как граница крупного блока */
.factoid { display: flex; flex-direction: column; gap: var(--space-8); }
/* Рамка выделения (смысл): главный результат кейса — крестики TL и BR, точки TR и BL на углах пунктира */
.result-box {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24) var(--gutter);
  padding: var(--space-24);
}

/* О проекте: компания, тип, год, команда, платформа — без плашки, справочно; «Что я делал» — на всю строку */
.case-meta { padding-bottom: var(--space-48); }
.project {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24) var(--gutter);
}
.meta-pair--wide { grid-column: 1 / -1; }
.meta-pair { display: flex; flex-direction: column; gap: var(--space-8); }

/* Обложка — сразу под заголовком, в ширину контента (как картинки разделов), «углубление» со свечением;
   внутри видео или картинка */
.case-cover {
  margin-inline: var(--content-pad);
  background: radial-gradient(60% 70% at 50% 85%, var(--glow), var(--cover));
  padding: var(--space-48) var(--content-pad);
}
.case-cover > img { width: 100%; height: auto; }

/* Видео: сначала постер с кнопкой, плеер YouTube грузится только по клику */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--cell); overflow: hidden; }
.video__poster, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: var(--space-8);
  background: var(--poster-btn);
  color: var(--on-poster-btn);
}
/* Постер синий: синяя кнопка и синяя обводка фокуса на нём теряются */
.video__play:hover, .video__play:focus-visible { background: var(--poster-btn-hover); }
.video__play:focus-visible { outline-color: var(--on-poster-btn); }
.px-play { width: var(--space-12); height: var(--space-16); flex: none; }  /* пиксельный треугольник, сетка 5 × 7 */

/* ---------- Раздел: подпись Label/L с номером → H3 → текст, одна колонка ---------- */
.section { padding-block: var(--space-48); }  /* граница раздела: больше любого отступа внутри, без линии */
.section__aside, .section__body, .section__wide { grid-column: 1 / -1; }
.section__aside { margin-bottom: var(--space-8); }   /* подпись → заголовок */
.section__label { color: var(--muted); }
.section__body > * + * { margin-top: var(--space-16); }                 /* абзац → абзац, до и после списка */
.section__body > :is(.callout, .numbers) { margin-top: var(--space-32); }  /* текст ↔ вставка, цифры */
.section__body > :is(.callout, .numbers) + * { margin-top: var(--space-32); }
.section__body > .list-intro + .list { margin-top: var(--space-12); }      /* вводная фраза ближе к списку */
.section__body > .h3 + * { margin-top: var(--space-24); }                  /* заголовок → любое содержимое: больше абзаца */
.section__wide, .section__wide + .section__body { margin-top: var(--space-32); }

/* Списки: маркер «—» в колонке 24 / номер Label/S в колонке 32, перенос — по тексту */
.list { display: flex; flex-direction: column; gap: var(--space-12); }
.list > li { display: grid; grid-template-columns: var(--space-24) 1fr; align-items: baseline; }  /* маркер — по базовой линии первой строки */
.list > li::before { content: '—'; color: var(--muted); }
.list--num { counter-reset: item; }
.list--num > li { grid-template-columns: var(--space-32) 1fr; counter-increment: item; }
.list--num > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--label-s-size);
  line-height: var(--label-lh);
  letter-spacing: 0.1em;
}
.section__body strong { font-weight: 400; color: var(--fg); }  /* вводное слово абзаца — Regular на фоне Light */

/* Картинка на сцене: фон cell, поля 24, подпись Text/S muted через space/8. Картинки — на всю ширину контента */
.figure { display: flex; flex-direction: column; gap: var(--space-8); }
.figure__stage { background: var(--cell); padding: var(--space-24); }
.figure__stage img { width: 100%; height: auto; margin-inline: auto; }
/* Зацикленное видео на сцене: без интерфейса, как картинка */
.figure__video { width: 100%; height: auto; vertical-align: top; pointer-events: none; }  /* display задают классы темы */
.figure__video::-webkit-media-controls-start-playback-button { display: none; }  /* iOS в режиме энергосбережения не рисует кнопку */
.figure figcaption { color: var(--muted); max-width: 40em; }

/* Схема: сцена cover, поля 32, по ширине блока; по клику — на весь экран */
.figure--diagram .figure__stage { background: var(--cover); padding: var(--space-32); }
.figure__zoom {
  display: block;
  width: 100%;
  cursor: zoom-in;
  transition: --dash-color var(--motion-duration) var(--motion-ease);
}

/* Просмотр на весь экран: схема в натуральную величину, прокрутка в обе стороны */
.zoom {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cover);
  color: var(--fg);
}
.zoom::backdrop { background: var(--cover); }
.zoom__scroll { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; cursor: zoom-out; }
:root.is-zoomed { overflow: hidden; }  /* пока открыт просмотр, страница под ним не прокручивается */
.zoom__scroll img { width: var(--diagram-w); max-width: none; height: auto; margin: var(--space-64) auto; }
.zoom--fit .zoom__scroll img { width: auto; max-width: calc(100% - var(--space-64)); }  /* скриншот — в ширину экрана, без прокрутки вбок */
.zoom__close { position: fixed; top: var(--space-16); right: var(--space-16); }

/* Галерея: картинки на всю ширину контента по одной, листаются стрелками или свайпом; по клику — на весь экран */
.gallery { display: flex; flex-direction: column; gap: var(--space-16); }
.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: start; }
.gallery__nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16); }  /* между контурными кнопками — 16 */
.gallery__nav[hidden] { display: none; }
.gallery__count { color: var(--muted); }
.gallery__btn:disabled { border-color: var(--line); color: var(--muted); background: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } }

/* Вставка: Subtitle/2, линия 2 px accent-text, отступ текста 24 */
.callout {
  padding-left: var(--space-24);
  background: linear-gradient(var(--accent-text), var(--accent-text)) left / var(--accent-line) 100% no-repeat;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Карточки инсайтов */
.cards { display: grid; gap: var(--space-24); }
.card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); background: var(--cell); }

/* Цифры «было / стало» в тексте: два фактоида рядом в пунктирной рамке .result-box */
.result-box > .scale-row { grid-column: 1 / -1; }  /* шкала изменения под обоими фактоидами */
/* Легенда шкалы: перед «Было» — тёмный сегмент, перед «Стало» — синий, как в шкале */
.legend { display: flex; align-items: center; gap: var(--space-8); }
.legend::before { content: ""; flex: none; width: var(--scale-seg); height: var(--scale-h); }
.legend--before::before { background: var(--fg); }
.legend--after::before { background: var(--accent-text); }

/* ---------- Следующий кейс: плашка cell в колонке чтения, H4 — мельче заголовков разделов ---------- */
.next { padding-block: var(--space-48) var(--space-64); }
.next-case {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--cell);
}
.next-case__text { display: flex; flex-direction: column; gap: var(--space-8); }
.next-case .px-arrow { opacity: 0; transition: opacity var(--motion-duration) var(--motion-ease); }
/* Наведение = фокус: появляется стрелка «куда ведёт», фон не меняется */
.next-case:hover .px-arrow, .next-case:focus-visible .px-arrow { opacity: 1; }

/* ---------- Колонка чтения: весь текст кейса шириной --reading по центру контента ---------- */
.case-hero__text, .project, .section__aside, .section__body { justify-self: center; width: 100%; max-width: var(--reading); }
/* Рамка результатов и «Следующий кейс»: текст на линии колонки, рамка выходит за неё на своё поле (tablet+) */
.case-results .result-box, .next-case { justify-self: center; width: min(100%, var(--reading)); }
.section__wide { grid-column: 1 / -1; }

/* ---------- Оглавление: вне холста, закреплено слева под шапкой, видно всегда; только на широком экране (1280+) ---------- */
.toc { display: none; }
.toc__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
/* Видно только в зоне разделов: обложка, hero и футер шире контента — оглавление наезжало бы на них */
.toc { opacity: 0; visibility: hidden; transition: opacity var(--motion-duration) var(--motion-ease), visibility 0s var(--motion-duration); }
.toc--visible { opacity: 1; visibility: visible; transition: opacity var(--motion-duration) var(--motion-ease); }
.toc__link { color: var(--muted); transition: color var(--motion-duration) var(--motion-ease); }
.toc__link:hover, .toc__link:focus-visible, .toc__link[aria-current="true"] { color: var(--fg); }

/* ================= Tablet: 8 колонок ================= */
@media (min-width: 600px) {
  /* Рамка выходит за колонку на своё поле, текст стоит на общей левой линии (как плашки hero на главной) */
  .section__body .result-box { margin-inline: calc(var(--space-24) * -1); }
  .case-results .result-box, .next-case { width: calc(min(100%, var(--reading)) + var(--space-24) * 2); }
  .project { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr 1fr; }
}

/* ================= Desktop: 12 колонок =================
   Холст 1024, контент 960. Текст — в колонке чтения 672 по центру (правила выше), картинки, видео, схемы — 960. */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Wide: 1280+ — оглавление ================= */
@media (min-width: 1280px) {
  /* Прижато к контенту: пункты выровнены вправо, за space/24 до картинок (левого края контента), по центру экрана по вертикали.
     Показывается, только пока середина экрана — в разделах (main.js).
     Ширина — по самому длинному пункту, но не шире поля слева (от края экрана тоже space/24). */
  .toc {
    display: block;
    position: fixed;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    right: calc((100vw + var(--canvas-max)) / 2 - var(--content-pad) + var(--space-24));
    width: max-content;
    text-align: right;  /* каждый пункт прижат к контенту */
    max-width: calc((100vw - var(--canvas-max)) / 2 + var(--content-pad) - var(--space-24) * 2);
  }
}


/* ================= Элементы кейса «Огнеборец» ================= */

/* Обложка-картинка узкая (телефоны): по центру сцены обложки, вдвое меньше файла */
.case-cover > .cover-phones { width: var(--phone-w); max-width: calc(var(--reading) / 2); margin-inline: auto; }

/* Скриншот телефона на сцене: доля ширины сцены, по центру */
.figure--phone .figure__stage { text-align: center; }  /* видео строчное: центрируем текстом, display задают классы темы */
.figure--phone .figure__stage :is(img, video) { width: var(--phone-w); margin-inline: auto; }
.figure--phone .figure__video { border-radius: var(--phone-radius); }  /* углы записи экрана — по рамке телефона (исключение из «без скруглений»: у записи чёрные углы) */

/* Три записи экрана телефона в ряд: 3 × 4 колонки на desktop, на телефоне друг под другом */
.trio { display: grid; gap: var(--space-32); }
/* телефон того же размера, что в «Работа звена / Время вышло»: в стопке — доля сцены, в ряд по 4 колонки — крупнее, сцена уже */

/* Сравнение двух состояний: подпись Label/M над сценой (space/8); на desktop — 6 + 6 с вертикальным пунктиром */
.compare { display: grid; gap: var(--space-32); }
.compare__item { display: flex; flex-direction: column; gap: var(--space-8); }
.compare__item > .label-m { color: var(--muted); }

/* Шаги постового: карточки cell, крупная контурная цифра линией line — декор, порядок задаёт <ol> */
.steps { display: grid; gap: var(--space-24); list-style: none; padding: 0; counter-reset: step; }
.step {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;  /* пропорции плашки: 16 : 9 на телефоне, 4 : 3 на планшете, 1 : 1 на desktop */
  padding: var(--space-24);
  background: var(--cell);
  counter-increment: step;
}
.step > p { position: relative; z-index: 1; max-width: 16em; }
.step::after {
  content: counter(step);
  position: absolute;
  right: var(--space-24);
  bottom: calc(var(--step-num-size) * -0.2);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-num-size);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: var(--line-width) var(--line);
}

/* Интервью: на телефоне и планшете — аккордеон (каждый вопрос раскрывается сам), на desktop — таблица «вопрос + три ответа» */
.interview__head { display: none; }
.interview__row { padding-block: var(--space-16); }
.interview__row:last-child { --ln-b: var(--dash-h) bottom / 100% var(--line-width) no-repeat; }  /* пунктир и под последним вопросом */
.interview__q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  cursor: pointer;
  list-style: none;
  font-weight: 400;
}
.interview__q::-webkit-details-marker { display: none; }
.px-toggle { width: var(--px-icon); height: var(--px-icon); flex: none; color: var(--muted); align-self: center; }
.interview__row[open] .px-toggle__v { display: none; }  /* «+» → «−» */
.interview__q:hover .px-toggle, .interview__q:focus-visible .px-toggle { color: var(--fg); }
.interview__a { display: grid; gap: var(--space-16); padding-top: var(--space-16); }
.interview__answer { display: flex; flex-direction: column; gap: var(--space-4); }
.interview__answer > .label-s { color: var(--muted); }

@media (min-width: 600px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
  .trio .figure__stage :is(img, video) { width: calc(var(--phone-w) * 1.6); }
  .step { aspect-ratio: 1; }
  .compare { grid-template-columns: 1fr 1fr; gap: var(--gutter); }

  /* Таблица: вопрос — первая колонка, ответы — три колонки; имена — в шапке, у ответов скрыты (остаются для скринридера) */
  /* Таблица с полной сеткой пунктиром (исключение, как блок «было | стало»): 4 равные колонки, поля ячейки 24 / 16.
     У <details> содержимое лежит в отдельном слоте, сеткой его не разложить: вопрос — слева обтеканием, ответы — сеткой справа */
  .interview {
    --ln-l: var(--dash-v) left / var(--line-width) 100% no-repeat;
    --ln-r: var(--dash-v) right / var(--line-width) 100% no-repeat;
  }
  .interview__head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 25%;  /* верхняя линия — на всю ширину, и над пустой ячейкой вопроса */
    --ln-t: var(--dash-h) top / 100% var(--line-width) no-repeat;
  }
  .interview__head > *, .interview__answer { --ln-l: var(--dash-v) left / var(--line-width) 100% no-repeat; }
  .interview__head > * { padding: var(--space-16); }
  .interview__row { padding-block: 0; display: flow-root; }
  .interview__q { float: left; width: 25%; padding: var(--space-24) var(--space-16); cursor: default; }
  .px-toggle { display: none; }
  .interview__a { margin-left: 25%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 0; }
  .interview__answer { padding: var(--space-24) var(--space-16); }
  .interview__answer > .label-s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Скринфлоу на весь экран — в натуральную величину файла, прокрутка по обеим осям */
.zoom--natural .zoom__scroll img { width: auto; max-width: none; margin: var(--space-64); }