/**
 * Widget "Seção Números"
 *
 * Fonte: architecture/secoes-design.md (seção `Numeros`) e
 * architecture/design-tokens.md. Grid de 4 cards de credibilidade
 * institucional (ícone + valor grande + rótulo + subtexto), fundo
 * `--fjpn-bg-soft`, cards brancos com `.fjpn-card-lift` (classe
 * compartilhada de base.css — não redefinida aqui).
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal.
 */

.fjpn-numeros {
	position: relative;
	padding-block: var(--fjpn-space-section-py-md);
	background: var(--fjpn-numeros-bg, var(--fjpn-bg-soft));
}

/* Fundo em imagem (opcional, widgets/numeros.php `imagem_fundo_secao`) — a
   cor de fundo da seção vira camada de contraste (overlay) sobre a foto,
   mesmo padrão de widgets/pagina-cabecalho.php. Opacidade fixa: não é
   controle exposto à cliente, só a imagem e a cor de fundo são. */
.fjpn-numeros--fundo-imagem {
	background-image: var(--fjpn-numeros-imagem);
	background-size: cover;
	background-position: center;
}

.fjpn-numeros__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--fjpn-numeros-bg, var(--fjpn-bg-soft));
	opacity: 0.92;
}

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

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

/* 640px = --fjpn-breakpoint-sm (40rem). Custom properties não são resolvidas
   dentro da condição de @media — valor literal aqui, mesma limitação já
   documentada em base.css. */
@media (min-width: 640px) {
	.fjpn-numeros__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 1024px = --fjpn-breakpoint-lg (64rem). */
@media (min-width: 1024px) {
	.fjpn-numeros__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fjpn-numeros__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--fjpn-padding-card-stat);
	background: var(--fjpn-numeros-card-bg, var(--fjpn-white));
	/* Borda sutil — protótipo aprovado mostra card com contorno claro, não
	   só sombra flutuando sem limite definido. */
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-3xl);
	box-shadow: var(--fjpn-shadow-card);
}

.fjpn-numeros__icone {
	font-size: var(--fjpn-text-heading-md);
	line-height: 1;
	margin-bottom: var(--fjpn-gap-icon-text);
}

/* Valor grande — 2rem por padrão, reduz para 1.4rem quando o texto passa de
   8 caracteres (regra literal da spec, `s.value.length > 8`). Ver modificador
   `--longo` abaixo, aplicado pelo PHP via mb_strlen(). */
.fjpn-numeros__valor {
	display: block;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-stat-default);
	font-weight: var(--fjpn-weight-extrabold);
	line-height: var(--fjpn-leading-tight);
	letter-spacing: var(--fjpn-tracking-tight);
	color: var(--fjpn-numeros-valor-cor, var(--fjpn-blue-primary));
	margin-bottom: var(--fjpn-gap-icon-text);
}

.fjpn-numeros__valor--longo {
	font-size: var(--fjpn-text-stat-long);
}

.fjpn-numeros__rotulo {
	display: block;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-button);
	/* Rótulo em negrito no protótipo aprovado — semibold ficava fraco demais
	   abaixo do valor extrabold. */
	font-weight: var(--fjpn-weight-bold);
	color: var(--fjpn-numeros-rotulo-cor, var(--fjpn-text-primary));
	margin-bottom: var(--fjpn-gap-icon-text);
}

.fjpn-numeros__subtexto {
	display: block;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: var(--fjpn-numeros-subtexto-cor, var(--fjpn-text-muted));
}

/* Contagem animada: enquanto o JS ainda não rodou (JS desabilitado ou script
 * não carregado), o número final já está no HTML via fallback — ver
 * assets/js/numeros.js. Nada a esconder aqui via CSS. */