/* ==========================================================================
   MVA PACK — estilos gerais (front e editor)
   Carregado via enqueue_block_assets. Cada recurso em sua seção.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CORTES — recorte diagonal por canto (clip-path)
   As variáveis --c-se, --c-sd, --c-ie, --c-id chegam inline no bloco:
   pelo painel "Cortes" do editor ou por classes (corte-se-157, corte-id-30p, corte-40).
   Em Mídia e Texto o corte vai só na mídia; as variáveis são herdadas pela figure.
   -------------------------------------------------------------------------- */

.mva-corte,
[class^="corte-"],
[class*=" corte-"] {
	--c-escala: 1;
}

.mva-corte:not(.wp-block-media-text),
[class^="corte-"]:not(.wp-block-media-text),
[class*=" corte-"]:not(.wp-block-media-text),
.wp-block-media-text.mva-corte > .wp-block-media-text__media,
.wp-block-media-text[class*=" corte-"] > .wp-block-media-text__media {
	clip-path: polygon(
		calc(var(--c-se, 0px) * var(--c-escala)) 0,
		calc(100% - var(--c-sd, 0px) * var(--c-escala)) 0,
		100% calc(var(--c-sd, 0px) * var(--c-escala)),
		100% calc(100% - var(--c-id, 0px) * var(--c-escala)),
		calc(100% - var(--c-id, 0px) * var(--c-escala)) 100%,
		calc(var(--c-ie, 0px) * var(--c-escala)) 100%,
		0 calc(100% - var(--c-ie, 0px) * var(--c-escala)),
		0 calc(var(--c-se, 0px) * var(--c-escala))
	);
}

/* Garante que o bloco Mídia e Texto nunca seja recortado inteiro,
   mesmo se sobrar CSS antigo de cortes no site (tema ou cache). */
.wp-block-media-text.mva-corte,
.wp-block-media-text[class*=" corte-"] {
	clip-path: none !important;
}

@media (max-width: 768px) {
	.corte768 { --c-escala: 0.5; }
	.corte-off768:not(.wp-block-media-text),
	.wp-block-media-text.corte-off768 > .wp-block-media-text__media { clip-path: none; }
}

@media (max-width: 520px) {
	.corte520 { --c-escala: 0.5; }
}

/* Editor: o rótulo do bloco (:before do style-editor.css) fica 9px acima da
   caixa e seria recortado. No editor, o polígono ganha uma faixa de 20px acima
   da borda superior, entre os cortes de cima, para o rótulo ficar na altura
   original; ele só anda para a direita, para depois do corte superior esquerdo.
   Mídia e Texto não precisa: lá o recorte é só na mídia. */
.editor-styles-wrapper .mva-corte:not(.wp-block-media-text) {
	clip-path: polygon(
		calc(var(--c-se, 0px) * var(--c-escala)) -20px,
		calc(100% - var(--c-sd, 0px) * var(--c-escala)) -20px,
		calc(100% - var(--c-sd, 0px) * var(--c-escala)) 0,
		100% calc(var(--c-sd, 0px) * var(--c-escala)),
		100% calc(100% - var(--c-id, 0px) * var(--c-escala)),
		calc(100% - var(--c-id, 0px) * var(--c-escala)) 100%,
		calc(var(--c-ie, 0px) * var(--c-escala)) 100%,
		0 calc(100% - var(--c-ie, 0px) * var(--c-escala)),
		0 calc(var(--c-se, 0px) * var(--c-escala)),
		calc(var(--c-se, 0px) * var(--c-escala)) 0
	);
}

.editor-styles-wrapper .mva-corte:not(.wp-block-media-text):before {
	left: calc(var(--c-se, 0px) * var(--c-escala, 1) + 6px) !important;
}

@media (max-width: 768px) {
	.editor-styles-wrapper .mva-corte.corte-off768:not(.wp-block-media-text) { clip-path: none; }
}