/**
 * Widget "Seção Áreas de Atuação"
 *
 * Fonte: architecture/secoes-design.md (seção `Areas`) e
 * architecture/design-tokens.md. Cabeçalho centralizado + grid de cards
 * horizontais (ícone à esquerda, texto à direita), 1 coluna no mobile,
 * 2 colunas a partir de `lg` (1024px) — ver design-tokens.md §6.2.
 *
 * Cada card recebe seu par de cores (destaque + fundo) via custom property
 * inline, injetada por widgets/areas.php (`--fjpn-areas-color`/`--fjpn-areas-
 * bg`) — mesmo padrão de widgets/diamond-card.php. Esse par NÃO é um token
 * de marca (ver tokens.css §18 "Decorativo"): os valores usados como
 * `default` nos controles vivem só no PHP, este CSS só consome a variável.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal exceto
 * onde não existe token dedicado (comentado caso a caso, mesmo critério já
 * usado em base.css e missao.css).
 */

.fjpn-areas {
	position: relative;
	padding-block: var(--fjpn-space-section-py-lg);
	background: var(--fjpn-areas-secao-bg, var(--fjpn-white));
}

/* Fundo em imagem (opcional, widgets/areas.php `secao_imagem_fundo`) — a cor
   de fundo da seção vira camada de contraste (overlay) sobre a foto, mesmo
   padrão de widgets/pagina-cabecalho.php + assets/css/sections/pagina-
   cabecalho.css. Opacidade fixa (não é controle exposto à cliente — só
   `secao_imagem_fundo` e `secao_cor_fundo` são, ver comentário do widget). */
.fjpn-areas--fundo-imagem {
	background-image: var(--fjpn-areas-secao-imagem);
	background-size: cover;
	background-position: center;
}

.fjpn-areas__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--fjpn-areas-secao-bg, var(--fjpn-white));
	opacity: 0.92;
}

.fjpn-areas__container {
	position: relative;
	z-index: 1;
}

/* ==========================================================
 * CABEÇALHO — centralizado, mesmo padrão de missao.php/sobre.php.
 * ========================================================== */

.fjpn-areas__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 42rem; /* largura de leitura do parágrafo de apoio, sem token dedicado */
	margin-inline: auto;
	margin-bottom: var(--fjpn-space-section-py-md);
	text-align: center;
}

.fjpn-areas__eyebrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--fjpn-gap-icon-text-lg);
}

/* Duas classes (mesma especificidade de .fjpn-eyebrow em base.css, mas
   escopado ao componente) para sobrepor a cor padrão do eyebrow sem tocar
   no utilitário compartilhado — widgets/areas.php `secao_cor_eyebrow`. */
.fjpn-areas__eyebrow .fjpn-eyebrow {
	color: var(--fjpn-areas-eyebrow-cor, var(--fjpn-orange-cta));
}

.fjpn-areas__titulo {
	margin-block: 0 var(--fjpn-gap-icon-text-lg);
	color: var(--fjpn-areas-titulo-cor, var(--fjpn-text-primary));
}

.fjpn-areas__destaque {
	color: var(--fjpn-blue-primary);
}

.fjpn-areas__texto {
	margin: 0;
	color: var(--fjpn-areas-texto-cor, var(--fjpn-slate-700));
}

/* ==========================================================
 * GRID — 1 coluna no mobile, 2 colunas a partir de lg (design-tokens §6.2).
 * ========================================================== */

.fjpn-areas__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fjpn-gap-grid);
}

