/**
 * Widget "Destaque"
 *
 * Caixa de destaque/citação — texto grande, autor/fonte opcional, ícone
 * opcional, em 3 variantes visuais. Estrutura em duas camadas, mesmo padrão
 * das demais seções do site: `.fjpn-pagina-destaque-secao` (largura total,
 * fundo neutro/transparente) → `.fjpn-container` (limite de 1280px) →
 * `.fjpn-pagina-destaque` (a caixa em si, centralizada e mais estreita que o
 * container, para o texto grande não esticar demais em telas largas).
 *
 * Cores customizáveis chegam como custom properties inline
 * (`--fjpn-destaque-*`, injetadas pelo widget PHP, já validadas por
 * `sanitizar_cor_css()`) — este arquivo só consome `var(--fjpn-destaque-*)`.
 */

.fjpn-pagina-destaque-secao {
	padding-block: var(--fjpn-space-section-py-md);
}

.fjpn-pagina-destaque {
	/* Reset do UA stylesheet — <blockquote> nasce com margin lateral própria
	   em todo navegador; zerado aqui porque o posicionamento é feito por
	   este próprio arquivo (margin-inline: auto), não pelo padrão do browser. */
	margin: 0 auto;
	max-width: 48rem; /* largura de leitura confortável para texto grande, sem token dedicado */
	text-align: center;
}

.fjpn-pagina-destaque__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--fjpn-gap-medium);
	color: var(--fjpn-destaque-cor-destaque, var(--fjpn-blue-primary));
	font-size: var(--fjpn-text-heading-md);
	line-height: 1;
}

.fjpn-pagina-destaque__texto {
	margin: 0;
	color: var(--fjpn-destaque-cor-texto, var(--fjpn-text-primary));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-sm);
	font-weight: var(--fjpn-weight-semibold);
	line-height: var(--fjpn-leading-tight);
	letter-spacing: var(--fjpn-tracking-tight);
}

@media (min-width: 768px) {
	.fjpn-pagina-destaque__texto {
		font-size: var(--fjpn-text-heading-md);
	}
}

.fjpn-pagina-destaque__footer {
	margin-top: var(--fjpn-gap-medium);
}

.fjpn-pagina-destaque__autor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	font-style: normal; /* <cite> vem itálico por padrão do UA stylesheet */
	color: var(--fjpn-destaque-cor-autor, var(--fjpn-text-muted));
}

.fjpn-pagina-destaque__autor-nome {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	font-weight: var(--fjpn-weight-bold);
}

.fjpn-pagina-destaque__autor-cargo {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-regular);
}

/* ==========================================================
 * VARIANTES
 * ========================================================== */

/* Caixa clara — fundo suave, sem borda de destaque. */
.fjpn-pagina-destaque--caixa-clara {
	padding: var(--fjpn-padding-cta-block);
	background: var(--fjpn-destaque-bg, var(--fjpn-blue-light));
	border-radius: var(--fjpn-radius-3xl);
}

@media (min-width: 768px) {
	.fjpn-pagina-destaque--caixa-clara {
		padding: var(--fjpn-padding-cta-block-md);
	}
}

/* Caixa azul — preenchida, texto/autor claros por padrão (fallback já
   assume fundo escuro; se a cliente customizar cor_texto/cor_autor, o
   contraste passa a ser responsabilidade dela, mesma lógica de
   widgets/areas.php). */
.fjpn-pagina-destaque--caixa-azul {
	padding: var(--fjpn-padding-cta-block);
	background: var(--fjpn-destaque-bg, var(--fjpn-gradient-cta));
	border-radius: var(--fjpn-radius-3xl);
}

@media (min-width: 768px) {
	.fjpn-pagina-destaque--caixa-azul {
		padding: var(--fjpn-padding-cta-block-md);
	}
}

.fjpn-pagina-destaque--caixa-azul .fjpn-pagina-destaque__texto {
	color: var(--fjpn-destaque-cor-texto, var(--fjpn-white));
}

.fjpn-pagina-destaque--caixa-azul .fjpn-pagina-destaque__autor {
	color: var(--fjpn-destaque-cor-autor, var(--fjpn-blue-light));
}

.fjpn-pagina-destaque--caixa-azul .fjpn-pagina-destaque__icone {
	color: var(--fjpn-destaque-cor-destaque, var(--fjpn-white));
}

/* Apenas borda lateral — sem caixa, sem fundo; mais discreta para
   intercalar entre blocos de texto corrido (ver decisão nº 3 no topo do
   widget PHP: esta variante não consome --fjpn-destaque-bg). */
.fjpn-pagina-destaque--borda-lateral {
	padding-inline-start: var(--fjpn-gap-hero-columns);
	border-inline-start: 4px solid var(--fjpn-destaque-cor-destaque, var(--fjpn-blue-primary));
	text-align: left;
}

.fjpn-pagina-destaque--borda-lateral .fjpn-pagina-destaque__icone,
.fjpn-pagina-destaque--borda-lateral .fjpn-pagina-destaque__autor {
	align-items: flex-start;
}

/* ==========================================================
 * 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-destaque > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}