/* ═══════════════════════════════════════════════════════════════
   Кейс фирменного стиля Собора Архистратига Михаила (cases/branding-sobor.html).
   Работает поверх case-kksk.css и case-kksk-brand.css (та же раскладка кейса:
   обложка-видео, заголовок, разделы, визуальный поток с полями ~50 px).
   Здесь только палитра собора и его собственные блоки. Префикс sb-.
   ═══════════════════════════════════════════════════════════════ */

.sb {
  --kb-green: #8c6b37;      /* номера разделов — «золото тёмное» с брендбука */
  --sb-gold: #d8af6d;
  --sb-gold-hi: #f0cb78;
  --sb-dark: #1c1c1c;
  --sb-light: #eaeaea;
  --sb-stone: #f8f3f0;
}

.sb .kk-cover { background: var(--sb-stone); }

/* ── Храм → линия ──────────────────────────────────────── */
.sb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.sb-pair > * { margin: 0; }
.sb-pair img { width: 100%; height: 100%; object-fit: cover; }
.sb-markcard { display: grid; place-items: center; aspect-ratio: 2 / 3; background: var(--sb-light); }
.sb-markcard .sb-mark { width: 44%; }

/* ── Знак: квадраты 2×2 ────────────────────────────────── */
.sb-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.sb-logo { display: grid; place-items: center; aspect-ratio: 1 / 1; }
.sb-logo--dark { background: var(--sb-dark); }
.sb-logo--light { background: var(--sb-light); }
.sb-logo .sb-mark { width: 34%; }

/* Знак и блик: свет проходит по линии один раз (при появлении и по наведению) */
.sb-mark { position: relative; aspect-ratio: 344.5 / 603.8; }
.sb-mark img { width: 100%; height: 100%; display: block; }
.sb-mark--glint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 246, 220, 0.95) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat;
}
html.js .kk-in .sb-mark--glint::after, .sb-logo:hover .sb-mark--glint::after { animation: sb-glint 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
@keyframes sb-glint { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ── Сетки носителей ───────────────────────────────────── */
.sb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kb-gut); }
.sb-tiles > * { margin: 0; }
.sb-tiles img, .sb-signs img { width: 100%; height: auto; display: block; }
.sb-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-gut); }
.sb-signs > * { margin: 0; }


@media (max-width: 600px) {
  .sb-pair { grid-template-columns: minmax(0, 1fr); }
  .sb-markcard { aspect-ratio: 1 / 1; }
  .sb-markcard .sb-mark { width: 34%; }
  .sb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .kk-in .sb-mark--glint::after, .sb-logo:hover .sb-mark--glint::after { animation: none; }
}