/* КАНОН КАРТОЧКИ — стили общего каркаса пятёрки (assets/shared/card, v1.2).
 * Вынесен из макета-пилота 41; раскладка side и строки под названием — по
 * запросам 40. Модель и слоты — README.md рядом.
 *
 * Кегли — под панель 3840×2160 при --content-scale 1 (Киоск-стандарт:
 * подписи не мельче 24 px, текст контролов 32 px). Прежние карточки пятёрки
 * жили на 15–17 px — на 49″ это мелкий шрифт в метре от лица; отсюда и
 * «всё идёт текстом, нечитаемо».
 *
 * Шрифты по брендбуку (COORDINATION → «Шрифтово-цветовые правила»):
 *   Nolde     — только название;
 *   20 Kopeek — подписи, тип, год, числа, технические строки;
 *   21 Cent   — значения паспорта и описание.
 * Иероглифы у всех трёх падают в Noto Sans SC (в продукте это делает ядро
 * через unicode-range; в макете — стеком).
 *
 * Цвета — только токены палитры; красный — точечно (маркер статуса). */

.cc-card {
  --cc-s: var(--content-scale, 1);
  --cc-pad: calc(56px * var(--cc-s));
  --cc-gap: calc(72px * var(--cc-s));
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--cc-gap);
  align-items: start;
  width: fit-content;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--cc-pad);
  box-sizing: border-box;
  background: #1b2126;
  border: 1px solid rgba(var(--brass-rgb), 0.35);
  border-radius: 4px;
  color: var(--paper);
}
.cc-card--nophoto { grid-template-columns: minmax(0, 1fr); }

.cc-close {
  position: absolute;
  top: calc(20px * var(--ui-scale, 1));
  right: calc(20px * var(--ui-scale, 1));
  width: var(--touch-min, 64px);
  height: var(--touch-min, 64px);
  font-size: calc(40px * var(--ui-scale, 1));
  line-height: 1;
  color: var(--paper);
  background: rgba(var(--graphite-rgb), 0.6);
  border: 1px solid rgba(var(--brass-rgb), 0.4);
  border-radius: 3px;
}

/* Снимок — как в продукте: целиком, без кадрирования, не больше натуры. */
.cc-photo { margin: 0; }
.cc-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(1180px * var(--cc-s));
  max-height: calc(1400px * var(--cc-s));
}
/* Подпись под снимком (photo.credit) — у Викисклада это условие лицензии
   (автор и лицензия рядом с изображением), а не украшение. Запрос 39. */
.cc-photo__credit {
  margin-top: calc(14px * var(--cc-s));
  max-width: calc(1180px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  line-height: 1.35;
  color: rgba(var(--paper-rgb), 0.55);
}

/* Колонка текста держит читаемую длину строки при любом снимке. */
.cc-col {
  width: calc(1320px * var(--cc-s));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(44px * var(--cc-s));
}

/* 1. Шапка */
.cc-head { padding-right: calc(90px * var(--ui-scale, 1)); }
.cc-title {
  margin: 0;
  font-family: "Nolde", "Noto Sans SC", Georgia, serif;
  font-weight: 400;
  font-size: calc(76px * var(--cc-s));
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* Китайское название: без капса, жирный 700 (Noto). По языку САМОЙ строки
   (model.titleLang), а не экрана: в zh-режиме у 40 в шапке стоит оригинал
   (русский, немецкий) — ему капс и 400, у Nolde нет 700, выходил поддельный
   жирный. Без titleLang строка наследует язык карточки — как раньше. */
.cc-title:lang(zh) { text-transform: none; font-weight: 700; letter-spacing: 0.04em; }
/* Ступени кегля длинного названия (model.titleSize, «auto» — по длине;
   запрос 39: у свода названия до 291 знака). */
.cc-title--m { font-size: calc(60px * var(--cc-s)); }
.cc-title--s { font-size: calc(48px * var(--cc-s)); line-height: 1.1; }
/* xs — цепочки длиннее 200 знаков (у 39 четыре, до 291): 38 px — кегль
   значения паспорта — и без разрядки, иначе 5 строк вместо 4 (замер 39,
   card-titles.cjs). Двойной класс — чтобы перебить и разрядку zh-правила. */
.cc-title.cc-title--xs { font-size: calc(38px * var(--cc-s)); line-height: 1.12; letter-spacing: 0; }
/* Строки под названием (model.headLines): перевод, подзаголовок. Первая —
   40 px (ступень между названием 76 и значением 38), следующие — 34. */
.cc-headline {
  margin: calc(14px * var(--cc-s)) 0 0;
  font-family: "21 Cent", "Noto Sans SC", Georgia, serif;
  font-size: calc(40px * var(--cc-s));
  line-height: 1.25;
  color: rgba(var(--paper-rgb), 0.88);
}
.cc-headline + .cc-headline {
  margin-top: calc(6px * var(--cc-s));
  font-size: calc(34px * var(--cc-s));
  color: rgba(var(--paper-rgb), 0.7);
}
.cc-type {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--cc-s));
  margin-top: calc(18px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(30px * var(--cc-s));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.cc-type__icon { width: calc(40px * var(--cc-s)); height: calc(40px * var(--cc-s)); }

/* 2. Паспорт: пары «пиктограмма + значение», две колонки. */
.cc-pass {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(36px * var(--cc-s)) calc(48px * var(--cc-s));
  padding: calc(40px * var(--cc-s)) 0;
  border-top: 1px solid rgba(var(--brass-rgb), 0.25);
  border-bottom: 1px solid rgba(var(--brass-rgb), 0.25);
}
.cc-pass__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: calc(22px * var(--cc-s));
  align-items: start;
}
/* Широкая пара: значение и «приложение» к нему (у 41 — шкала) стоят рядом,
   а не разнесены по краям — иначе глаз теряет связь числа с картинкой. */
.cc-pass__row--wide { grid-column: 1 / -1; grid-template-columns: auto auto minmax(0, 1fr); }
.cc-pass__row--wide .cc-pass__extra { margin-left: calc(72px * var(--cc-s)); }
.cc-icon { display: inline-block; flex: 0 0 auto; color: var(--brass); }
.cc-icon svg { display: block; width: 100%; height: 100%; }
.cc-pass__icon { width: calc(56px * var(--cc-s)); height: calc(56px * var(--cc-s)); }
.cc-pass__label {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--window);
}
.cc-pass__value {
  margin-top: calc(6px * var(--cc-s));
  font-family: "21 Cent", "Noto Sans SC", system-ui, sans-serif;
  font-size: calc(38px * var(--cc-s));
  line-height: 1.25;
}
.cc-pass__value b {
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-weight: 600;
  font-size: calc(52px * var(--cc-s));
  line-height: 1.05;
}
/* Вторая строка пары (адрес под «Где», разбивка высоты) — 32 px: ближе к
   значению (38), чем к подписи (24). На 26 адрес читался сноской (dvn 25.09). */
