/**
 * Widget "Seção Imagem + Texto" (widgets/pagina-split.php)
 *
 * Valores conferidos contra `.split` e `.stats` dos mockups aprovados
 * (abrangencia-comunicacao.html e mockup_fjpn_audiovisual.html).
 */

.fjpn-split {
	background: var(--fjpn-split-secao-bg, transparent);
	padding-block: var(--fjpn-space-section-py-md);
}

/* ==========================================================================
   1. GRADE
   ========================================================================== */

.fjpn-split__grid {
	display: grid;
	grid-template-columns: 1fr;
	/* 54px é o valor do modelo — não é um dos tokens de gap do tema, e
	   arredondar para 48px encolheria a calha de forma perceptível ao lado
	   do mapa. Fica literal, e o painel expõe um controle para ajustar. */
	gap: 54px;
	align-items: center;
}

/* 900px: no modelo a virada é em 800px, mas a coluna de texto com o bloco de
   quatro estatísticas fica apertada entre 800 e 900. Subir o ponto de virada
   mantém a leitura sem alterar nenhuma medida do desenho. */
@media (min-width: 900px) {
	.fjpn-split__grid {
		/* Assimetria do modelo: a coluna de texto é um fio mais larga que a
		   da imagem. Some ao olhar, mas é o que impede o título de quebrar
		   numa linha órfã. */
		grid-template-columns: 1.02fr 0.98fr;
	}

	/* A imagem vem primeiro no DOM. Para mandá-la à direita, o `order` troca
	   os dois no desktop — e some no celular, onde a ordem natural (imagem,
	   depois texto) é a do modelo. */
	.fjpn-split--invertido .fjpn-split__visual {
		order: 2;
	}

	.fjpn-split--invertido .fjpn-split__copy {
		order: 1;
	}

	.fjpn-split--invertido .fjpn-split__grid {
		grid-template-columns: 0.98fr 1.02fr;
	}
}

/* Item de grade tem `min-width: auto` e não encolhe abaixo do próprio
   min-content: sem isto, uma imagem larga empurra a coluna para fora da faixa
   de 1fr e o layout vaza. Mesma causa-raiz já documentada em hero.css e
   sobre.css. */
.fjpn-split__visual,
.fjpn-split__copy {
	min-width: 0;
}

/* ==========================================================================
   2. IMAGEM
   ========================================================================== */

/* O prefixo `.elementor` é obrigatório: `.elementor img { height: auto }`
   tem especificidade (0,1,1) e venceria `.fjpn-split__img` (0,1,0),
   descartando em silêncio qualquer altura declarada aqui. */
.elementor .fjpn-split__img {
	display: block;
	width: 100%;
	height: auto;
}

.fjpn-split--arredondado .fjpn-split__img {
	border-radius: var(--fjpn-radius-2xl);
}

/* No celular o modelo limita a largura da imagem e a centraliza, para o mapa
   não ficar gigante numa coluna só. */
@media (max-width: 899px) {
	.fjpn-split__visual {
		max-width: 32.5rem; /* 520px, valor do modelo */
		margin-inline: auto;
	}
}

/* ==========================================================================
   3. TEXTO
   ========================================================================== */

.fjpn-split__eyebrow {
	display: block;
	margin-bottom: var(--fjpn-gap-icon-text);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-eyebrow);
	font-weight: var(--fjpn-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fjpn-split-eyebrow, var(--fjpn-orange-primary));
}

.fjpn-split__titulo {
	margin: 0 0 var(--fjpn-gap-medium);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-lg);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-snug);
	color: var(--fjpn-split-titulo, var(--fjpn-text-primary));
}

.fjpn-split__texto {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-split-texto, var(--fjpn-text-muted));
}

/* O editor rico devolve os próprios <p>: o espaçamento fica ENTRE eles, e a
   primeira/última margem é zerada para o bloco não descolar do título nem
   das estatísticas. */
.fjpn-split__texto p {
	margin: 0 0 var(--fjpn-gap-medium);
}

.fjpn-split__texto > :first-child {
	margin-top: 0;
}

.fjpn-split__texto > :last-child {
	margin-bottom: 0;
}

.fjpn-split__texto a {
	color: var(--fjpn-blue-primary);
	text-decoration: underline;
}

/* ==========================================================================
   4. ESTATÍSTICAS
   O número de colunas é controlado pelo painel (responsivo), então aqui fica
   só a aparência do cartão. O padrão do controle já reproduz o modelo:
   4 colunas no desktop, 2 no tablet, 1 no celular.
   ========================================================================== */

.fjpn-split__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px; /* valor do modelo */
	margin-top: 26px; /* valor do modelo */
}

.fjpn-split__stat {
	padding: 18px 16px; /* valores do modelo */
	background: var(--fjpn-split-stat-bg, var(--fjpn-bg-soft));
	border: var(--fjpn-border-width-default) solid var(--fjpn-split-stat-borda, var(--fjpn-slate-200));
	border-radius: var(--fjpn-radius-lg);
}

.fjpn-split__stat-numero {
	display: block;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-stat-default);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1.1;
	color: var(--fjpn-split-stat-numero, var(--fjpn-blue-primary));
}

.fjpn-split__stat-rotulo {
	display: block;
	margin-top: 6px;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	line-height: 1.4;
	color: var(--fjpn-split-stat-rotulo, var(--fjpn-text-muted));
}