/* ==========================================================================
   Страница кейса — Figma секция 29:6265 «Cases / Identity / Case»:
   29:7056 (320–575), 29:6266 (576–767), 29:6424 (768–1023), 29:6582
   (1024–1279), 29:6740 (1280–1920), 29:6898 (1920–max).

   Блоков четыре: обложка с описанием кейса, галерея, «More Identity Cases»
   и форма заявки (у неё свой файл, blocks/contact.css).

   Контейнер здесь не общий `.container` с полями 24, а тот же, что у сетки
   кейсов: поля 4 и предел 1872. В макете 1920–max все три фрейма стоят на
   x = 344 при кадре 2560, то есть (2560 − 1872) / 2 — это `--container-max`
   с полями `--grid-inset`. Текстовые блоки внутри обложки при этом упираются
   в свой предел 1200 и центрируются: в макете 1280 они стоят на x = 36 при
   контейнере 1272, в макете 1920 — на x = 336 при 1872.

   Своих брейкпоинтов у страницы два, и оба по существу:
     768  — ссылки в блоке описания выстраиваются в строку вместо колонки;
     1024 — подпись и текст в блоке описания встают в две колонки.
   Число колонок в «More cases» берётся из --catalog-columns (1 / 2 / 3), то
   есть ломается там же, где у каталога, — на 768 и 1280.
   ========================================================================== */

/* --- Обложка и описание --------------------------------------------------
   Шапка сайта прибита к верху и из потока выключена, поэтому 48 сверху — это
   ровно её высота: картинка начинается там, где шапка кончается (в макете
   она и стоит на y = 48). Тот же приём, что у hero на главной. */

.case-hero {
  display: flex;
  justify-content: center;
  padding-inline: var(--grid-inset);
}

.case-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl);
  width: 100%;
  max-width: var(--container-max);
  padding-block-start: var(--header-height);
}

/* Пропорция 16:9 во всех шести макетах: 417×234.56, 568×319.50, 760×427.50,
   1016×571.49, 1272×715.49, 1872×1052.99 */
.case-hero__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-placeholder);
}

.case-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Поле 20 — то же, что у подписи карточки в каталоге: в макете текстовые
   блоки кейса набраны с тем же боковым отступом, что и подписи плиток. */
.case-hero__meta,
.case-hero__info {
  width: 100%;
  max-width: 1200px;
  padding-inline: 20px;
}

.case-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Название и год по одной нижней линии — как «Cases 28» в каталоге (в макете
   576 год стоит на y = 11 при высоте строки 21 и заголовке 32) */
.case-hero__title-row {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-md);
}

.case-hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-uppercase);
}

.case-hero__year {
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-text-relaxed);
  letter-spacing: var(--letter-spacing-text);
}

/* Услуги кейса — тот же стиль и та же разметка, что у тегов плитки
   (blocks/cases.css, js/card.js): Uppercase sm, зазор 2×8, поле сверху 4,
   и каждая услуга ведёт на свою страницу каталога. Правило «во что
   превращается тег» одно на весь сайт, поэтому и классы здесь те же. */

/* --- Описание: Client / Task / Solution / ссылки -------------------------
   Строки разделены линией сверху (`color/border/subtle`), под линией поле 16.
   Линия — inset-тень, а не рамка: в макете высота строки считается вместе с
   ней (113 = 16 + 17 + 8 + 72 при 576, подпись при этом стоит на 16), то есть
   обводка идёт внутрь фрейма. Border добавил бы каждой из шести строк по
   пикселю, и описание уехало бы на 6. Тот же приём, что у строки фильтров в
   каталоге и у подчёркиваний в шапке. */

.case-hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.case-fact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-shadow: inset 0 1px 0 var(--color-border-subtle);
  padding-block-start: var(--spacing-lg);
}

.case-fact__label {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
}

.case-fact__value {
  font-size: var(--font-size-md);
  line-height: var(--line-height-text-relaxed);
  letter-spacing: var(--letter-spacing-text);
}

