/**
 * Widget "Par de Tabelas com Ícone" (widgets/pagina-tabelas-duo.php)
 *
 * Valores conferidos contra `.duo` e `.signal-head` do mockup de Abrangência.
 *
 * O QUADRO DA TABELA NÃO ESTÁ AQUI: `.fjpn-tabela__card`, `.fjpn-tabela__scroll`
 * e `.fjpn-tabela__tabela` vivem em pagina-tabela.css e são reaproveitados,
 * pelo mesmo critério de `.fjpn-container` e `.fjpn-eyebrow` — visual
 * compartilhado num lugar só. Duplicar aqui significaria corrigir o mesmo
 * defeito de tabela em três arquivos.
 */

.fjpn-duo {
	background: var(--fjpn-duo-secao-bg, transparent);
	padding-block: var(--fjpn-space-section-py-md);
}

.fjpn-duo__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px; /* valor do modelo */
	align-items: start;
}

/* 800px é o ponto de virada do modelo. Abaixo disso as duas tabelas empilham
   em vez de espremer duas colunas de dados na mesma linha. */
@media (min-width: 800px) {
	.fjpn-duo__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Item de grade tem `min-width: auto` e não encolhe abaixo do min-content:
   sem isto, uma tabela larga empurra a coluna para fora da faixa de 1fr e o
   par sai desalinhado. Mesma causa-raiz documentada em hero.css. */
.fjpn-duo__bloco {
	min-width: 0;
}

/* ==========================================================================
   CABEÇALHO — quadro do ícone + título ao lado
   ========================================================================== */

.fjpn-duo__cabecalho {
	display: flex;
	align-items: center;
	gap: 14px; /* valor do modelo */
	margin-bottom: 16px; /* valor do modelo */
}

.fjpn-duo__icone {
	display: grid;
	place-items: center;
	flex: 0 0 2.875rem; /* 46px, valor do modelo */
	width: 2.875rem;
	height: 2.875rem;
	border-radius: var(--fjpn-radius-lg);
	background: var(--fjpn-duo-icone-bg, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

/* O Elementor entrega <i> (ícone de fonte) ou <svg> inline. O <svg> não tem
   dimensão intrínseca útil e precisa ser fixado; o <i> herda o tamanho. */
.fjpn-duo__icone svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.fjpn-duo__icone i {
	font-size: 1.25rem;
	line-height: 1;
}

.fjpn-duo__titulo {
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-sm);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1.3;
	color: var(--fjpn-duo-titulo, var(--fjpn-blue-primary));
	/* Título longo ao lado de um ícone de largura fixa precisa poder quebrar,
	   senão empurra a coluna e desalinha o par. */
	min-width: 0;
	overflow-wrap: break-word;
}