/* ============================================================
   КЕЙС УРОВНЯ A — ТЕМА JELLY
   Anna Gorodetskaya — Portfolio · 11 сент 2026

   pageCss страницы проекта в сборке THEME=jelly. Замещает case.css
   целиком, как case-light.css в светлой теме. Разметка — шаблон
   case-a-jelly.html; строки рассказа и лист материалов печатает
   caseFlowJelly() в build.mjs.

   Главное правило файла — рамки. Кадр любой пропорции стоит в
   рамке постоянного размера и вписывается целиком: горизонтальный
   по ширине, вертикальный по высоте, остаток — стеклянная подложка.
   Ничего не обрезается и не растягивается. Исключения два, и оба
   горизонтальные: ведущий и ключевой кадры идут в родной пропорции.

   Файл подключается и на главной — вторым, ради разбора AI-проекта
   (.ain) в панели карточки. Базовый блок .ain внизу повторяет
   case.css значение в значение: главная уже принята.
   ============================================================ */

.jcase { --frame-pad: 22px; }

/* Пропорции тех же классов, что в base.css, но числом: рамке
   ведущего и ключевого кадра нужно ограничить ширину по высоте
   экрана, а для этого пропорцию надо умножать. */
.jcase .ar-365  { --r: 3.6548; }
.jcase .ar-263  { --r: 2.6277; }
.jcase .ar-243  { --r: 2.4311; }
.jcase .ar-21   { --r: 2.3333; }
.jcase .ar-205  { --r: 2.0461; }
.jcase .ar-19   { --r: 1.9048; }
.jcase .ar-169  { --r: 1.7778; }
.jcase .ar-1610 { --r: 1.6; }
.jcase .ar-32   { --r: 1.5; }
.jcase .ar-43   { --r: 1.3333; }
.jcase .ar-119  { --r: 1.1929; }
.jcase .ar-11   { --r: 1; }
.jcase .ar-45   { --r: 0.8; }
.jcase .ar-23   { --r: 0.6667; }
.jcase .ar-916  { --r: 0.5625; }

/* ------------------------------------------------------------
   ОБЛОЖКА — возврат, счётчик, заголовок, рельс фактов
   ------------------------------------------------------------ */

.jcase__cover {
  padding: 34px var(--margin) 76px;
  background: var(--g-hero);
  border-bottom: 1px solid rgba(181, 118, 155, 0.4);
}

.jcase__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 58px;
}
.jcase__back { color: var(--ink-55); transition: color 0.2s ease; }
.jcase__back:hover { color: var(--accent); }
.jcase__counter { margin: 0; color: var(--ink-55); }

.jcase__cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 6%;
  margin-bottom: 64px;
}
.jcase__tier { margin: 0 0 26px; }

.jcase__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 6.2vw, 100px);
  font-variation-settings: "wght" 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}
.jcase .case__sub {
  margin: 16px 0 0;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-55);
}
.jcase .case__one {
  margin: 28px 0 0;
  max-width: 34ch;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.42;
  letter-spacing: -0.025em;
  color: var(--ink-80);
}
.jcase .case__visit { margin-top: 32px; }

/* Рельс — та же стеклянная плашка, что у CV: пары строками, практики
   пилюлями под ними. Награда, если есть, — акцентом. */
.jcase__rail {
  justify-self: end;
  width: 100%;
  max-width: 440px;
  padding: 8px 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: var(--sheen), var(--lift);
}
.jcase__facts { margin: 0; }
.jcase__rail-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
}
.jcase__rail-row:first-child { border-top: 0; }
.jcase__rail-row dt { margin: 0; color: var(--ink-55); }
.jcase__rail-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.025em;
}
.jcase__rail-row.is-award dd { color: var(--accent); }
.jcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------
   ПОДПИСИ К КАДРАМ
   Строкой меты под рамкой, а не плашкой поверх: поверх подпись
   закрывала бы низ вертикального скриншота. Рамка поэтому не режет
   содержимое за своим краем — картинку скругляет она сама.
   ------------------------------------------------------------ */