@media (min-width: 1024px) {
	.fjpn-areas__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================
 * CARD — horizontal (ícone à esquerda, texto à direita), cor por item.
 * ========================================================== */

/* Item 35 do diagnóstico: a cor por pilar (--fjpn-areas-bg, injetada inline
   por widgets/areas.php) só estava sendo consumida pelo ícone — o card
   inteiro ficava branco. No aprovado ela pinta o card inteiro; o fallback
   repete o mesmo tom usado como default do primeiro pilar (Educação) para
   um card sem cor customizada não ficar sem fundo.
   Item 37: padding maior (--fjpn-padding-card-stat, já usado no card de
   estatística de Números) dá o respiro/altura que faltava — não há token
   dedicado a um padding "de card grande" além desse. */
.fjpn-areas__card {
	display: flex;
	align-items: flex-start;
	gap: var(--fjpn-gap-medium);
	padding: var(--fjpn-padding-card-stat);
	background: var(--fjpn-areas-bg, var(--fjpn-blue-light));
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-3xl);
	text-decoration: none;
	color: inherit;
}

/* Card sem link (default do design original) fica como <div> — sem cursor
   de link nem foco de teclado indevido; o hover de elevação (.fjpn-card-lift)
   continua valendo como reforço visual do grid. */
.fjpn-areas__card--link {
	cursor: pointer;
}

/* Item 36 do diagnóstico: no aprovado o ícone é um quadrado branco
   arredondado com sombra, destacando-se do card colorido — mesmo
   tratamento do ícone da Missão (item 31), com fundo/cor invertidos porque
   aqui o card já é colorido. Como --fjpn-areas-bg passou a pintar o card
   inteiro (ver .fjpn-areas__card acima), o ícone fica livre para usar
   branco sólido em vez do pastel. */
.fjpn-areas__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--fjpn-radius-2xl);
	background: var(--fjpn-white);
	box-shadow: var(--fjpn-shadow-card);
	color: var(--fjpn-areas-color, var(--fjpn-blue-primary));
	font-size: var(--fjpn-text-heading-sm);
	line-height: 1;
}

/* O badge aceita emoji, ícone da biblioteca ou imagem/logo (controle
   `tipo_midia` em widgets/areas.php). O contêiner é o mesmo nos três casos —
   muda só o que vai dentro dele. */

/* `padding` para a logo não encostar na borda do badge, e as duas dimensões
   com `max-*` para que o `object-fit` tenha uma caixa a que se ajustar.
   O prefixo `.elementor` é obrigatório: `.elementor img { height: auto }` tem
   especificidade (0,1,1) e descartaria a altura declarada aqui. */
.elementor .fjpn-areas__icon-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: 0.375rem;
	object-fit: contain; /* sobrescrito inline pelo controle "Ajuste da imagem" */
	display: block;
}

/* Ícone da biblioteca: o Elementor entrega <i> (fonte) ou <svg> (SVG inline).
   O <i> herda `font-size` do badge; o <svg> não tem tamanho intrínseco útil e
   precisa ser dimensionado à mão. `fill: currentColor` faz o ícone seguir a
   cor de destaque do card, igual ao emoji e ao título. */
.fjpn-areas__icon--icone svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.fjpn-areas__content {
	min-width: 0; /* permite quebra de texto longo dentro do flex item */
}

.fjpn-areas__card-title {
	margin: 0 0 var(--fjpn-gap-icon-text);
	color: var(--fjpn-areas-color, var(--fjpn-blue-primary));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-sm);
	font-weight: var(--fjpn-weight-extrabold);
	line-height: var(--fjpn-leading-tight);
}

/* --fjpn-text-muted (#64748b) foi calculado para 4,5:1 contra branco — com o
   card agora pintado pelo --fjpn-areas-bg pastel do item (item 35), a
   mesma cor cai pra ~4,0-4,3:1 nos quatro pilares padrão, reprovando AA
   pra texto de 16px regular. --fjpn-slate-700 mantém ~9:1 nos mesmos
   fundos, com folga suficiente pra cores customizadas pela cliente desde
   que sigam a orientação do controle ("tom bem mais claro que a cor de
   destaque"). */
.fjpn-areas__card-text {
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	font-weight: var(--fjpn-weight-regular);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-slate-700);
}