/* Video embed component (feature #09a) */

.video-embed {
  position: relative;
  display: block;
  margin: 1.5rem 0;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.video-embed--16x9 { aspect-ratio: 16 / 9; }
.video-embed--4x3  { aspect-ratio: 4 / 3; }
.video-embed--1x1  { aspect-ratio: 1 / 1; }
.video-embed--21x9 { aspect-ratio: 21 / 9; }

/* Fallback for browsers without aspect-ratio (older Safari) */
@supports not (aspect-ratio: 1) {
  .video-embed--16x9 { padding-top: 56.25%; }
  .video-embed--4x3  { padding-top: 75%; }
  .video-embed--1x1  { padding-top: 100%; }
  .video-embed--21x9 { padding-top: 42.857%; }
  .video-embed--16x9 > .video-embed__poster,
  .video-embed--16x9 > .video-embed__iframe,
  .video-embed--4x3 > .video-embed__poster,
  .video-embed--4x3 > .video-embed__iframe,
  .video-embed--1x1 > .video-embed__poster,
  .video-embed--1x1 > .video-embed__iframe,
  .video-embed--21x9 > .video-embed__poster,
  .video-embed--21x9 > .video-embed__iframe {
    position: absolute;
    inset: 0;
  }
}

.video-embed__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  color: #ef4444; /* play button accent */
  font: inherit;
  overflow: hidden;
}

.video-embed__poster:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.video-embed__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.92;
}

.video-embed__poster:hover .video-embed__thumb,
.video-embed__poster:focus-visible .video-embed__thumb {
  transform: scale(1.02);
  opacity: 1;
}

.video-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: transform 0.2s ease;
}

.video-embed__poster:hover .video-embed__play,
.video-embed__poster:focus-visible .video-embed__play {
  transform: scale(1.08);
}

.video-embed__provider {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: rgba(0,0,0,0.55);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.video-embed--vimeo .video-embed__poster {
  /* Vimeo: no remote poster, render solid backdrop with subtle gradient. */
  background: linear-gradient(135deg, #1ab7ea 0%, #0d2a3d 100%);
}

.video-embed__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}

.video-embed__caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-dim, #64748b);
  text-align: center;
}