/**
 * Widget "Bloco de Conteúdo"
 *
 * Título + subtítulo + corpo WYSIWYG, com imagem lateral opcional. A ordem
 * VISUAL da imagem (esquerda/direita) é resolvida por `order` no grid — o
 * HTML sempre emite texto antes da imagem, para leitura estável em leitor de
 * tela (ver decisão nº 1 no topo de widgets/pagina-conteudo.php).
 *
 * Cores customizáveis chegam como custom properties inline
 * (`--fjpn-conteudo-*`, injetadas pelo widget PHP, já validadas por
 * `sanitizar_cor_css()`) — este arquivo só consome `var(--fjpn-conteudo-*)`.
 */

.fjpn-pagina-conteudo {
	padding-block: var(--fjpn-space-section-py-lg);
	background-color: var(--fjpn-conteudo-bg, var(--fjpn-white));
}

.fjpn-pagina-conteudo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fjpn-gap-hero-columns);
	align-items: center;
}

/* ==========================================================
 * COM IMAGEM — 1 coluna no mobile, 2 colunas a partir de lg (1024px),
 * seguindo a escada 1 → 2 sem pular degrau.
 * ========================================================== */

@media (min-width: 1024px) {
	.fjpn-pagina-conteudo--imagem-direita .fjpn-pagina-conteudo__grid,
	.fjpn-pagina-conteudo--imagem-esquerda .fjpn-pagina-conteudo__grid {
		grid-template-columns: 1fr 1fr;
	}

	.fjpn-pagina-conteudo--largura-60-40 .fjpn-pagina-conteudo__grid {
		grid-template-columns: 3fr 2fr;
	}

	.fjpn-pagina-conteudo--largura-40-60 .fjpn-pagina-conteudo__grid {
		grid-template-columns: 2fr 3fr;
	}

	/* Texto sempre primeiro no DOM; "esquerda" só troca a ordem visual. */
	.fjpn-pagina-conteudo--imagem-esquerda .fjpn-pagina-conteudo__texto {
		order: 2;
	}

	.fjpn-pagina-conteudo--imagem-esquerda .fjpn-pagina-conteudo__imagem-col {
		order: 1;
	}
}

/* ==========================================================
 * SEM IMAGEM — texto centralizado, largura de leitura confortável.
 * ========================================================== */

.fjpn-pagina-conteudo--sem-imagem .fjpn-pagina-conteudo__texto {
	max-width: 48rem; /* largura de leitura confortável, sem token dedicado */
	margin-inline: auto;
}

/* ==========================================================
 * TEXTO
 * ========================================================== */

.fjpn-pagina-conteudo__eyebrow {
	color: var(--fjpn-conteudo-cor-destaque, var(--fjpn-orange-cta));
}

.fjpn-pagina-conteudo__titulo {
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-conteudo-cor-titulo, var(--fjpn-text-primary));
}

.fjpn-pagina-conteudo__subtitulo {
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-conteudo-cor-texto, var(--fjpn-slate-700));
}

.fjpn-pagina-conteudo__corpo {
	color: var(--fjpn-conteudo-cor-texto, var(--fjpn-slate-700));
	max-width: 68ch;
}

.fjpn-pagina-conteudo__corpo > *:first-child {
	margin-top: 0;
}

.fjpn-pagina-conteudo__corpo > *:last-child {
	margin-bottom: 0;
}

.fjpn-pagina-conteudo__corpo p {
	margin-block: 0 var(--fjpn-gap-medium);
}

.fjpn-pagina-conteudo__corpo ul,
.fjpn-pagina-conteudo__corpo ol {
	margin-block: 0 var(--fjpn-gap-medium);
	padding-inline-start: 1.25rem;
}

.fjpn-pagina-conteudo__corpo a {
	color: var(--fjpn-conteudo-cor-destaque, var(--fjpn-blue-primary));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.fjpn-pagina-conteudo__corpo a:hover,
.fjpn-pagina-conteudo__corpo a:focus-visible {
	color: var(--fjpn-conteudo-cor-titulo, var(--fjpn-text-primary));
}

.fjpn-pagina-conteudo__corpo strong {
	color: var(--fjpn-conteudo-cor-titulo, var(--fjpn-text-primary));
}

/* ==========================================================
 * IMAGEM
 * ========================================================== */

.fjpn-pagina-conteudo__imagem-col {
	display: block;
}

.elementor .fjpn-pagina-conteudo__imagem {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fjpn-radius-3xl);
	box-shadow: var(--fjpn-shadow-card);
}

/* ==========================================================
 * SANGRIA — largura total dentro do Elementor (ver justificativa completa
 * na seção 5 de base.css; regra própria aqui porque base.css não pode ser
 * editado por este agente).
 * ========================================================== */

.elementor-widget-fjpn-pagina-conteudo > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}