/**
 * Widget "Seção Missão"
 *
 * Fonte: architecture/secoes-design.md (seção `Missao`) e
 * architecture/design-tokens.md. Bloco único centralizado, largura estreita
 * (max-w-4xl/56rem), fundo em gradiente claro (BLUE_LIGHT → #dbeafe) com
 * padrão de pontos decorativo sutil. Sem imagem, sem interatividade no
 * design de origem — o único movimento da página (prefers-reduced-motion)
 * já é neutralizado globalmente por base.css; nada específico a fazer aqui.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal exceto
 * onde não existe token dedicado (comentado caso a caso, mesmo padrão já
 * usado em base.css e diamond-card.css).
 */

.fjpn-missao {
	position: relative;
	overflow: hidden;
	padding-block: var(--fjpn-space-section-py-lg);

	/* "#dbeafe" é o segundo stop do gradiente descrito na spec — não existe
	   token dedicado a esse valor específico (tokens.css só define
	   --fjpn-blue-light como stop único); mantido literal, mesmo critério já
	   usado para --fjpn-white em base.css. */
	background: var(--fjpn-missao-bg, linear-gradient(135deg, var(--fjpn-blue-light) 0%, #dbeafe 100%));
}

/* Padrão de pontos decorativo sutil, sobre todo o fundo da seção. */
.fjpn-missao::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--fjpn-blue-primary) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.06;
	pointer-events: none;
}

.fjpn-missao__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

	/* max-w-4xl (56rem/896px) — mais estreito que o container padrão do site
	   (--fjpn-container-width, 80rem); não há token dedicado a esta largura
	   específica de seção. */
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: var(--fjpn-container-padding);
	text-align: center;
}

@media (min-width: 1024px) {
	.fjpn-missao__container {
		padding-inline: var(--fjpn-container-padding-lg);
	}
}

/* Item 31 do diagnóstico: no aprovado o ícone é um quadrado azul com cantos
   arredondados e sombra — não um círculo branco. --fjpn-radius-2xl é o
   radius de blocos de destaque (badges, botões); --fjpn-blue-primary é o
   mesmo azul institucional usado em badges no resto do site. */
.fjpn-missao__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--fjpn-gap-medium);
	border-radius: var(--fjpn-radius-2xl);
	background: var(--fjpn-missao-destaque-cor, var(--fjpn-blue-primary));
	box-shadow: var(--fjpn-shadow-card);
	font-size: var(--fjpn-text-heading-md);
	line-height: 1;
}

/* O eyebrow é o ÚNICO elemento desta seção alinhado à esquerda — ícone,
   título, texto e botão seguem centralizados (ver o aprovado). O wrapper
   precisa de `align-self: stretch` para ocupar a largura do bloco de 56rem;
   sem isso ele encolhe até o conteúdo e o `align-items: center` do container
   o centraliza junto com o resto, levando o eyebrow no meio. Encolhido, o
   `align-self: flex-start` do próprio eyebrow (base.css) não tem espaço
   nenhum para atuar. */
.fjpn-missao__eyebrow {
	display: flex;
	align-self: stretch;
	margin-bottom: var(--fjpn-gap-medium);
}

/* Item 33 do diagnóstico: .fjpn-heading-lg (base.css) herda
   --fjpn-text-primary, que é quase preto — no aprovado as duas partes do
   título são azuis, só com tons diferentes. --fjpn-blue-dark contra o
   --fjpn-blue-primary do trecho em destaque logo abaixo dá o contraste
   sutil entre as duas partes, sem cair em preto. */
.fjpn-missao__titulo {
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-missao-titulo-cor, var(--fjpn-blue-dark));
}

.fjpn-missao__destaque {
	color: var(--fjpn-missao-destaque-cor, var(--fjpn-blue-primary));
}

.fjpn-missao__texto {
	/* Reaproveita o gap das colunas do Hero (3rem/48px) como respiro entre o
	   parágrafo e o CTA — não há token de espaçamento vertical dedicado a
	   esse ponto específico do layout. */
	margin-block: 0 var(--fjpn-gap-hero-columns);
	color: var(--fjpn-missao-texto-cor, var(--fjpn-slate-700));
}

/* Botão — reaproveita .fjpn-btn-blue-outline de base.css (não editado);
   estas duas declarações só sobrescrevem fundo/texto+borda quando a
   cliente define uma cor no painel (widgets/missao.php, seção "Estilo").
   Sem escolha, os fallbacks reproduzem exatamente o transparente/azul de
   base.css. */
.fjpn-missao .fjpn-btn-blue-outline {
	background: var(--fjpn-missao-botao-fundo, transparent);
	color: var(--fjpn-missao-botao-texto, var(--fjpn-blue-primary));
	border-color: var(--fjpn-missao-botao-texto, var(--fjpn-blue-primary));
}

/* Mantém o hover claro de base.css (.fjpn-btn-blue-outline:hover) intacto:
   sem esta regra, a declaração de fundo acima (mesma especificidade,
   carregada depois de base.css) venceria também no :hover, apagando o
   realce. Sem override de fundo escolhido pela cliente, o fallback
   reproduz exatamente var(--fjpn-blue-light) do hover original. */
.fjpn-missao .fjpn-btn-blue-outline:hover {
	background: var(--fjpn-missao-botao-fundo-hover, var(--fjpn-blue-light));
}