.cc-pass__sub {
  margin-top: calc(8px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(32px * var(--cc-s));
  line-height: 1.3;
  color: rgba(var(--paper-rgb), 0.78);
}
.cc-pass__sub + .cc-pass__sub { margin-top: calc(2px * var(--cc-s)); }
.cc-pass__extra { align-self: end; }

/* Маркер статуса — точка палитры, не заливка. */
.cc-marker {
  display: inline-block;
  width: calc(22px * var(--cc-s));
  height: calc(22px * var(--cc-s));
  margin-right: calc(14px * var(--cc-s));
  border-radius: 50%;
  background: var(--cc-marker);
  box-shadow: 0 0 0 2px rgba(var(--paper-rgb), 0.25);
  vertical-align: 0.05em;
}

/* 5. Описание */
.cc-desc p {
  margin: 0;
  max-width: 62ch;
  font-family: "21 Cent", "Noto Sans SC", system-ui, sans-serif;
  font-size: calc(34px * var(--cc-s));
  line-height: 1.48;
  color: rgba(var(--paper-rgb), 0.9);
}

/* 6. Доп. блоки под описанием (model.sections) — оформление за адаптером;
   каркас держит только место в колонке (зазор колонки). */
.cc-section { min-width: 0; }
/* Видимая подпись блока (sections[].heading) — как подпись паспорта;
   запрос 42 («ключевая работа», «Что сейчас»). */
.cc-section__label {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--cc-s));
  margin-bottom: calc(10px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(24px * var(--cc-s));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--window);
}
.cc-section__icon { width: calc(36px * var(--cc-s)); height: calc(36px * var(--cc-s)); }

/* 7. Технические строки — в самом низу, прячутся переключателем ядра. */
.cc-tech {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--cc-s));
  font-family: "20 Kopeek", "Noto Sans SC", monospace;
  font-size: calc(22px * var(--cc-s));
  color: var(--window);
}
.cc-tech__icon { width: calc(28px * var(--cc-s)); height: calc(28px * var(--cc-s)); color: var(--window); }
/* Прячет их правило ЯДРА (kiosk-core.css ≥ 1.29.0):
   html:not([data-kiosk-tech="on"]) [data-kiosk-tech] { display: none }.
   Здесь его не повторяем — страница без kiosk-core.css покажет строки. */

/* ── Раскладка side: колонка справа ВМЕСТО снимка (model.side) ───────────
   Запрос 40: у книг снимка нет, на его месте — связи. Высота карточки — по
   большей колонке, не выше места (её ставит fitCard() после шрифтов);
   обе колонки тянутся на эту высоту; прокручивается только .cc-side__scroll,
   шапка и паспорт на месте. Ширина колонки — --cc-side-w. */
.cc-card--side {
  grid-template-columns: minmax(0, 1fr) var(--cc-side-w, calc(1040px * var(--cc-s)));
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.cc-card--side > .cc-col,
.cc-card--side > .cc-side { align-self: stretch; }
.cc-card--side > .cc-col { min-height: 0; overflow-y: auto; }
.cc-side {
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--cc-s));
  min-height: 0;
  padding-left: calc(56px * var(--cc-s));
  border-left: 1px solid rgba(var(--brass-rgb), 0.25);
}
/* первая строка колонки стоит под крестиком — отступ как у шапки */
.cc-side > :first-child { padding-right: calc(90px * var(--ui-scale, 1)); }
.cc-side__scroll {
  min-height: 0;
  overflow-y: auto;
  /* вертикальный список в вертикальной карточке: жест не уходит наверх */
  overscroll-behavior: contain;
}