/* Application-led media additions. Uses the existing Silver Strike design tokens. */
.vs-demo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--color-text-muted);
}
.vs-demo-link:hover,
.vs-demo-link:focus-visible { color: var(--color-gold); text-decoration-color: currentColor; }
.vs-demo-link:active { color: var(--color-gold-active); }
.vs-hero-inner > .vs-demo-link { justify-self: start; color: var(--color-text); }
.vs-demonstrations, .vs-furniture-feature { scroll-margin-top: var(--space-20); }
.vs-demo-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: end;
  margin-bottom: var(--space-10);
}
.vs-demo-heading h2,
.vs-furniture-copy h2 { margin-top: var(--space-5); }
.vs-demo-intro { display: grid; gap: var(--space-4); }
.vs-demo-intro p,
.vs-furniture-copy > p { font-size: var(--text-base); line-height: 1.65; }
.vs-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.vs-demo { margin: 0; min-width: 0; }
.vs-demo-player { position: relative; background: var(--color-bg); }
.vs-demo-player video { width: 100%; height: auto; display: block; background: var(--color-bg); }
.vs-demo-start {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: max-content;
  max-width: calc(100% - var(--space-8));
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-silver);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.3;
  cursor: pointer;
}
.vs-demo-start[hidden] { display: none; }
.vs-demo-start:hover,
.vs-demo-start:focus-visible { border-color: var(--color-gold); color: var(--color-gold); }
.vs-demo-start:active { background: var(--color-surface-offset); }
.vs-demo figcaption { padding-top: var(--space-5); }
.vs-demo-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vs-demo h3 { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.25; margin-block: var(--space-3) var(--space-2); }
.vs-demo figcaption p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.vs-demo-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-block: var(--space-6);
  margin-top: var(--space-8);
  border-block: 1px solid var(--color-divider);
}
.vs-demo-notes p { flex: 1 1 200px; font-size: var(--text-sm); color: var(--color-text-muted); }
.vs-demo-notes strong { display: block; margin-bottom: var(--space-2); color: var(--color-text); font-weight: 600; font-size: var(--text-base); }
.vs-demo-footnote { max-width: none; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }
.vs-furniture-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); align-items: center; }
.vs-furniture-copy { min-width: 0; }
.vs-furniture-copy > p { margin-top: var(--space-5); color: var(--color-text-muted); }
.vs-furniture-copy > .vs-furniture-lede { color: var(--color-text); font-weight: 600; }
.vs-furniture-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-8); }
.vs-furniture-photo { margin: 0; min-width: 0; }
.vs-furniture-photo img { display: block; width: 100%; height: auto; }
.vs-furniture-photo figcaption { padding-top: var(--space-4); }
.vs-furniture-photo figcaption p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
@media (max-width: 900px) {
  .vs-demo-heading, .vs-furniture-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .vs-demo-intro { max-width: 65ch; }
  .vs-furniture-copy { max-width: 65ch; }
}
@media (max-width: 680px) {
  .vs-demo-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .vs-demo-portrait .vs-demo-player { max-width: 360px; margin-inline: auto; }
  .vs-demo-notes { flex-direction: column; gap: var(--space-5); }
  .vs-demo-notes p { flex: none; }
  .vs-demo-heading { margin-bottom: var(--space-8); }
  .vs-furniture-actions { align-items: flex-start; flex-direction: column; }
}