/* =============================================================================
   video_embed — SDC Component
   Responsive 16:9 HTML5 video player.

   Technique: CSS `aspect-ratio: 16 / 9` (all modern browsers) + width: 100%.
   No media queries needed — the player is fully responsive by default.
   ============================================================================= */

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */

.video-embed {
  width: 100%;
}

/* ── Aspect-ratio container ─────────────────────────────────────────────────── */

.video-embed__ratio {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;

  /* Dark background shown while the video loads or when no poster is set.
     Uses --ra-ink so it matches the brand palette instead of plain black. */
  background-color: var(--ra-ink);
}

/* ── Native <video> element ─────────────────────────────────────────────────── */

.video-embed__player {
  display: block;
  width: 100%;
  height: 100%;

  /* `contain` keeps the original aspect ratio of the video file visible
     even if it differs slightly from the 16:9 wrapper. Use `cover` only
     if the video should fill without letterboxing. */
  object-fit: contain;

  /* Start invisible; JS fades it in on `loadeddata` via .is-loaded */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Once JS marks the wrapper as loaded, reveal the video */
.video-embed__ratio.is-loaded .video-embed__player {
  opacity: 1;
}

/* ── Loading spinner ─────────────────────────────────────────────────────────── */

.video-embed__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hide spinner once video data is ready */
.video-embed__ratio.is-loaded .video-embed__loading {
  opacity: 0;
}

.video-embed__spinner {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--ra-white);
  border-radius: 50%;
  animation: ve-spin 0.75s linear infinite;
}

@keyframes ve-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Error state ─────────────────────────────────────────────────────────────── */

/* Injected by JS on video `error` event. `role="alert"` ensures screen readers
   announce it immediately. */
.video-embed__error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--ra-white);
  font-size: 0.875rem;
  padding: 1rem;
  text-align: center;
  background-color: var(--ra-ink);
}

.video-embed__error-icon {
  font-size: 2rem;
  color: var(--ra-accent-3); /* orange — communicates problem */
}

.video-embed__error p {
  margin: 0;
}

/* ── Empty / placeholder state (Canvas editor preview) ──────────────────────── */

/* Shown when video_url is not yet configured, so the editor sees a helpful
   placeholder instead of a black rectangle. */
.video-embed--empty .video-embed__ratio {
  background-color: #e9ecef;
  border: 2px dashed #adb5bd;
}

.video-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--ra-muted);
}

.video-embed__placeholder-icon {
  font-size: 3rem;
  opacity: 0.45;
}

.video-embed__placeholder-text {
  margin: 0;
  font-size: 0.875rem;
}