/* Video walkthroughs (/videos/). Cards stay posters until a cleared video fills their data-video hook. */
.videos-intro { max-width: var(--copy-width); margin: 0 0 var(--space-6); color: var(--color-muted); font-size: 1.1rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--space-5) var(--space-4); }
.video-card { margin: 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.video-card--feature { grid-column: 1 / -1; }
.video-card__media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 30% 20%, var(--color-surface-raised), var(--color-bg) 75%); border-bottom: 1px solid var(--color-border); }
.video-card__poster { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--color-muted); font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.video-card figcaption { padding: var(--space-3) var(--space-4) var(--space-4); }
.video-card h2 { margin: 0 0 var(--space-1); font-size: 1.2rem; line-height: 1.3; }
.video-card p:not(.video-card__poster) { margin: 0; color: var(--color-muted); }
.video-card--feature h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

@media (min-width: 1100px) {
  .video-card--feature { flex-direction: row; }
  .video-card--feature .video-card__media { flex: 0 0 62%; border-bottom: 0; border-right: 1px solid var(--color-border); }
  .video-card--feature figcaption { align-self: center; padding: var(--space-5); }
}

@media (forced-colors: active) {
  .video-card, .video-card__media { border: 1px solid CanvasText; }
}