/* ============================================================
   CASE PAGE — уровень A
   Anna Gorodetskaya — Portfolio · 19 августа 2026

   Страница кейса — единственное место на сайте, где длинный текст
   читается подряд. Поэтому она не пытается быть композицией:
   постоянная левая рейка ярлыков, справа колонка в 66 знаков,
   и один-единственный сбой ритма — блок My Role.

   Этот сбой намеренный. §5 спецификации называет My Role «самым
   важным блоком на каждой странице проекта», и если все блоки
   набраны одинаково, самым важным становится первый. Крупный
   кегль здесь — не украшение, а иерархия.
   ============================================================ */

/* ------------------------------------------------------------
   ШАПКА КЕЙСА
   ------------------------------------------------------------ */

.case__head {
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: var(--s-6);
}

.case__tier {
  color: var(--ink-55);
  margin-bottom: var(--s-3);
}

.case__title {
  /* та же ось ширины, что у титула на главной: заголовок кейса и
     заголовок сайта — один голос */
  --display-wdth: 114;
  max-width: 16ch;
  margin-bottom: var(--s-3);
}

.case__sub {
  color: var(--ink-55);
  margin-top: calc(var(--s-3) * -1);
  margin-bottom: var(--s-3);
}

.case__one {
  max-width: 46ch;
  color: var(--ink-80);
  margin-bottom: var(--s-6);
}

.case__meta {
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-12);
}

.case__visit { margin-top: var(--s-4); }

/* ------------------------------------------------------------
   ГЕРОЙ
   Если очищенного кадра нет — печатается пунктирная дыра с
   подписью, а не заглушка под картинку. Разница видна на ревью:
   первое означает «ассета не существует», второе «ассет не
   доехал». Пока идёт аудит прав это два разных состояния.
   ------------------------------------------------------------ */

.case__hero { margin-bottom: var(--s-8); }
/* высота дыры ограничена: в родной пропорции героя пустой
   пунктирный короб занимает больше полуэкрана и страница читается
   как сломанная, а не как честно неполная */
.case__hero-gap {
  margin-bottom: var(--s-8);
  aspect-ratio: auto;
  height: clamp(160px, 20vw, 300px);
}

/* ------------------------------------------------------------
   БЛОКИ
   ------------------------------------------------------------ */

.case__body { padding-bottom: var(--s-12); }

.case__block {
  padding-block: var(--s-6);
  border-top: 1px solid var(--ink-12);
  align-items: start;
}

.case__block .t-meta { color: var(--ink); }
.case__block .t-body { color: var(--ink-80); }

/* My Role — единственный блок, который выпадает из ритма */
.case__lead {
  --display-wdth: 100;
  --display-wght: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: min(100%, 30ch);
}

.case__sources {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.case__sources a { color: var(--ink-80); }

/* ------------------------------------------------------------
   МАТЕРИАЛЫ
   ------------------------------------------------------------ */

.case__media {
  padding-block: var(--s-6);
  border-top: 1px solid var(--ink-12);
}

.case__media-in {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ------------------------------------------------------------
   ДЫРЫ В АССЕТАХ
   Печатаются на странице сознательно: пока аудит прав открыт,
   кейс обязан показывать, чего в нём не хватает. Блок выглядит
   как служебная пометка, а не как контент, и снимается одним
   флагом в сборке перед публикацией.
   ------------------------------------------------------------ */

.case__gaps {
  margin-top: var(--s-8);
  padding: var(--s-4) 0;
  border-top: 1px dashed var(--ink-30);
  border-bottom: 1px dashed var(--ink-30);
  align-items: start;
}

.case__gaps .t-meta { color: var(--ink-55); }

.case__gaps-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  color: var(--ink-55);
}
.case__gaps-list li { padding-left: 1.4em; text-indent: -1.4em; }
.case__gaps-list li::before { content: "— "; color: var(--ink-30); }

.case__gaps-note {
  margin-top: var(--s-2);
  color: var(--ink-30);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   ПЕРЕХОД ДАЛЬШЕ
   ------------------------------------------------------------ */

.case__next {
  padding-block: var(--s-8);
  border-top: 1px solid var(--ink);
}

/* ------------------------------------------------------------
   АДАПТИВ
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .case__title { max-width: none; }
  .case__block { padding-block: var(--s-4); }
  .case__block .t-meta { margin-bottom: var(--s-2); }
  .case__gaps .t-meta { margin-bottom: var(--s-2); }
  .case__lead { max-width: none; }
}

/* ============================================================
   НАВИГАЦИЯ КЕЙСА — ТЗ №2 §8.3
   Возврат в project wall, счётчик 01 / 06, PREV / NEXT и
   контактный CTA. Кейс остаётся отдельным адресом: overlay не
   используется, потому что шаримый и индексируемый URL — прямое
   требование того же параграфа, а страница даёт его без
   подмены истории.
   ============================================================ */

.case__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-6);
}

.case__back { color: var(--ink-55); }
.case__back:hover { color: var(--ink); }
.case__counter { color: var(--ink-55); }

.case__cta {
  padding-top: var(--s-6);
}

.case__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding-block: var(--s-8);
  margin-top: var(--s-8);
  border-top: 1px solid var(--ink);
}

.case__nav-item { display: flex; flex-direction: column; gap: var(--s-1); }
.case__nav-item--next { text-align: right; align-items: flex-end; }
.case__nav-item.is-empty { color: var(--ink-55); }

