/* =============================================================
   Vídeo
   Capa do YouTube em 16:9 com botão de play. A miniatura que o
   YouTube garante para todo vídeo é 4:3 com faixas pretas em
   cima e embaixo; o recorte (cover) tira justamente as faixas.

   O player que o JS põe no lugar da capa ocupa a mesma caixa,
   então nada na página pula de lugar no clique.
   ============================================================= */

.video {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	margin: 0;
}

.video__capa,
.video__player {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 0;
	border-radius: var(--raio);
	background: var(--c-fundo-sunk);
}

.video__miniatura {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transicao);
}

.video__play {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgb(var(--c-fundo-escuro-rgb) / 70%);
	transform: translate(-50%, -50%);
	transition: background-color var(--transicao), transform var(--transicao);
}

/* Triângulo desenhado com borda: sem ícone extra para carregar. */
.video__play::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	border-block: 0.7rem solid transparent;
	border-inline-start: 1.1rem solid var(--c-texto-inverso);
	transform: translate(-50%, -50%);
}

.video__capa:hover .video__play,
.video__capa:focus-visible .video__play {
	background: var(--c-acao);
	transform: translate(-50%, -50%) scale(1.08);
}

.video__capa:hover .video__miniatura {
	transform: scale(1.03);
}

.video__legenda {
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	line-height: 1.35;
	color: var(--c-texto-forte);
}

@media (prefers-reduced-motion: reduce) {
	.video__miniatura,
	.video__play {
		transition: none;
	}

	.video__capa:hover .video__miniatura {
		transform: none;
	}
}