/**
 * Videos no lugar das fotos.
 *
 * Quase tudo o que dá forma a estes blocos - raio, `object-fit`, largura
 * máxima, o `flex` dos cartões - continua a vir das classes que o Elementor
 * gerou para a imagem que lá estava; o `<video>` sai com essas classes e herda
 * tudo. Aqui só está o que uma imagem não precisava: o fundo enquanto o video
 * não pinta, e a grelha das três caixas do hero.
 *
 * As proporcoes sao as do Figma: duas caixas de 310x188 lado a lado e uma de
 * 644x202 por baixo, com 24 de intervalo num ecra de 1440 - e por isso o
 * intervalo e 1,7vw, que da 24 ali e encolhe com o ecra.
 */

.els-vid {
	--els-vid-vao: clamp( 8px, 1.7vw, 24px );
}

.els-vid__v {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* enquanto o primeiro quadro nao chega, o lugar ja tem a cor do sitio */
	background: #dbe7f3;
}

/*
 * O hero: uma imagem unica passa a tres caixas.
 *
 * O `.elementor` no seletor nao e enfeite: a classe que o Elementor poe na
 * imagem manda `display:block` de dentro de `.elementor`, e sem igualar essa
 * forca a grelha nunca chegava a existir - as tres caixas ficavam coladas.
 */
.elementor .els-vid--heroi {
	display: grid;
	gap: var(--els-vid-vao);
}

/*
 * O raio vem do Elementor, na caixa de fora, e desce por heranca ate aos
 * videos: assim muda-se no editor e tudo acompanha.
 */
.els-vid__par {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--els-vid-vao);
	border-radius: inherit;
}

.els-vid__par .els-vid__v {
	aspect-ratio: 310 / 188;
	border-radius: inherit;
}

.els-vid__v--larga {
	aspect-ratio: 644 / 202;
	border-radius: inherit;
}

/*
 * Os outros quatro sao um video no lugar exacto da foto: a classe do Elementor
 * ja manda no tamanho, e `height:100%` daqui estragava o `height:auto` dela.
 */
.els-vid__v--so {
	height: auto;
}