/* Video showcase (D-532). Site themes set the --vs-* tokens; defaults are neutral. */
.vs { --vs-tile-w: 200px; --vs-gap: 16px; --vs-radius: 18px; --vs-tile-bg: #111;
      --vs-cap-fg: inherit; --vs-ring: rgba(255,255,255,.14); --vs-accent: #8466ff; --vs-fade: transparent; }
.vs-viewport { position: relative; overflow: hidden; padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.vs-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.vs-item { flex: 0 0 auto; margin: 0 var(--vs-gap) 0 0; padding: 0; list-style: none; }
.vs-moving .vs-track { animation: vs-slide var(--vs-dur, 60s) linear infinite; }
.vs-track.is-paused { animation-play-state: paused; }
@keyframes vs-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.vs-tile { display: flex; flex-direction: column; gap: 10px; width: var(--vs-tile-w); padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.vs-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--vs-radius); overflow: hidden;
  background: var(--vs-tile-bg); box-shadow: 0 0 0 1px var(--vs-ring), 0 10px 30px rgba(0,0,0,.22); transition: transform .2s ease, box-shadow .2s ease; }
.vs-tile:hover .vs-media { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--vs-accent), 0 16px 36px rgba(0,0,0,.3); }
.vs-tile:focus-visible { outline: none; }
.vs-tile:focus-visible .vs-media { outline: 3px solid var(--vs-accent); outline-offset: 3px; }
.vs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--vs-tile-bg); pointer-events: none; }
.vs-play { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.vs-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.vs-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
  padding: 0 2px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--vs-cap-fg); }

/* still mode (prefers-reduced-motion): a normal swipe row, no slide, no clones */
.vs-still .vs-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
.vs-still .vs-item { scroll-snap-align: start; }
.vs-still .vs-item[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vs-track { animation: none !important; }
  .vs-media, .vs-tile:hover .vs-media { transition: none; transform: none; }
}
@media (max-width: 760px) { .vs { --vs-tile-w: 150px; --vs-gap: 12px; --vs-radius: 14px; } .vs-cap { font-size: 13px; } }
@media (max-width: 380px) { .vs { --vs-tile-w: 132px; } }

/* lightbox */
.vs-dialog { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; color: #fff; }
.vs-dialog:not([open]) { display: none; }
.vs-dialog[open] { position: fixed; inset: 0; margin: auto; display: grid; place-items: center; z-index: 2147483000; }
.vs-dialog::backdrop { background: rgba(5,7,12,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vs-dialog-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vs-dialog-video { display: block; height: min(86vh, 900px); max-width: 94vw; aspect-ratio: 9 / 16; width: auto; object-fit: contain;
  border-radius: 16px; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.vs-dialog-cap { margin: 0; max-width: min(94vw, 480px); text-align: center; font-size: 15px; line-height: 1.4; font-weight: 600; color: #fff; }
.vs-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(20,22,30,.9); cursor: pointer; display: grid; place-items: center; z-index: 1; }
.vs-close svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.vs-close:focus-visible { outline: 3px solid var(--vs-accent, #8466ff); outline-offset: 2px; }
@media (max-width: 600px) { .vs-close { top: 8px; right: 8px; } .vs-dialog-video { height: auto; max-height: 80vh; width: 92vw; } }
html.vs-lock { overflow: hidden; }

/* ---- CALL theme (assets/theme.css tokens; dark default, light via html[data-theme="light"]) ---- */
.vs { --vs-tile-bg: var(--ink-3, #0f1626); --vs-ring: var(--line-2, rgba(255,255,255,.14)); --vs-accent: var(--violet, #7c5cff); --vs-cap-fg: var(--txt, inherit); }
.section.vs { overflow: hidden; }
.vs .vs-viewport { max-width: 1440px; margin: 8px auto 0; }