.jcase .media { overflow: visible; }
.jcase .media__label {
  position: absolute;
  top: calc(100% + 12px);
  left: 2px;
  right: 2px;
  z-index: 0;
  max-width: none;
  padding: 0;
  text-align: left;
  line-height: 1.5;
  color: var(--ink-55);
}

/* ------------------------------------------------------------
   ВЕДУЩИЙ КАДР — рамка в пропорции из данных, ширина ограничена
   высотой экрана: кадр целиком помещается в окно.

   Пропорция в данных — это кадрирование тёмной темы, а не всегда
   пропорция файла. Обложка Urban Russia размечена 21:9 с фокусом
   left center, а файл вертикальный, 1080x1920: тёмная и светлая
   режут его в полосу. Здесь кадр вписывается целиком на сливовую
   подложку, как в панели главной. Где пропорции совпадают, вписать
   и обрезать — одно и то же.
   ------------------------------------------------------------ */

.jcase__hero { display: flex; justify-content: center; }
.jcase .case__hero,
.jcase .case__hero.bleed {
  width: 100%;
  max-width: calc(76vh * var(--r, 1.7778));
  /* min-height: 0 обязателен. Рамка не режет за краем (иначе не
     видно подписи), а у блока с aspect-ratio и видимым переполнением
     минимальная высота — высота содержимого: вертикальный файл
     растягивал рамку 21:9 до 1313x2335. */
  min-height: 0;
  max-height: none;
  margin: 0 0 30px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, #4A1F45, #2A1330);
  box-shadow: var(--sheen), var(--lift-hover);
}
.jcase .case__hero > img,
.jcase .case__hero > video,
.jcase .case__hero > iframe { border-radius: inherit; }
/* focal пишется в атрибут style и прижимал бы вписанный кадр к
   краю рамки — перебивается только так */
.jcase .case__hero > img,
.jcase .case__hero > video { object-fit: contain; object-position: center !important; }
/* кадр встаёт в рамку абсолютно: в грид-ячейке с авто-строкой
   height: 100% не держался, и вертикальный файл вытекал из рамки
   вниз на всю свою высоту */
.jcase .case__hero > img,
.jcase .case__hero > video,
.jcase .case__hero > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.jcase .case__hero.hov-media:hover img { transform: none; }

/* дыра на месте ведущего кадра — пометка, а не кадр */
.jcase .case__hero-gap {
  width: 100%;
  height: clamp(160px, 20vw, 300px);
  aspect-ratio: auto;
  border: 1px dashed var(--ink-30);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.22);
}
.jcase .media.is-gap .media__label { position: static; text-align: center; }

/* ------------------------------------------------------------
   РАССКАЗ — текст и кадр парами, стороны чередуются
   ------------------------------------------------------------ */

.jcase__story { padding: 84px var(--margin) 76px; background: var(--g-work); }

.jcase .cs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 5.5vw, 88px);
  align-items: center;
  padding: 56px 0 68px;
  border-top: 1px solid var(--rule);
}
.jcase .cs:first-child { padding-top: 0; border-top: 0; }

.jcase .cs--left  .cs__text  { grid-column: 1; grid-row: 1; }
.jcase .cs--left  .cs__media { grid-column: 2; grid-row: 1; }
.jcase .cs--right .cs__text  { grid-column: 2; grid-row: 1; }
.jcase .cs--right .cs__media { grid-column: 1; grid-row: 1; }

.jcase .cs--wide { grid-template-columns: minmax(0, 1fr); }
.jcase .cs__text { max-width: 60ch; }
.jcase .cs--wide .cs__text { max-width: 72ch; }

.jcase .cs__label { margin: 0 0 18px; color: var(--accent); }

.jcase .cs__text .t-body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-80);
}
.jcase .cs__text .t-body + .t-body { margin-top: 14px; }