.case__nav-label {
  color: var(--ink-55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case__nav-title {
  font-size: var(--fs-head);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104, "wght" 620;
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
}

@media (max-width: 720px) {
  .case__top { padding-top: var(--s-4); }
  .case__nav { grid-template-columns: 1fr; }
  .case__nav-item--next { text-align: left; align-items: flex-start; }
}


/* ============================================================
   ШАХМАТНЫЙ ПОТОК СТРАНИЦЫ ПРОЕКТА (7 сентября 2026)

   Заменяет пару «проза в одну колонку + стопка изображений во
   всю ширину». Анна 7 сентября: страница превращалась в
   бесконечный вертикальный скролл из огромных картинок, а сам
   кейс не читался.

   Правило размеров: изображение в строке занимает половину
   полосы и ограничено по высоте, а не по пропорции — родная
   пропорция сохраняется, но кадр 2:3 больше не выдаёт колонку
   в полтора экрана. Ключевой кадр один на страницу.
   ============================================================ */

.cs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding-block: var(--s-6);
  border-top: 1px solid var(--ink-12);
}

.cs__text { max-width: 54ch; }

.cs__label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--ink);
}

.cs__text .t-body { color: var(--ink-80); }
.cs__text .t-body + .t-body { margin-top: var(--s-2); }

/* My Role — акцент кеглем и цветом, а не размером во весь экран.
   До 07.09 блок был набран t-d3 с мерой в 30ch: заголовочный
   кегль на восьмидесяти словах давал колонку в половину экрана и
   пустое поле рядом с ней. */
.cs__role {
  font-family: var(--font-text);
  font-size: var(--fs-deck);
  line-height: 1.42;
  font-weight: 480;
  color: var(--ink);
  letter-spacing: -0.004em;
}
.cs__role + .cs__role { margin-top: var(--s-2); }

.cs__list { color: var(--ink-80); display: grid; gap: 4px; }
.cs__list li { padding-left: 1.2em; text-indent: -1.2em; }
.cs__list li::before { content: "— "; color: var(--ink-30); }

/* чередование сторон: текст слева / текст справа */
.cs--left  .cs__text  { grid-column: 1; grid-row: 1; }
.cs--left  .cs__media { grid-column: 2; grid-row: 1; }
.cs--right .cs__text  { grid-column: 2; grid-row: 1; }
.cs--right .cs__media { grid-column: 1; grid-row: 1; }

/* Мера текста (54ch) уже́ своей колонки, и запас всегда падал
   вправо. У левых блоков он приходился на внутреннюю сторону и
   работал как поле, у правых — на внешнюю, и текст вставал
   вплотную к кадру. Прижимаем меру к концу колонки: поле между
   текстом и кадром становится одинаковым с обеих сторон. */
.cs--right .cs__text { justify-self: end; }

/* обзор и роль читают, а не рассматривают — им вся мера */
.cs--wide { grid-template-columns: 1fr; }
.cs--wide .cs__text { max-width: 68ch; }

/* ---- размеры кадров ---------------------------------------
   Высота ограничена сверху, ширина отдана сетке: пропорция
   остаётся родной, а вертикальный кадр перестаёт занимать
   экран целиком. -------------------------------------------- */

.cs__media { max-height: 46vh; width: 100%; }
.cs__media--key { max-height: 62vh; }
.cs__media--small { max-height: 34vh; }

.cs--key { grid-template-columns: 1fr; padding-block: var(--s-4); }

.cs--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding-block: var(--s-4);
}
.cs--pair .cs__media { grid-column: auto; }

@media (max-width: 900px) {
  .cs,
  .cs--pair { grid-template-columns: 1fr; }
  .cs--left .cs__text,
  .cs--right .cs__text,
  .cs--left .cs__media,
  .cs--right .cs__media { grid-column: 1; grid-row: auto; }
  .cs__text { max-width: none; }
  .cs__media { max-height: 52vh; }
  .cs__media--key { max-height: 52vh; }
  .cs__media--small { max-height: 44vh; }
}

/* Ведущий кадр тоже ограничен по высоте: на 16:9 во всю полосу он
   съедал 675 px и первый экран страницы проекта состоял из одной
   картинки. Пропорция остаётся родной, ограничение — по высоте. */
.case__hero { max-height: 62vh; }

@media (max-width: 900px) {
  .case__hero { max-height: 52vh; }
}


/* ============================================================
   РАЗБОР AI-ПРОЕКТА — problem / system / role / result

   Живёт и в панели карточки на главной, и на странице проекта.
   Поэтому правило стоит в case.css: главная подключает его
   вторым файлом, а страница проекта — единственным.
   ============================================================ */

.ain {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-12);
}

.ain__label {
  margin-bottom: var(--s-2);
  color: var(--practice-ai);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ain__list {
  display: grid;
  grid-template-columns: minmax(6.5em, 8em) 1fr;
  gap: var(--s-1) var(--s-3);
  align-items: baseline;
}

.ain__list dt {
  color: var(--ink-30);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ain__list dd { color: var(--ink-80); margin: 0; }

.ain__stack {
  margin-top: var(--s-2);
  color: var(--ink-30);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .ain__list { grid-template-columns: 1fr; gap: 2px var(--s-2); }
  .ain__list dd { margin-bottom: var(--s-2); }
}