/* ==========================================================================
   Miniatura de video (cursos y novedades) — reemplaza el <iframe> fijo que
   inserta WordPress al pegar una URL de YouTube en el contenido enriquecido.
   Centrada, en formato 16:9, abre el video en una modal al hacer clic
   (ver assets/js/video-embeds.js y video-modal.js).
   ========================================================================== */

.video-embed {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: var(--space-lg) auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-muted);
}

.video-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background var(--transition-fast);
}

.video-embed:hover::after,
.video-embed:focus-visible::after {
  background: rgba(0, 0, 0, 0.28);
}

.video-embed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-embed__play svg {
  width: 64px;
  height: 64px;
  color: var(--color-white);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: transform var(--transition-fast);
}

.video-embed:hover .video-embed__play svg,
.video-embed:focus-visible .video-embed__play svg {
  transform: scale(1.1);
}