/* ============================================================
   Реплика — 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; }

/* --- horizontal sliders: scroll only on X, never show a vertical scrollbar.
   (inline overflow-x:auto otherwise makes overflow-y compute to auto too) --- */
.hcar { overflow-y: hidden; }

/* --- 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; }

  /* hero: на мобиле высота по контенту (Маша + плеер + лого идут потоком,
     без вертикального центрирования и пустого провала до бегущей строки) */
  #s01-hero            { min-height: 0 !important; }
  #s01-hero > div:first-of-type { align-items: stretch !important; flex: 0 0 auto !important; }

  /* header: экономим место под call-pill (лого-иконки нет, номер кликабелен) */
  #s00-header          { padding-left: 12px !important; padding-right: 12px !important; }
  #logo span           { font-size: 18px !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; }
}

/* ============================================================
   S02 «Услышьте сами» — сторис-карточки (видео-формат stories)
   ============================================================ */
.story-row { scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }

.story-card {
  --story-w: clamp(170px, 23vw, 226px);
  flex: 0 0 var(--story-w);
  display: flex; flex-direction: column; min-width: 0;
}
@media (max-width: 879px) { .story-card { --story-w: clamp(120px, 34vw, 240px); } }

.story-media {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; outline: none;
  background: linear-gradient(155deg, #2B2722 0%, #1B1813 60%, #141109 100%);
  filter: grayscale(1) contrast(.97) brightness(.9);
  transition: filter .4s ease, transform .25s ease, box-shadow .25s ease;
}
.story-card:hover .story-media { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22,21,15,.16); }
.story-media:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight) 60%, transparent); }
.story-media.is-playing { filter: none; }

.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story-grad { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 46%); }

/* центральная кнопка play (только в покое) */
.story-play {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--lime); color: var(--highlight-ink);
  display: flex; align-items: center; justify-content: center; padding-left: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: opacity .2s ease, transform .2s ease;
}
.story-media.is-playing .story-play { opacity: 0; transform: translate(-50%,-50%) scale(.5); }

/* нижние контролы: статус-пилюля + mute */
.story-ctrls { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; }
.story-status {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: rgba(244,242,236,.94); color: var(--ink);
  font: 700 11.5px/1 var(--font-sans); white-space: nowrap; overflow: hidden;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story-status .ic-pause { display: none; }
.story-media.is-playing .story-status .ic-play { display: none; }
.story-media.is-playing .story-status .ic-pause { display: inline-flex; }
.story-media.is-playing .story-label-idle { display: none; }

/* бегущая волна-эквалайзер (как у плеера на груди Маши) */
.story-wave { display: none; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.story-media.is-playing .story-wave { display: inline-flex; }
.story-wave i { width: 2.5px; border-radius: 2px; background: var(--ink); transform-origin: bottom;
  animation: eqBar .9s ease-in-out infinite; }
.story-wave i:nth-child(1) { height: 6px;  animation-duration: .82s; }
.story-wave i:nth-child(2) { height: 13px; animation-duration: 1.04s; animation-delay: .12s; }
.story-wave i:nth-child(3) { height: 8px;  animation-duration: .72s;  animation-delay: .26s; }
.story-wave i:nth-child(4) { height: 14px; animation-duration: .98s;  animation-delay: .08s; }
.story-wave i:nth-child(5) { height: 9px;  animation-duration: 1.1s;  animation-delay: .3s; }

.story-mute {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: none; cursor: pointer;
  border-radius: 50%; background: var(--ink); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.story-media.is-playing .story-mute { display: flex; }

.story-title { margin: 14px 2px 0; font: 700 clamp(15px,1.3vw,17px)/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.story-desc  { margin: 8px 2px 0;  font: 400 13.5px/1.5 var(--font-sans); color: var(--ink-muted); }