/* ============================================================
   Реплика — standalone implementation
   Supplementary CSS: responsive layout overrides + utilities
   that replace the dc-runtime's isMobile/notMobile state.
   Breakpoint mirrors the source: window.innerWidth < 880.
   ============================================================ */

/* --- responsive show/hide (replaces sc-if isMobile / notMobile) --- */
dc-when { display: contents; }
.u-desktop { display: contents; }
.u-mobile  { display: none; }
@media (max-width: 879px) {
  .u-desktop { display: none !important; }
  .u-mobile  { display: contents !important; }
}

/* --- conditional (stateful) branches: idle/loading/done, tabs, nav --- */
.dc-cond { display: contents; }
.dc-cond[hidden] { display: none !important; }

/* --- responsive grid/flex overrides (replaces isMobile ? a : b bindings) --- */
@media (max-width: 879px) {
  [data-rk="painCols"]      { grid-template-columns: 1fr !important; }
  [data-rk="scenCols"]      { grid-template-columns: 1fr !important; }
  [data-rk="scenCols0"]     { grid-template-columns: 1fr !important; }
  [data-rk="metricCols"]    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-rk="dashCols"]      { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-rk="includedCols"]  { grid-template-columns: 1fr !important; }
  [data-rk="s9Cols"]        { grid-template-columns: 1fr !important; }
  [data-rk="s9bCols"]       { grid-template-columns: 1fr !important; }
  [data-rk="s19Cols"]       { grid-template-columns: 1fr !important; }
  [data-rk="s10Layout"]     { grid-template-columns: 1fr !important; }
  [data-rk="thesisCol"]     { grid-column: auto !important; }
  [data-rk="flowDir"]       { flex-direction: column !important; }
  [data-rk="flowArrow"]     { transform: rotate(90deg) !important; }
}

/* --- broken-asset fallbacks (hero image / UI videos may be absent) --- */
img[data-fallback="hidden"] { visibility: hidden; }
.video-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #232019 0%, #1A1815 60%, #14120E 100%);
  color: rgba(255,255,255,.5); font: 600 13px/1.4 var(--font-sans); text-align: center; padding: 16px;
}

/* --- reveal-on-scroll (kept additive: content is visible even without JS) --- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .js .reveal[data-reveal].is-in { opacity: 1; transform: none; }
}