/**
 * Widget "Notícias"
 *
 * Cabeçalho com título à esquerda e botão "Ver todas" à direita — empilhado
 * no mobile, `flex-row` a partir de 640px (doc §10: "flex-row em telas ≥
 * sm"). Grid de cards 1 coluna → 3 colunas a partir de 768px
 * (`md:grid-cols-3`, doc §10). Cada card é um único `<a>` (sem link
 * aninhado — ver decisão nº 4 em widgets/noticias.php); "Leia mais" é
 * apenas um `<span>` cuja cor reage ao hover do card.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal já
 * coberto por token. Tipografia (eyebrow, headings, body, small) e o hover
 * de elevação reaproveitam as classes utilitárias de base.css
 * (.fjpn-eyebrow, .fjpn-heading-lg, .fjpn-heading-sm, .fjpn-body,
 * .fjpn-text-small, .fjpn-card-lift, .fjpn-section-divider, .fjpn-btn*) —
 * não redeclaradas aqui.
 */

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

/* ==========================================================
 * CABEÇALHO — título à esquerda, botão "Ver todas" à direita
 * ========================================================== */

.fjpn-noticias__cabecalho {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fjpn-gap-medium);
	margin-bottom: var(--fjpn-gap-hero-columns);
}

@media (min-width: 640px) {
	.fjpn-noticias__cabecalho {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.fjpn-noticias__cabecalho-texto {
	max-width: 42rem;
}

.fjpn-noticias__eyebrow-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

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

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

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

.fjpn-noticias__botao {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Duas classes (mais específico que `.fjpn-btn-blue-outline` de base.css,
   compartilhado por outras seções que não devem ser afetadas) — botão
   "Ver todas" é contorno (sem preenchimento): a cor se aplica ao texto e à
   borda. widgets/noticias.php `cor_botao_texto`. */
.fjpn-noticias__botao.fjpn-btn-blue-outline {
	color: var(--fjpn-noticias-btn-texto, var(--fjpn-blue-primary));
	border-color: var(--fjpn-noticias-btn-texto, var(--fjpn-blue-primary));
}

/* ==========================================================
 * GRID — 1 → 3 (md, 768px) colunas, gap-6
 * ========================================================== */

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

@media (min-width: 768px) {
	.fjpn-noticias__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
 * CARD — imagem + categoria sobreposta + corpo (data, 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-noticias__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fjpn-noticias-card-bg, var(--fjpn-white));
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-3xl);
	text-decoration: none;
	color: inherit;
}

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

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

.fjpn-noticias__card:hover .fjpn-noticias__imagem {
	transform: scale(1.05);
}

/* Fallback elegante para post sem imagem destacada — muitos dos 77 posts
   migrados do Wix podem não ter capa. Ocupa o mesmo espaço da imagem real,
   sem quebrar o alinhamento do grid. */
.fjpn-noticias__imagem-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--fjpn-blue-light);
}

.fjpn-noticias__imagem-fallback-icone {
	font-size: 2rem; /* sem token dedicado a tamanho de emoji/ícone avulso, mesmo critério do .fjpn-programas__icone em programas.css */
	line-height: 1;
	opacity: 0.6;
}

.fjpn-noticias__categoria {
	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, mesmo valor de .fjpn-programas__tag em programas.css */
	background: var(--fjpn-white);
	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-noticias-destaque-cor, var(--fjpn-blue-primary));
}

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

.fjpn-noticias__data {
	color: var(--fjpn-text-muted);
}

.fjpn-noticias__card-titulo {
	display: -webkit-box;
	overflow: hidden;
	color: var(--fjpn-noticias-card-titulo-cor, var(--fjpn-text-primary));
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* evita título longo (migração do Wix) esticar o card — sem token dedicado, regra de layout, não de design token */
}

.fjpn-noticias__resumo {
	flex: 1;
	color: var(--fjpn-noticias-card-texto-cor, var(--fjpn-text-muted));
}

.fjpn-noticias__cta-label {
	margin-top: var(--fjpn-gap-icon-text);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	color: var(--fjpn-noticias-destaque-cor, var(--fjpn-blue-primary));
	transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

.fjpn-noticias__card:hover .fjpn-noticias__cta-label {
	color: var(--fjpn-blue-dark);
}

/* ==========================================================
 * ESTADO VAZIO — nenhum post publicado (ou nenhum na categoria filtrada)
 * ========================================================== */

.fjpn-noticias__vazio {
	margin: 0;
	padding: var(--fjpn-padding-card-stat) 0;
	text-align: center;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	color: var(--fjpn-text-muted);
}