/*
 * Video-embed — lichte "klik om te spelen" YouTube-facade.
 * Toont een poster + play-knop; laadt de iframe pas bij klik (snel + geen
 * YouTube-cookies tot afspelen). Herbruikbaar via .video-embed[data-video-id].
 */

.video-embed {
  position:      relative;
  display:       block;
  width:         100%;
  aspect-ratio:  16 / 9;
  padding:       0;
  border:        none;
  border-radius: 14px;
  overflow:      hidden;
  background:    #000;
  cursor:        pointer;
}

.video-embed__poster {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-base),
              filter var(--transition-fast);
}

.video-embed:hover .video-embed__poster,
.video-embed:focus-visible .video-embed__poster {
  transform: scale(1.03);
  filter:    brightness(0.88);
}

.video-embed__play {
  position:        absolute;
  top:             50%;
  left:            50%;
  transform:       translate(-50%, -50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           68px;
  height:          68px;
  border-radius:   var(--radius-full);
  background:      var(--color-accent);
  color:           #ffffff;
  box-shadow:      0 10px 30px rgba(0, 0, 0, 0.35);
  transition:      transform var(--transition-fast),
                   background-color var(--transition-fast);
}

.video-embed:hover .video-embed__play,
.video-embed:focus-visible .video-embed__play {
  transform:  translate(-50%, -50%) scale(1.08);
  background:  var(--color-accent-dark);
}

.video-embed:focus-visible {
  outline:        3px solid var(--color-accent-pale);
  outline-offset: 2px;
}

.video-embed__play svg {
  width:       28px;
  height:      28px;
  margin-left: 3px; /* optisch centreren van de driehoek */
}

/* Na klik: de iframe vult de facade. */
.video-embed iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}