/* Обзор открывает рассказ — он набран лидом, как текст на About */
.jcase .cs--wide:first-child .t-body {
  max-width: 58ch;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* My Role — самый важный блок страницы (§5 спеки): держится кеглем
   и дисплейным начертанием, а не размером во весь экран */
.jcase .cs__role {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.75vw, 25px);
  font-variation-settings: "wght" 500;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.jcase .cs__role + .cs__role { margin-top: 14px; }

.jcase .cs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.jcase .cs__list li { position: relative; padding-left: 20px; }
.jcase .cs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ------------------------------------------------------------
   РАМКА КАДРА
   Одна пропорция на все строки рассказа. Картинка встаёт в неё
   по своей натуральной пропорции и не крупнее рамки за вычетом
   поля — поэтому её можно скруглить и дать ей тень, как предмету
   на стекле. Видео и эмбед заполняют поле рамки и вписываются.
   ------------------------------------------------------------ */

.jcase .cs__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--sheen), var(--lift);
}
.jcase .cs__media > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--frame-pad));
  max-height: calc(100% - 2 * var(--frame-pad));
  margin: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 16px 30px rgba(67, 26, 60, 0.2);
}
.jcase .cs__media > video,
.jcase .cs__media > iframe {
  position: absolute;
  inset: var(--frame-pad);
  z-index: 1;
  width: calc(100% - 2 * var(--frame-pad));
  height: calc(100% - 2 * var(--frame-pad));
  object-fit: contain;
  border: 0;
  border-radius: 12px;
}

/* Ключевой кадр — всегда горизонтальный (так его выбирает сборка),
   поэтому идёт в родной пропорции, без поля и без подложки */
.jcase .cs--key { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.jcase .cs__media--key {
  aspect-ratio: var(--r, 1.7778);
  max-width: calc(72vh * var(--r, 1.7778));
  border: 0;
  background: linear-gradient(135deg, #4A1F45, #2A1330);
  box-shadow: var(--sheen), var(--lift-hover);
}
.jcase .cs__media--key > img,
.jcase .cs__media--key > video,
.jcase .cs__media--key > iframe {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center !important;
  border-radius: inherit;
  box-shadow: none;
}
.jcase .cs__media--key.hov-media:hover img { transform: none; }

/* ------------------------------------------------------------
   ЛИСТ МАТЕРИАЛОВ — всё, что не разошлось по рассказу
   Рамки одной высоты. Вертикальный и квадратный кадр берут одну
   колонку, горизонтальный две; неполную строку добирает последний
   кадр (jm--span-N считает сборка).
   ------------------------------------------------------------ */

.jcase__sheet { padding: 76px var(--margin) 100px; background: var(--g-about); }
.jcase__sheet-title { margin: 0 0 30px; color: var(--ink-80); }

.jcase__sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(240px, 28vw, 440px);
  gap: 64px 24px;
}
.jcase__sheet .cs__media { aspect-ratio: auto; height: 100%; }
.jcase .jm--span-2 { grid-column: span 2; }
.jcase .jm--span-3 { grid-column: span 3; }
.jcase .jm--span-4 { grid-column: span 4; }

/* ------------------------------------------------------------
   РАЗБОР AI-ПРОЕКТА, ИСТОЧНИКИ, ДЫРЫ
   ------------------------------------------------------------ */

.jcase .ain {
  margin: 8px 0 0;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.3);
  box-shadow: var(--sheen), var(--lift);
}
.jcase .ain__label { margin: 0 0 18px; color: var(--accent); }
.jcase .ain__list { grid-template-columns: 140px minmax(0, 1fr); gap: 12px 28px; }
.jcase .ain__list dt { color: var(--ink-55); }
.jcase .ain__list dd { font-size: 16px; line-height: 1.7; }
.jcase .ain__stack { color: var(--ink-55); }

.jcase .case__block {
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.jcase .case__block .t-meta { margin: 0; color: var(--ink-55); }
.jcase .case__sources { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jcase .case__sources a { color: var(--accent); }

/* внутренний аудит ассетов — только в ревью-сборке */
.jcase .case__gaps {
  margin-top: 34px;
  padding: 24px 28px;
  border: 1px dashed var(--ink-30);
  border-radius: var(--r-card);
  align-items: start;
}
.jcase .case__gaps .t-meta { margin: 0; color: var(--ink-55); }
.jcase .case__gaps-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink-55); }
.jcase .case__gaps-list li { padding-left: 1.4em; text-indent: -1.4em; }
.jcase .case__gaps-list li::before { content: "\2014  "; color: var(--ink-30); }
.jcase .case__gaps-note { margin: 10px 0 0; color: var(--ink-30); font-style: italic; }

