/**
 * Widget "Destaque + Tabela" (widgets/pagina-destaque-tabela.php)
 *
 * Valores conferidos contra `.signal-head`, `.radio-grid` e `.radio-highlight`
 * do mockup de Abrangência.
 *
 * O quadro da tabela vem de pagina-tabela.css — ver a nota em
 * pagina-tabelas-duo.css sobre visual compartilhado.
 */

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

/* ==========================================================================
   1. CABEÇALHO COM ÍCONE
   ========================================================================== */

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

.fjpn-dt__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-dt-icone-bg, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

.fjpn-dt__icone svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

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

.fjpn-dt__cab-titulo {
	margin: 0;
	min-width: 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-dt-cab-titulo, var(--fjpn-blue-primary));
	overflow-wrap: break-word;
}

/* ==========================================================================
   2. GRADE — caixa à esquerda, tabela à direita
   ========================================================================== */

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

@media (min-width: 800px) {
	.fjpn-dt__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Item de grade não encolhe abaixo do min-content sem isto — uma tabela larga
   empurraria a coluna e desalinharia o par. */
.fjpn-dt__caixa,
.fjpn-dt__grid > .fjpn-tabela__card {
	min-width: 0;
}

/* ==========================================================================
   3. CAIXA DE DESTAQUE
   ========================================================================== */

.fjpn-dt__caixa {
	padding: 32px 34px; /* valores do modelo */
	border-radius: var(--fjpn-radius-lg);
	background: var(--fjpn-dt-caixa, var(--fjpn-bg-soft));
}

.fjpn-dt__titulo {
	margin: 0 0 var(--fjpn-gap-medium);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-md);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-snug);
	color: var(--fjpn-dt-titulo, var(--fjpn-text-primary));
}

.fjpn-dt__texto {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-dt-texto, var(--fjpn-text-muted));
}

.fjpn-dt__texto p {
	margin: 0 0 var(--fjpn-gap-icon-text);
}

.fjpn-dt__texto > :first-child {
	margin-top: 0;
}

.fjpn-dt__texto > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. MARCADORES
   Ponto desenhado como ::before e não `list-style`: o modelo usa uma bolinha
   laranja de 7px, e `::marker` ainda não aceita tamanho de forma consistente
   entre navegadores.
   ========================================================================== */

.fjpn-dt__lista {
	display: grid;
	gap: 10px; /* valor do modelo */
	margin: 16px 0 0; /* valor do modelo */
	padding: 0;
	list-style: none;
}

.fjpn-dt__item {
	position: relative;
	padding-left: 18px; /* valor do modelo */
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-dt-texto, var(--fjpn-text-muted));
}

/* `top: .68em` mantém o ponto alinhado à primeira linha qualquer que seja o
   corpo do texto — sobrevive a quem mexer na tipografia pelo painel. */
.fjpn-dt__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fjpn-dt-marcador, var(--fjpn-orange-primary));
}

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */

@media (max-width: 520px) {
	.fjpn-dt__caixa {
		padding: 26px 22px; /* valor do modelo */
	}
}