/* ═══════════════════════════════════════════════════════════════
   Кейс фирменного стиля Stage (cases/branding-stage.html).
   Работает поверх case-kksk.css и case-kksk-brand.css — та же раскладка,
   что у ККСК, собора и Mr.KIT. Здесь только палитра Stage и его блоки.
   Префикс st-.
   ═══════════════════════════════════════════════════════════════ */

.st {
  --kb-green: #1f7fe8;      /* номера разделов — синий из градиента Stage */
}

.st .kk-cover { background: #000; }

/* ── Ребрендинг: было → стало ──────────────────────────── */
.st-rb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.st-rb__card { position: relative; overflow: hidden; aspect-ratio: 1 / 1; margin: 0; }
.st-rb__card--old { background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 14, 18, 0.06); }
.st-rb__card--old img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.st-rb__card--new { background: #000; }
.st-rb__card--new video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-rb__tag { position: absolute; left: clamp(14px, 1.6vw, 24px); top: clamp(12px, 1.4vw, 22px); z-index: 1; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; }
.st-rb__card--old .st-rb__tag { color: rgba(13, 14, 18, 0.55); background: rgba(13, 14, 18, 0.05); }
.st-rb__card--new .st-rb__tag { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.1); }

/* ── Сетки медиа ───────────────────────────────────────── */
.st-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.st-grid2 > * { margin: 0; }
.st-banner { display: grid; grid-template-columns: 0.782fr 1fr; gap: var(--kb-gut); }
.st-banner > * { margin: 0; }
.st-banner img, .st-grid2 img { width: 100%; height: auto; display: block; }
.st-pattern { background: #0b0b0d; }
.st-pattern img { width: 100%; height: auto; display: block; }

/* ── Карточки спикеров: бегущая лента на всю ширину ───────
   Карточки одной высоты в один ряд; бесконечную ленту ведёт case-kksk.js ([data-kk-marquee]):
   дублирует набор и двигает трек по модулю его ширины. Отступ — справа у каждой карточки
   (не gap), иначе шаг копий не совпал бы с шириной набора. Поле сверху и снизу — место для
   подъёма карточки и её тени при наведении (лента обрезает всё, что за ней); тень уходит вниз
   на ~52px, лишнее нижнее поле съедает отрицательный margin — до соседей те же 24px.
   Без JS и при prefers-reduced-motion ленту листают сами. */
.kb-flow > .st-speakers {
  width: auto;
  margin: 0 calc(-1 * var(--kb-gut)) -40px;
  padding: 24px 0 64px;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-speakers::-webkit-scrollbar { display: none; }
/* Края растворяются — лента приходит ниоткуда и уходит в никуда */
.kb-flow > .st-speakers.is-loop {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.kb-flow > .st-speakers.is-drag { cursor: grabbing; }
.st-speakers__track { display: flex; width: max-content; padding-left: var(--kb-gut); }
.st-speakers.is-loop .st-speakers__track { padding-left: 0; user-select: none; will-change: transform; }
.st-speakers.is-loop img { -webkit-user-drag: none; }
.st-speaker {
  flex: none;
  width: clamp(200px, 21vw, 400px);
  margin: 0 var(--kb-gut) 0 0;
  overflow: hidden;
  background: #0b0b0d;
  aspect-ratio: 1000 / 1661;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s;
}
.st-speaker img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .st-speaker:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
}

/* ── Татуировки ────────────────────────────────────────── */
.st-tattoos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.st-tattoos figure { margin: 0; aspect-ratio: 1122 / 1402; overflow: hidden; background: #ddd; }
.st-tattoos img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 600px) {
  .st-rb, .st-grid2, .st-banner, .st-tattoos { grid-template-columns: minmax(0, 1fr); }
  .st-speaker { width: 56vw; }
}
@media (prefers-reduced-motion: reduce) {
  .st-speaker { transition: none; }
}