/* До 768 ссылки идут колонкой (в макете 425 и 576 они стоят друг под другом
   с шагом 41 = 25 + 16), с 768 — строкой с зазором 24 и переносом: в макете
   1024 шесть ссылок соцсетей ложатся в две строки с зазором 16. */
.case-fact__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Пункт списка — тоже флекс, а не строка текста: иначе ссылка внутри него
   осталась бы инлайновой и легла бы на базовую линию, а строка выросла бы на
   лишний пиксель под её подстрочные элементы. На шести ссылках соцсетей это
   уже 6px мимо макета. */
.case-fact__links li {
  display: flex;
}

/* Подчёркивание — настоящая рамка: в макете высота ссылки 25 при строке 24
   (28 при 27 на 1024+), то есть линия добавляет свой пиксель. Этим она
   отличается от подчёркиваний в шапке и на плитке, где обводка идёт внутрь. */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  border-block-end: 1px solid var(--color-border-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-text-relaxed);
  letter-spacing: var(--letter-spacing-text);
}

/* Иконка соцсети — из библиотеки (.icon в css/icons.css), размер её по
   умолчанию и есть 16. Класс блока оставлен ради имени: размеры и цвет
   приходят из .icon, здесь править нечего. */

@media (min-width: 768px) {
  .case-fact__links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-lg) var(--spacing-xl);
  }
}

/* С 1024 подпись и текст встают в две равные колонки с зазором 4 — в макете
   1024 это 486 + 4 + 486 = 976, в макете 1280 — 578 + 4 + 578 = 1160.
   Подпись при этом остаётся на верхней линии строки, поэтому align-items:
   start, а высота строки считается по тексту: 124 = 16 + 108 при 1024. */
@media (min-width: 1024px) {
  .case-fact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--grid-gap);
  }
}

/* --- Галерея -------------------------------------------------------------
   Стопка картинок во всю ширину контейнера и вплотную друг к другу: в макете
   между ними нет ни пикселя, а скругление 8 стоит на всей стопке, а не на
   каждой картинке (Figma: overflow-clip + corner-radius/md на фрейме).
   Пропорция каждой приходит из данных инлайном — как у плитки кейса. */

.case-gallery {
  display: flex;
  justify-content: center;
  padding-inline: var(--grid-inset);
}

.case-gallery__inner {
  width: 100%;
  max-width: var(--container-max);
  padding-block: var(--spacing-6xl);
}

.case-gallery__stack {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-placeholder);
}

.case-gallery__item {
  width: 100%;
  margin: 0;
}

.case-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Другие кейсы услуги -------------------------------------------------
   Карточка целиком та же, что в каталоге (.case-card--catalog): картинка с
   активным состоянием из js/card.js и постоянная подпись с тегами, названием
   и описанием. Отличие ровно одно — зазоры: здесь 40 по обеим осям, тогда
   как в каталоге 4 по горизонтали и 40 по вертикали. Число колонок общее с
   каталогом (--catalog-columns): 1 / 1 / 2 / 2 / 3 / 3. */

.case-more {
  display: flex;
  justify-content: center;
  padding-inline: var(--grid-inset);
}

.case-more__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
  max-width: var(--container-max);
  padding-block: var(--spacing-6xl);
}

/* Display lg (font-size/2xl с высотой строки 1): 28 до 1024 и 40 на 1024+.
   Поле 20 — то же, что у подписи карточки под ним. */
.case-more__title {
  padding-inline: 20px;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-uppercase);
}

.case-more__grid {
  display: grid;
  grid-template-columns: repeat(var(--catalog-columns), minmax(0, 1fr));
  align-items: start;
  gap: var(--spacing-3xl);
}

.case-more__grid[data-state="loading"] {
  min-height: 40vh;
}

/* Кейсов под услугой может не оказаться вовсе (лента короче макетной) —
   тогда секция не должна оставаться пустой дырой в 80+40 пикселей */
.case-more[hidden] {
  display: none;
}