/**
 * IDX Estilo de Vídeos — padronização de vídeos incorporados em artigos.
 *
 * Escopo: apenas o conteúdo de posts/páginas (.entry-content e o widget
 * "Conteúdo do post" do Elementor). Iframes de publicidade e outros
 * elementos fora desses wrappers não são afetados.
 *
 * Referências de comportamento do core WordPress:
 * - Bloco "Incorporar" com proporção definida ganha as classes
 *   wp-embed-aspect-{w}-{h} + wp-has-aspect-ratio; o iframe é posicionado
 *   absoluto preenchendo o wrapper (não alterar height nesses casos).
 * - Bloco "Vídeo" grava aspect-ratio inline no <video>, o que permite
 *   limitar a altura e deixar o navegador recalcular a largura.
 */

:root {
	/* Altura máxima de vídeos verticais no desktop. */
	--idx-video-max-height: 640px;
	--idx-video-radius: 12px;
	--idx-video-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	--idx-video-caption-color: #666;
}

/* ===================================================================
   1. Embeds horizontais (YouTube, Vimeo…) — bloco "Incorporar"
   =================================================================== */

/* Mesma largura da coluna de texto, centralizado.
   alignwide/alignfull ficam livres para ocupar mais espaço. */
.entry-content .wp-block-embed.is-type-video:not(.alignwide):not(.alignfull),
.elementor-widget-theme-post-content .wp-block-embed.is-type-video:not(.alignwide):not(.alignfull) {
	max-width: 720px;
	margin-inline: auto;
	margin-block: 2.5rem;
}

/* Moldura arredondada com sombra. O overflow: hidden corta os cantos
   do iframe por cima (o wrapper é relative quando há proporção). */
.entry-content .wp-block-embed__wrapper,
.elementor-widget-theme-post-content .wp-block-embed__wrapper {
	border-radius: var(--idx-video-radius);
	overflow: hidden;
	box-shadow: var(--idx-video-shadow);
	background: #000;
}

/* Fallback de proporção 16:9 APENAS para embeds sem o wrapper
   responsivo do core. Quando wp-has-aspect-ratio está presente, o
   iframe é absoluto com width/height 100% — alterar height aqui
   deixaria o player com altura zero. */
.entry-content .wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper iframe,
.elementor-widget-theme-post-content .wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* ===================================================================
   2. Vídeos verticais (stories/Shorts) em embeds
   -------------------------------------------------------------------
   O core marca a proporção na figure (wp-embed-aspect-9-16 etc.).
   No desktop limitamos a largura para a altura ficar próxima da de
   um vídeo 16:9 de coluna cheia (~640px), centralizado — mesmo
   padrão de embeds verticais de TikTok/Instagram em artigos.
   No mobile permanece em largura total.
   =================================================================== */

@media (min-width: 782px) {

	/* Centraliza todos os embeds verticais/quadrados limitados abaixo. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-9-16"],
	.entry-content .wp-block-embed[class*="wp-embed-aspect-1-2"],
	.entry-content .wp-block-embed[class*="wp-embed-aspect-2-3"],
	.entry-content .wp-block-embed[class*="wp-embed-aspect-3-4"],
	.entry-content .wp-block-embed[class*="wp-embed-aspect-4-5"],
	.entry-content .wp-block-embed[class*="wp-embed-aspect-1-1"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-9-16"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-1-2"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-2-3"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-3-4"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-4-5"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-1-1"] {
		margin-inline: auto;
	}

	/* 9:16 (Shorts/stories): 640px × 9/16 = 360px de largura. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-9-16"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-9-16"] {
		max-width: min(100%, calc(var(--idx-video-max-height) * 9 / 16));
	}

	/* 1:2: 640px × 1/2 = 320px. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-1-2"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-1-2"] {
		max-width: min(100%, calc(var(--idx-video-max-height) / 2));
	}

	/* 2:3: 640px × 2/3 ≈ 427px. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-2-3"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-2-3"] {
		max-width: min(100%, calc(var(--idx-video-max-height) * 2 / 3));
	}

	/* 3:4: 640px × 3/4 = 480px. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-3-4"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-3-4"] {
		max-width: min(100%, calc(var(--idx-video-max-height) * 3 / 4));
	}

	/* 4:5: 640px × 4/5 = 512px. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-4-5"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-4-5"] {
		max-width: min(100%, calc(var(--idx-video-max-height) * 4 / 5));
	}

	/* 1:1 (quadrado): 640px. */
	.entry-content .wp-block-embed[class*="wp-embed-aspect-1-1"],
	.elementor-widget-theme-post-content .wp-block-embed[class*="wp-embed-aspect-1-1"] {
		max-width: min(100%, var(--idx-video-max-height));
	}
}

/* ===================================================================
   3. Vídeo self-hosted (bloco "Vídeo", mp4)
   -------------------------------------------------------------------
   width/height auto anulam os atributos HTML; o tamanho natural é
   limitado por max-width (coluna) e max-height (teto de altura).
   Em vídeos verticais o navegador recalcula a largura proporcional
   a partir do aspect-ratio inline gravado pelo core — é isso que
   impede o vídeo de ocupar a coluna inteira e virar um monstro no
   desktop. Em 16:9 de coluna cheia (~405px de altura) o teto nunca
   é atingido, então vídeos horizontais não mudam de tamanho.
   O teto em svh também limita levemente no mobile, evitando que o
   player cubra a tela inteira em aparelhos altos.
   =================================================================== */

.entry-content .wp-block-video video,
.elementor-widget-theme-post-content .wp-block-video video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(var(--idx-video-max-height), 75vh);
	max-height: min(var(--idx-video-max-height), 75svh);
	margin-inline: auto;
	border-radius: var(--idx-video-radius);
	box-shadow: var(--idx-video-shadow);
	background: #000;
}

/* ===================================================================
   4. Legendas (créditos de vídeo)
   =================================================================== */

.entry-content .wp-block-embed figcaption,
.entry-content .wp-block-video figcaption,
.elementor-widget-theme-post-content .wp-block-embed figcaption,
.elementor-widget-theme-post-content .wp-block-video figcaption {
	text-align: center;
	font-size: 0.85rem;
	color: var(--idx-video-caption-color);
	margin-top: 0.6rem;
	margin-bottom: 0;
}