/**
 * Widget "Programas & Projetos"
 *
 * Cabeçalho centralizado (eyebrow + heading + parágrafo) seguido de um grid
 * de cards 1 → 2 (≥640px) → 4 (≥1024px) colunas, gap-6 (doc §3.3/§6.2). Cada
 * card é um único `<a>` (não há link aninhado — ver decisão nº 4 no topo de
 * widgets/programas.php); o rótulo "Saiba mais →" é apenas um `<span>` cuja
 * cor reage ao hover do card.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal.
 * Tipografia (eyebrow, heading, body) e o hover de elevação reaproveitam as
 * classes utilitárias de base.css (.fjpn-eyebrow, .fjpn-heading-lg,
 * .fjpn-body, .fjpn-card-lift, .fjpn-section-divider) — não redeclaradas aqui.
 */

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

/* ==========================================================
 * CABEÇALHO — centralizado, largura de leitura confortável
 * ========================================================== */

.fjpn-programas__cabecalho {
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--fjpn-gap-hero-columns);
	text-align: center;
}

.fjpn-programas__eyebrow-row {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fjpn-programas__titulo {
	margin-top: var(--fjpn-gap-icon-text);
	margin-bottom: var(--fjpn-gap-medium);
	color: var(--fjpn-programas-titulo-cor, var(--fjpn-text-primary));
}

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

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

/* ==========================================================
 * GRID — 1 → 2 (sm, 640px) → 4 (lg, 1024px) colunas, gap-6
 * ========================================================== */

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

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

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

/* ==========================================================
 * CARD — imagem + tag sobreposta + corpo (ícone, título, resumo, cta)
 * O card inteiro é a área de toque: um único <a>, sem link aninhado.
 * O hover de elevação (translateY + sombra) vem de .fjpn-card-lift,
 * aplicada via classe no HTML — só os efeitos exclusivos deste card
 * (zoom de imagem, cor do rótulo) são declarados aqui.
 * ========================================================== */

.fjpn-programas__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fjpn-programas-card-bg, var(--fjpn-white));
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-3xl);
	/* Sombra suave — no protótipo aprovado o card não é plano, tem
	   profundidade mesmo em repouso (mesmo tratamento do card de Números). */
	box-shadow: var(--fjpn-shadow-card);
	text-decoration: none;
	color: inherit;
}

.fjpn-programas__imagem-wrap {
	position: relative;
	display: block;
	height: var(--fjpn-card-image-height);
	overflow: hidden;
	background: var(--fjpn-slate-100);
}

.elementor .fjpn-programas__imagem {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fjpn-duration-base) var(--fjpn-ease-default);
}

.fjpn-programas__card:hover .fjpn-programas__imagem {
	transform: scale(1.05);
}

.fjpn-programas__tag {
	position: absolute;
	top: var(--fjpn-gap-icon-text);
	left: var(--fjpn-gap-icon-text);
	padding: 0.25rem 0.625rem; /* sem token dedicado — badge pequeno pontual, ver padrão em design-tokens.md §3.4 (padding de card é a referência mais próxima) */
	/* Tag azul preenchida sobre a imagem — no protótipo aprovado não é uma
	   pílula branca com texto escuro, é o inverso: fundo azul institucional
	   com texto branco, para se destacar sobre a foto. */
	background: var(--fjpn-blue-primary);
	border-radius: var(--fjpn-radius-xl);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	color: var(--fjpn-white);
}

.fjpn-programas__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--fjpn-gap-icon-text);
	padding: var(--fjpn-padding-card);
}

.fjpn-programas__icone {
	font-size: 1.5rem; /* 24px — sem token dedicado a tamanho de emoji/ícone avulso, mesmo critério do offset -6px em sobre.css */
	line-height: 1;
}

.fjpn-programas__card-titulo {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-card-title);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-snug);
	color: var(--fjpn-programas-card-titulo-cor, var(--fjpn-text-primary));
}

.fjpn-programas__resumo {
	flex: 1;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-regular);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-programas-card-texto-cor, var(--fjpn-text-muted));
}

/* "Saiba mais" — botão laranja preenchido, não link de texto. A tipografia,
   cor, padding, radius, sombra e hover/active vêm das classes utilitárias
   .fjpn-btn/.fjpn-btn-orange de base.css (aplicadas no HTML pelo widget) —
   mesmo tratamento do CTA principal do site. Esta regra só resolve o
   posicionamento dentro do card: `.fjpn-programas__corpo` é flex-column sem
   `align-items`, então por padrão (stretch) o botão ocuparia 100% da
   largura; `align-self` restringe de volta ao tamanho do conteúdo. */
.fjpn-programas__cta-label {
	align-self: flex-start;
	margin-top: var(--fjpn-gap-icon-text);
}

/* Duas classes (mais específico que o utilitário `.fjpn-btn-orange` de
   base.css, compartilhado por outras seções — CTA, Newsletter, Sobre — que
   não devem ser afetadas) para permitir personalizar o botão só deste
   widget. `--fjpn-programas-btn-bg` só é injetada pelo PHP quando a cliente
   define uma cor; sem ela, o gradiente institucional original permanece. */
.fjpn-programas__cta-label.fjpn-btn-orange {
	background: var(--fjpn-programas-btn-bg, var(--fjpn-gradient-orange-cta));
	color: var(--fjpn-programas-btn-texto, var(--fjpn-white));
}