/**
 * Widget "Lista de Itens"
 *
 * Repetidor de ícone + título + descrição, com cabeçalho de seção opcional
 * e 3 layouts: lista vertical (card horizontal, ícone à esquerda — mesmo
 * padrão de assets/css/sections/areas.css) e grades de 2/3 colunas (card
 * vertical, ícone acima do texto).
 *
 * Cores customizáveis chegam como custom properties inline
 * (`--fjpn-lista-*`, injetadas pelo widget PHP, já validadas por
 * `sanitizar_cor_css()`) — este arquivo só consome `var(--fjpn-lista-*)`.
 */

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

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

.fjpn-pagina-lista__cabecalho {
	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-gap-hero-columns);
	text-align: center;
}

.fjpn-pagina-lista__eyebrow {
	color: var(--fjpn-lista-cor-destaque, var(--fjpn-orange-cta));
}

.fjpn-pagina-lista__titulo {
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-lista-cor-titulo, var(--fjpn-text-primary));
}

.fjpn-pagina-lista__texto {
	margin: 0;
	color: var(--fjpn-lista-cor-texto, var(--fjpn-slate-700));
}

/* ==========================================================
 * GRADE — grade-3: 1 → 2 (sm, 640px) → 3 (lg, 1024px), sem pular degrau.
 * grade-2: 1 → 2 (lg, 1024px). lista: sempre 1 coluna (linhas empilhadas).
 * ========================================================== */

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

.fjpn-pagina-lista--layout-grade-3 .fjpn-pagina-lista__grid {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.fjpn-pagina-lista--layout-grade-3 .fjpn-pagina-lista__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.fjpn-pagina-lista--layout-grade-3 .fjpn-pagina-lista__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.fjpn-pagina-lista--layout-grade-2 .fjpn-pagina-lista__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================
 * ITEM — layouts "grade-2"/"grade-3": card vertical (ícone acima do texto).
 * ========================================================== */

.fjpn-pagina-lista__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fjpn-gap-medium);
	padding: var(--fjpn-padding-card-stat);
	background: 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-pagina-lista__item--link {
	cursor: pointer;
}

.fjpn-pagina-lista__icone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--fjpn-radius-2xl);
	background: var(--fjpn-lista-cor-icone-fundo, var(--fjpn-blue-light));
	color: var(--fjpn-lista-cor-destaque, var(--fjpn-blue-primary));
	font-size: var(--fjpn-text-heading-sm);
	line-height: 1;
}

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

.fjpn-pagina-lista__item-titulo {
	margin: 0 0 var(--fjpn-gap-icon-text);
	color: var(--fjpn-lista-cor-titulo-item, var(--fjpn-text-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-pagina-lista__item-texto {
	margin: 0;
	color: var(--fjpn-lista-cor-texto-item, var(--fjpn-slate-700));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	font-weight: var(--fjpn-weight-regular);
	line-height: var(--fjpn-leading-relaxed);
}

/* ==========================================================
 * LAYOUT "LISTA" — card horizontal (ícone à esquerda, texto à direita),
 * uma linha por item, sempre em coluna única.
 * ========================================================== */

.fjpn-pagina-lista--layout-lista .fjpn-pagina-lista__item {
	flex-direction: row;
	align-items: flex-start;
}

/* ==========================================================
 * SANGRIA — largura total dentro do Elementor (ver justificativa completa
 * na seção 5 de base.css; regra própria aqui porque base.css não pode ser
 * editado por este agente).
 * ========================================================== */

.elementor-widget-fjpn-pagina-lista > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}