/* case.css — страницы кейсов (work/*.html).
   Подключается только на work/*.html, после pages.css.

   ТОКЕНЫ. Все цвета берутся из base.css — своей палитры у кейса нет.
   Соответствие имён прототипа и проекта:
     --bg        → --bg              --t-1  → --text
     --surface-1 → --surface-2       --t-2  → --text-secondary
     --surface-2 → --surface-3       --t-3  → --text-muted
     --surface-3 → --surface         --line → --border
     --accent    → --accent          --page → --container
   Шкала отступов прототипа (--s2..--s14) не заводилась: в проекте уже есть
   рабочая --s-1..--s-10 с шагом 4/8/12/16/24/32/48/64/96/128. Две шкалы,
   различающиеся одним дефисом, — гарантированная путаница при правках.
   Единственное значение, которого в проектной шкале нет (56px — отступ
   рельса под хедером), задано ниже явной переменной. */

.case {
  /* Ширина рельса и промежуток до текста — переопределяются по брейкпоинтам */
  --rail: 100%;
  --gap: var(--s-5);
  /* Липкий рельс встаёт на 120px от верха окна. Константа именно суммарная:
     --header-h меняется по ширине (56px, от 90em — 64px), поэтому
     «хедер + отступ» давал бы то 112px, то 120px. max() страхует случай,
     если хедер когда-нибудь станет выше 96px. */
  --rail-top: max(120px, calc(var(--header-h) + var(--s-5)));
  /* Ширина колонки с текстом */
  --body-max: 760px;
}

/* ─────────────────────────────────────────────────────────────────
   Мета-полоса: клиент и инструменты (и «Сайт» там, где он есть).
   Живёт в начале секции «Задача», а не в первом экране: там ей нечем было
   дышать, а здесь она отвечает на вопросы ровно тогда, когда они возникают.
   Тип и год отсюда убраны — они стоят в служебной строке .case-bar под
   шапкой, и держать их в двух местах значило бы расходиться при правке.
   ───────────────────────────────────────────────────────────────── */

.meta {
  --meta-gap: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start; /* длинное значение не тянет за собой соседа по ряду */
  gap: var(--meta-gap) var(--s-6);
  margin: 0 0 var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 0.5px solid var(--border);
}

/* Две колонки — от 640px: Клиент и Инструменты встают в один ряд, «Сайт»
   уходит под них во всю ширину. Ниже 640px — одна колонка, тот же порядок. */
