/*
 * Vídeo embutido (`@[youtube](ID)`, `@[vimeo](ID)`): a miniatura com o botão
 * de play e, depois do clique, o player no mesmo lugar e no mesmo tamanho —
 * a página não pula quando o `<iframe>` entra.
 *
 * A caixa é 16:9 porque o player é 16:9. A miniatura do YouTube vem em 4:3
 * com faixas pretas em cima e embaixo; o `object-fit: cover` as corta.
 */

.video {
  margin-inline: 0;
}

.video > a,
.video > iframe {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius, 8px);
  background: #000;
}

.video > a img,
.video > a picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O botão no estilo do player: todo leitor já sabe o que ele faz. */
.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  border-radius: 14px;
  background: rgb(33 33 33 / .8);
  transition: background-color .15s ease;
}

.video-play::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
}

.video > a:hover .video-play,
.video > a:focus-visible .video-play {
  background: #f00;
}

.video > a:focus-visible {
  outline: 3px solid var(--focus, var(--cor-primaria, #65a6ff));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .video-play {
    transition: none;
  }
}