/**
 * Widget "Anos de Impacto"
 *
 * Selo/badge com ícone, número de anos calculado e selo "desde {ano}".
 * Reproduz o componente `AnosDeImpacto` do Figma: fundo azul claro em
 * repouso, gradiente azul escuro + texto branco no hover.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal.
 */

.fjpn-anos-impacto {
	display: inline-flex;
	align-items: center;
	gap: var(--fjpn-gap-icon-text-lg);
	padding: var(--fjpn-gap-medium) var(--fjpn-padding-card);
	background: var(--fjpn-blue-light);
	border-radius: var(--fjpn-radius-2xl);
	box-shadow: var(--fjpn-shadow-card);
	font-family: var(--fjpn-font-sans);
	color: var(--fjpn-blue-primary);
	transition:
		background var(--fjpn-duration-background) var(--fjpn-ease-simple),
		color var(--fjpn-duration-color) var(--fjpn-ease-simple),
		box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

.fjpn-anos-impacto:hover {
	background: var(--fjpn-gradient-blue-button);
	color: var(--fjpn-white);
	box-shadow: var(--fjpn-shadow-card-hover);
}

.fjpn-anos-impacto__icone {
	flex: 0 0 auto;
	font-size: var(--fjpn-text-heading-md);
	line-height: 1;
}

.fjpn-anos-impacto__miolo {
	display: flex;
	flex-direction: column;
	line-height: var(--fjpn-leading-tight);
}

.fjpn-anos-impacto__numero {
	font-size: var(--fjpn-text-stat-default);
	font-weight: var(--fjpn-weight-extrabold);
	letter-spacing: var(--fjpn-tracking-tight);
	color: inherit;
}

/* S5 — no aprovado "ANOS DE IMPACTO" e "DESDE 1995" são caixa alta com
   espaçamento entre letras maior; o rótulo estava em caixa mista, sem
   tracking. --fjpn-tracking-badge é o mesmo token usado no selo abaixo e no
   pill do Hero — texto pequeno em maiúsculas, mesma família de uso. */
.fjpn-anos-impacto__rotulo {
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--fjpn-tracking-badge);
	color: inherit;
	opacity: 0.85;
}

.fjpn-anos-impacto__selo {
	flex: 0 0 auto;
	margin-inline-start: var(--fjpn-gap-icon-text);
	padding: var(--fjpn-padding-badge-y) var(--fjpn-padding-badge-x);
	border-radius: var(--fjpn-radius-full);
	background: rgba(255, 255, 255, 0.6);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-semibold);
	text-transform: uppercase; /* S5 — já tinha o tracking, faltava a caixa alta */
	letter-spacing: var(--fjpn-tracking-badge);
	color: inherit;
	white-space: nowrap;
}

.fjpn-anos-impacto:hover .fjpn-anos-impacto__selo {
	background: rgba(255, 255, 255, 0.16);
}

.fjpn-anos-impacto__selo strong {
	font-weight: var(--fjpn-weight-extrabold);
}

/* 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/anos-impacto.js. Nada a esconder aqui via CSS. */

@media (prefers-reduced-motion: reduce) {
	.fjpn-anos-impacto {
		transition: none;
	}
}