/* DVT Users & Challenges Addon – Bloco "Wave Divider"
 *
 * Reproduz o mecanismo dos shape dividers do Spectra (posicionamento,
 * virar, inverter, cor) com classes próprias — de propósito não reutiliza
 * as classes .uagb-container__shape* do Spectra, para não depender do CSS
 * dele estar carregado nesta página (o Spectra só enfileira esse CSS
 * quando há mesmo um bloco Container dele na página).
 *
 * Diferença importante face às formas nativas do Spectra: aquelas vivem
 * DENTRO do Container que decoram, por isso herdam a largura dele de
 * graça. Este bloco é um IRMÃO do Container (não um filho) — sem ajuda
 * nenhuma, ficaria preso à largura normal do conteúdo da página e cortado
 * nas laterais em qualquer secção full-bleed. Por isso o wrapper quebra
 * sempre para a largura total do viewport (técnica 100vw), independente
 * de qualquer alinhamento escolhido no bloco — o tema não implementa
 * .alignwide/.alignfull (sem suporte a FSE), por isso essas classes não
 * fariam nada sozinhas.
 */

.dvtuca-wave-divider {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	line-height: 0;
	direction: ltr;
}

.dvtuca-wave-divider svg {
	display: block;
	width: calc(var(--dvtuca-wave-width, 100%) + 1.3px);
	height: var(--dvtuca-wave-height, 150px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* Virar (espelho horizontal) — mesma técnica do Spectra (rotateY em vez de
 * scaleX), para o comportamento ficar idêntico ao dos shape dividers dele. */
.dvtuca-wave-divider--flip svg {
	transform: translateX(-50%) rotateY(180deg);
}

/* Inverter (a forma passa a apontar para o lado oposto) — roda o wrapper
 * inteiro, não só o svg, tal como o Spectra faz no ".uagb-container__invert". */
.dvtuca-wave-divider--invert {
	transform: rotate(180deg);
}

.dvtuca-wave-divider__fill {
	fill: var(--dvtuca-wave-color, #ffffff);
	transform-origin: center;
}