/*
 * MM Player de Vídeo — estilos ISOLADOS.
 *
 * Regra de ouro: este arquivo só tem seletores que começam por ".mm-product-video" (o bloco do player do artigo).
 * Nenhuma regra mexe em "video", "figure", "p" ou em classe do tema fora desse bloco, então o CSS principal do site
 * não é afetado e esta folha pode ser desligada sem efeito colateral.
 *
 * Por que "!important": os artigos já publicados têm style="" gravado no próprio HTML (width:100%; max-width:100%;
 * height:auto, sem proporção). Só "!important" vence estilo em linha. Vale apenas dentro do bloco.
 *
 * Ajustes sem editar este arquivo (no CSS do tema ou em "CSS adicional"):
 *   .mm-product-video { --mmvp-largura: 720px; --mmvp-raio: 12px; --mmvp-proporcao: 16 / 9; }
 */

.mm-product-video {
	--mmvp-largura: 800px;     /* largura máxima do player; a coluna do artigo pode ser menor */
	--mmvp-raio: 10px;         /* cantos arredondados */
	--mmvp-proporcao: 16 / 9;  /* estilo YouTube */
	--mmvp-fundo: #000;        /* faixas pretas (vídeo vertical dentro do quadro 16:9) */

	box-sizing: border-box !important;
	width: 100% !important;
	max-width: min(100%, var(--mmvp-largura)) !important;
	margin: 1.4em auto !important;
	padding: 0 !important;
}

.mm-product-video[hidden],
.mm-product-video[data-mm-duplicado] {
	display: none !important;
}

/* O quadro: sempre 16:9, o vídeo cabe inteiro (object-fit: contain) e sobra faixa preta se ele for vertical. */
.mm-product-video video {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--mmvp-proporcao) !important;
	object-fit: contain !important;
	background: var(--mmvp-fundo) !important;
	border-radius: var(--mmvp-raio) !important;
	margin: 0 !important;
	outline-offset: 2px;
}

/* Tela cheia: o vídeo ocupa a tela toda, sem a proporção nem os cantos do quadro. Cada prefixo em regra própria,
   porque um seletor desconhecido invalida a regra inteira. */
.mm-product-video video:fullscreen {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	background: #000 !important;
}
.mm-product-video video:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	background: #000 !important;
}

/* Legenda (quando o artigo tem). */
.mm-product-video .mm-product-video-legenda {
	margin: .5em 0 0 !important;
	font-size: .9em !important;
	line-height: 1.4 !important;
	opacity: .85;
}

/* Quem prefere menos movimento não ganha nenhuma transição daqui (não há), mas o foco fica sempre visível. */
.mm-product-video video:focus-visible {
	outline: 2px solid currentColor;
}