/* ================================================================
   DataHints DS — Video Embed Component
   Requires: tokens.css
   ================================================================ */

  /* ════════════════════════════════════════════
     VIDEO EMBED COMPONENT
  ════════════════════════════════════════════ */

  .dh-video {
    margin: var(--sp-8) 0;
  }

  /* ── Size modifiers ── */
  .dh-video--narrow {
    max-width: var(--max-w-narrow);
    margin-left: auto; margin-right: auto;
  }
  .dh-video--breakout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* ── Media wrapper ── */
  .vid-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-s);
    background: var(--bg-elevated);
    aspect-ratio: 16 / 9;
  }
  .dh-video--borderless .vid-media { border: none; }
  .dh-video--rounded    .vid-media { border-radius: var(--r-md); }

  /* ── Aspect-ratio variants ── */
  .dh-video--4-3  .vid-media { aspect-ratio:  4 / 3; }
  .dh-video--1-1  .vid-media { aspect-ratio:  1;     }
  .dh-video--9-16 .vid-media { aspect-ratio:  9 / 16; }

  /* ── iframe ── */
  .vid-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  /* ── Loading state (skeleton) ── */
  .dh-video.is-loading .vid-media {
    animation: vid-pulse 1.6s ease-in-out infinite;
  }
  @keyframes vid-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dh-video.is-loading .vid-media { animation: none; opacity: 0.55; }
  }

  /* ── Poster / click-to-load ── */
  .vid-poster {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
  }
  .vid-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ease-base);
  }
  .vid-poster:hover .vid-thumb,
  .vid-poster:focus-visible .vid-thumb {
    transform: scale(1.03);
  }
  .vid-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vid-play svg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
    transition: transform var(--ease-fast);
  }
  .vid-poster:hover .vid-play svg,
  .vid-poster:focus-visible .vid-play svg {
    transform: scale(1.12);
  }
  .vid-poster:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  /* ════════════════════════════════════════════
     Captions — identical to figure.md, shared classes
  ════════════════════════════════════════════ */
  .fig-caption {
    font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5;
    color: var(--fg-3); margin-top: var(--sp-3); padding-left: var(--sp-1);
  }
  .fig-num { font-weight: 600; color: var(--fg-2); margin-right: var(--sp-2); }
  .fig-source {
    display: inline; margin-left: var(--sp-2); color: var(--accent-text);
    text-decoration: none; transition: opacity var(--ease-fast);
  }
  .fig-source:hover { opacity: .75; text-decoration: underline; }