/* deck-r4.css · VNISH GLOBAL · пересборка дека под крупных майнеров и хостинги
 *
 * Что чинит: слайды были заполнены на 40-55%, низ каждой страницы уходил в
 * черноту, восемь слайдов из пятнадцати шли вообще без картинки.
 * Здесь: содержимое растягивается на всю страницу, добавлены три раскладки
 * с визуалом - split (текст + кадр), bleed (фото во всю страницу) и wide
 * (кадр во всю ширину под текстом).
 *
 * Откат: минус этот файл из deck/en/index.html.
 */

/* ================= высота под WebKit =================
   БАГ БИВИСА 01.08: в Safari дек обрезался - видна была только верхняя часть.
   Причина в цепочке процентных высот поверх svh: слайд брал 100svh, а
   .slide-inner внутри грид-ячейки просил height:100% от неопределённой
   высоты. Safari разрешает такую пару в ноль и режет содержимое.
   Теперь: у скроллера дека определённая высота (vh, затем dvh - он же
   учитывает панель браузера на телефоне), слайд меряется от скроллера
   в процентах, а .slide-inner растягивается гридом без процентов. */
.deck {
  height: 100vh;
  height: 100dvh;
}

.slide {
  align-items: stretch;
  min-height: 100vh;
  min-height: 100%;
}

.slide-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.5vh, 24px);
  min-height: 0;
}

.slide-inner > .card-grid,
.slide-inner > .stat-row,
.slide-inner > .seg-list,
.slide-inner > .ladder,
.slide-inner > .scale-grid,
.slide-inner > .big-trio { margin: 0; }

/* заголовок больше не тянет за собой пустоту */
.slide-inner > h2 { margin: 0; }
.slide-inner > .lede { margin: 0; max-width: 92ch; }

/* ================= раскладка: текст + кадр ================= */
.sl-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 2.6vw, 48px);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.sl-split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.sl-split > .sl-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.4vh, 20px);
  min-height: 0;
}

.sl-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: #06080a;
}

/* картинка не должна диктовать высоту флекс-колонке: кладём её абсолютно,
   иначе слайд вырастает до натуральных 900px кадра и рвётся на две страницы */
.sl-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-frame--contain img { object-fit: contain; }

.sl-frame figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26px 20px 12px;
  background: linear-gradient(transparent, rgba(3, 4, 5, .92));
  color: rgba(243, 215, 147, .92);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ================= раскладка: кадр во всю ширину ================= */
.sl-wide {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: #06080a;
}

.sl-wide img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-wide--contain img { object-fit: contain; }

/* карточки рядом с кадром живут плотнее: три штуки должны влезть в страницу */
.sl-col .d-card { padding: 12px 14px; }
.sl-col .d-card b { font-size: clamp(13px, 1.05vw, 17px); }
.sl-col .d-card p { font-size: clamp(10px, .78vw, 12.5px); line-height: 1.5; }

/* ================= раскладка: фото во всю страницу ================= */
.slide.has-bleed { position: relative; overflow: hidden; }

.sl-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sl-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
}

.sl-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(3, 4, 5, .96) 26%, rgba(3, 4, 5, .55) 62%, rgba(3, 4, 5, .8)),
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(3, 4, 5, .8), transparent 70%);
}

.slide.has-bleed .slide-inner { position: relative; z-index: 1; }

/* колонка карточек рядом с кадром */
.card-grid.cols-1 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sl-col .d-card p { margin-bottom: 0; }

/* ================= цифры наследия ================= */
.heritage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
}

.heritage-row div {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(231, 199, 125, .07), rgba(255, 255, 255, .01));
}

.heritage-row b {
  display: block;
  color: #f4dda4;
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.heritage-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
}

/* ================= печать ================= */
@media print {
  .slide-inner { justify-content: center; }
  .sl-bleed img { opacity: .34; }
}

/* ================= телефон: колонки в столбик ================= */
@media (max-width: 900px) {
  .sl-split,
  .sl-split--wide-text { grid-template-columns: minmax(0, 1fr); }
  .sl-frame { min-height: 210px; }
  .heritage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- добор пустоты по конкретным слайдам ---------- */
/* сцена «та же машина» и список ролей растягиваются на страницу */
#s05 .mm-layout,
#s13 .seg-list { flex: 1 1 auto; min-height: 0; }
#s13 .seg-list { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; }
#s13 .seg-row { align-items: center; }

/* дашборд 16:9 в широком блоке letterbox-ился по краям: сужаем кадр */
#s11 .sl-wide { width: min(100%, 76vh); margin-inline: auto; }

/* слайд наследия: заголовок и лид уступают место залу поколений */
#s02 h2 { font-size: clamp(30px, 3.1vw, 50px); }
#s02 .lede { max-width: 104ch; }
#s02 .sl-wide { min-height: 46%; }

/* ---------- правки по разбору Бивиса 01.08 ---------- */
/* слайд 01: нижние плашки и источник читались как юридический микротекст */
.cover-chips span { font-size: clamp(11px, .82vw, 14px); }
.cover-note { font-size: clamp(10px, .72vw, 12.5px); opacity: .82; }
#s01 .slide-inner { gap: clamp(8px, 1vh, 16px); }

/* слайд 02: зал поколений занимает больше страницы, таблички читаются */
#s02 .sl-wide { min-height: 52%; }

/* финал: кадр приглушён сильнее обычного bleed */
.sl-bleed--soft img { opacity: .22; }

/* ---------- вес PDF ----------
   drop-shadow заставляет Chrome растеризовать слой целиком и класть в PDF
   огромный PNG: кубок уезжал в 2197x2671, сцена слайда 05 - в 2382x2142.
   В печати тени не нужны: изображения остаются исходными JPEG. */
@media print {
  .trophy-side img,
  .cover-mark,
  .thanks-brand img.mark,
  .mm-stage img,
  .mm-stage { filter: none !important; }
}


/* Значения кембриджской диаграммы жили в style-атрибутах, а строгий CSP корня
   (style-src 'self') такие атрибуты режет - полосы теряли высоту. */
.bars .bar-row:nth-child(1) > i { --v: 44.4 }
.bars .bar-row:nth-child(2) > i { --v: 26.4 }
.bars .bar-row:nth-child(3) > i { --v: 17.6 }
.bars .bar-row:nth-child(4) > i { --v: 11.6 }