/* ------------------------------------------------------------
   PREV / NEXT — две стеклянные карточки на тихом грунте
   ------------------------------------------------------------ */

.jcase .case__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0;
  padding: 56px var(--margin);
  background: var(--g-quiet);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.jcase .case__nav-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--sheen), var(--lift);
  color: var(--ink);
  transition: transform var(--dur-mid, 0.35s) var(--ease-out, ease),
              box-shadow var(--dur-mid, 0.35s) var(--ease-out, ease);
}
.jcase .case__nav-item:hover { transform: translateY(-4px); box-shadow: var(--sheen), var(--lift-hover); }
.jcase .case__nav-item--next { text-align: right; align-items: flex-end; }
.jcase .case__nav-label { color: var(--ink-55); letter-spacing: 0.12em; text-transform: uppercase; }
.jcase .case__nav-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 34px);
  font-variation-settings: "wght" 500;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

/* ============================================================
   РАЗБОР AI-ПРОЕКТА — базовый блок
   Живёт и в панели карточки на главной: главная подключает этот
   файл вторым. Значения — как в case.css, панель уже принята;
   её собственные поправки стоят в home-jelly.css (.panel .ain).
   ============================================================ */

.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: 1024px) {
  .jcase__cover-grid { gap: 4%; }
  .jcase__sheet-grid { gap: 56px 18px; }
}

@media (max-width: 860px) {
  .jcase__cover { padding: 24px var(--margin) 52px; }
  .jcase__bar { margin-bottom: 38px; }
  .jcase__cover-grid { grid-template-columns: 1fr; align-items: start; gap: 32px; margin-bottom: 40px; }
  .jcase__rail { justify-self: stretch; max-width: none; }
  .jcase .case__hero,
  .jcase .case__hero.bleed { max-width: none; }

  .jcase__story { padding: 56px var(--margin) 52px; }
  .jcase .cs { grid-template-columns: 1fr; gap: 26px; align-items: start; padding: 40px 0 60px; }
  .jcase .cs--left .cs__text,
  .jcase .cs--right .cs__text,
  .jcase .cs--left .cs__media,
  .jcase .cs--right .cs__media { grid-column: 1; grid-row: auto; }
  .jcase .cs__text,
  .jcase .cs--wide .cs__text { max-width: none; }
  /* на телефоне рамка квадратная: в 4:3 вертикальный кадр
     сжимался до спичечного коробка */
  .jcase .cs__media { aspect-ratio: 1 / 1; }
  .jcase .cs__media--key { aspect-ratio: var(--r, 1.7778); max-width: none; }

  .jcase__sheet { padding: 56px var(--margin) 76px; }
  .jcase__sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(220px, 70vw, 360px);
    grid-auto-flow: row dense;
    /* подпись в узкой колонке встаёт в три строки — зазор под неё */
    gap: 80px 14px;
  }
  .jcase .jm--span-3,
  .jcase .jm--span-4 { grid-column: span 2; }

  .jcase .ain__list { grid-template-columns: 1fr; gap: 4px 0; }
  .jcase .ain__list dd { margin-bottom: 10px; }

  .jcase .case__nav { grid-template-columns: 1fr; padding-block: 40px; }
  .jcase .case__nav-item--next { text-align: left; align-items: flex-start; }
}

@media (max-width: 560px) {
  .jcase { --frame-pad: 14px; }
  .jcase__rail { padding: 6px 22px 20px; }
  .jcase__rail-row { grid-template-columns: 1fr; gap: 4px; }
  .jcase .ain { padding: 24px 22px; }
  .jcase .case__nav-item { padding: 22px 24px; }
}