@media (min-width: 40em) {
  .meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* Третье поле («Сайт» у «Архитектуры двора») — отдельной строкой во всю
   ширину: в пару к соседу оно не встаёт, а живая ссылка на сделанный сайт —
   слишком сильный аргумент, чтобы ронять её в пустую половину ряда. */
.meta__item--wide {
  grid-column: 1 / -1;
}

.meta__label {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta__value {
  display: block;
  font-size: 1.0125rem;
  color: var(--text);
  margin: 0; /* сброс отступа <dd> */
}

/* Стрелка в ссылке «Назад» — инлайн-SVG, наследует цвет текста */
.back-nav__icon {
  flex: none;
  margin-right: 0.5em;
  vertical-align: -0.1em;
}

/* ─────────────────────────────────────────────────────────────────
   Блок кейса: рельс + тело
   ───────────────────────────────────────────────────────────────── */

.block {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  padding-inline: var(--gutter);
  padding-block: var(--s-9);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
}

.block + .block { padding-block-start: 0; }

/* На мобильном рельс не липнет — position:static из базы (см. медиа-запрос
   от 56.25em, где включается sticky). */
.block__rail {
  /* align-self:start обязателен: без него элемент растягивается на всю высоту
     грид-ячейки, sticky получает нулевой ход и не срабатывает. */
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.block__num {
  font-size: var(--label);
  letter-spacing: 0.14em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.block__label {
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

/* Короткая подпись под названием блока — только в двухколоночном режиме */
.block__note {
  display: none;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--s-3) 0 0;
}

.block__body {
  max-width: var(--body-max);
}

/* ─────────────────────────────────────────────────────────────────
   Типографика тела. Ровно четыре типа текста, больше не вводить.
   ───────────────────────────────────────────────────────────────── */

/* Утверждение — одно на блок */
.block__body .claim {
  font-size: 1.6171875rem; /* 23px */
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 var(--s-5);
}

/* Курсивная строка — необязательная */
.block__body .italic {
  font-size: 1.1953125rem; /* 17px */
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--s-5);
}

/* Основной текст. Интерлиньяж 1.7 — на кириллице меньше нельзя. */
.block__body p {
  font-size: 1.1601563rem; /* 16.5px */
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 var(--s-4);
}

.block__body p:last-child { margin-bottom: 0; }

/* Лид-ин в начале абзаца */
.block__body p b {
  font-weight: 500;
  color: var(--text);
}

/* Тот же основной текст, набранный списком, — пятого типа не заводим:
   метрики совпадают с .block__body p, отличается только маркер. */
.block__body ul {
  margin: 0 0 var(--s-4);
  padding: 0;
}

.block__body ul:last-child { margin-bottom: 0; }

.block__body li {
  position: relative;
  padding-left: var(--s-5);
  font-size: 1.1601563rem; /* 16.5px */
  line-height: 1.7;
  color: var(--text-secondary);
}

.block__body li + li { margin-top: var(--s-2); }

.block__body li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* Группа «утверждение + 2–3 абзаца» — в блоке «Результат» */
.group + .group { margin-top: var(--s-8); }

/* ─────────────────────────────────────────────────────────────────
   Медиа-слоты
   ───────────────────────────────────────────────────────────────── */

.stack {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.stack:first-child { margin-top: 0; }

/* Текст после кадров — на том же расстоянии, что и кадры после текста */
.stack + p,
.stack + ul,
.stack + .claim,
.stack + .italic,
.stack + .group { margin-top: var(--s-7); }

/* Плашка кадра: пропорцию держит контейнер, поэтому страница не прыгает,
   пока картинка грузится. */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2);
}

.ph > img,
.ph > video,
.ph > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ph--shot  { aspect-ratio: 3 / 2; }
.ph--wide  { aspect-ratio: 32 / 15; }
.ph--pair  { aspect-ratio: 19 / 15; }
.ph--low   { aspect-ratio: 16 / 9; }
.ph--tallr { aspect-ratio: 7 / 8; }

/* Кадр без заданной пропорции — для длинных скриншотов страницы целиком:
   такую картинку нельзя обрезать по фиксированной пропорции, иначе от
   секции остаётся полоса. Место всё равно резервируется заранее — из
   width/height самой картинки, так что скачка при загрузке нет. */
.ph--free { aspect-ratio: auto; }

.ph--free > img,
.ph--free > picture,
.ph--free > picture > img { height: auto; }

/* Компоновка: две равные колонки */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

/* Компоновка: слева столбец из двух низких кадров, справа один вертикальный */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.mosaic__col {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

/* Подпись под кадром */
.stack figcaption,
.shot-note {
  font-size: var(--small);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: var(--s-3);
}

.stack figure { margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   Фирменный знак на своём фоне.
   Единственное светлое пятно на тёмной странице — так и задумано.
   ───────────────────────────────────────────────────────────────── */

/* Пропорция зависит от ширины. В полосе 32:15 связка «год + знак + две
   подписи» помещается только от 640px: ниже средний ряд (1fr) сжимается
   меньше собственной высоты знака, и знак вылезает из своей ячейки на
   подписи — замерено 9px на 390px и 16px на 320px, где подписи ещё и
   переносятся каждая в две строки. Знак при этом не сплющивается
   (пропорция 1280:630 держится), поэтому на белом фоне наложение видно
   не всегда — но оно есть, и на кейсе с плотным знаком вылезет.
   До 40em карточке дана высота 3:2 — там же, где .meta переходит в две
   колонки, она возвращается к полосе. */
.brandcard {
  aspect-ratio: 3 / 2;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3vw, 32px);
  color: #111111;
}

@media (min-width: 40em) {
  .brandcard { aspect-ratio: 32 / 15; }
}

/* Селекторы с .brandcard — иначе .block__body p перебивает их по
   специфичности и подписи уезжают в цвет тёмной темы на белой карточке. */
.brandcard .brandcard__year,
.brandcard .brandcard__foot {
  font-size: var(--label);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0;
}

.brandcard__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 0;
}

.brandcard__mark {
  display: block;
  max-width: min(58%, 320px);
  height: auto;
  object-fit: contain;
}

.brandcard .brandcard__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

/* ─────────────────────────────────────────────────────────────────
   Другие проекты
   ───────────────────────────────────────────────────────────────── */

.more {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-9);
  border-top: 0.5px solid var(--border);
}

.more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.more__title {
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.more__all {
  font-size: var(--small);
  color: var(--text-muted);
  white-space: nowrap;
}

.more__all:hover,
.more__all:focus-visible { color: var(--accent-text); }

.more__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.pcard { display: block; }

.pcard__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--surface-2);
  margin-bottom: var(--s-4);
}

.pcard__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover .pcard__frame img { transform: scale(1.03); }

.pcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.pcard__name {
  font-size: 1.546875rem; /* 22px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--transition);
}

.pcard:hover .pcard__name,
.pcard:focus-visible .pcard__name { color: var(--accent-text); }

.pcard__type {
  font-size: var(--small);
  color: var(--text-muted);
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .pcard__frame img { transition: none; }
  .pcard:hover .pcard__frame img { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Адаптив
   ───────────────────────────────────────────────────────────────── */

/* от 900px — две колонки, рельс липнет */
@media (min-width: 56.25em) {
  .case {
    --rail: 220px;
    --gap: 36px;
  }

  .block__rail {
    position: sticky;
    top: var(--rail-top);
    display: block;
  }

  .block__num {
    display: block;
    margin-bottom: var(--s-2);
  }

  .block__note { display: block; }
}

/* от 1100px — рельс шире, промежуток больше */
@media (min-width: 68.75em) {
  .case {
    --rail: 300px;
    --gap: 48px;
  }
}

/* до 900px — одна колонка */
@media (max-width: 56.24em) {
  .block {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-8);
  }

  .two,
  .mosaic,
  .more__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .more { padding-block: var(--s-8); }
}