/**
 * Widget "CTA de Contato" (widgets/pagina-cta-contato.php)
 *
 * Valores conferidos contra `.cta`, `.coverage-badge`, `.contact-list` e
 * `.btn` dos mockups aprovados.
 */

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

/* ==========================================================================
   1. CARTÃO
   ========================================================================== */

.fjpn-cta-contato__cartao {
	padding: 38px 42px; /* valores do modelo */
	border-radius: var(--fjpn-radius-xl);
	background: var(--fjpn-cta-contato-cartao, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

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

/* 800px é o ponto de virada do modelo. A proporção 60/40 vem do painel
   (controle "Proporção das colunas"), que já nasce com o valor do modelo. */
@media (min-width: 800px) {
	.fjpn-cta-contato__grid {
		grid-template-columns: 60% minmax(0, 1fr);
	}
}

.fjpn-cta-contato__principal,
.fjpn-cta-contato__lista {
	min-width: 0; /* item de grade não encolhe abaixo do min-content sem isto */
}

/* ==========================================================================
   2. ETIQUETA
   ========================================================================== */

.fjpn-cta-contato__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px; /* valor do modelo */
	padding: 7px 12px;
	border-radius: var(--fjpn-radius-full);
	/* No modelo a pílula é branca a 14% sobre o azul do cartão. Translúcida,
	   e não uma cor sólida, para acompanhar qualquer cor de cartão que a
	   cliente escolha sem virar um retângulo destoante. */
	background: rgba(255, 255, 255, 0.14);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1;
	color: var(--fjpn-white);
}

.fjpn-cta-contato__ponto {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fjpn-cta-contato-ponto, var(--fjpn-orange-primary));
}

/* ==========================================================================
   3. TEXTO
   ========================================================================== */

.fjpn-cta-contato__titulo {
	margin: 0 0 8px; /* valor do modelo */
	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-cta-contato-titulo, var(--fjpn-white));
}

.fjpn-cta-contato__texto {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	/* No modelo o parágrafo é um branco levemente esmaecido (#edf3fc), o que
	   cria hierarquia com o título sem recorrer a opacidade — que também
	   apagaria o link dentro do texto. */
	color: var(--fjpn-cta-contato-texto, rgba(255, 255, 255, 0.92));
}

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

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

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

.fjpn-cta-contato__texto a {
	color: inherit;
	text-decoration: underline;
}

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */

.fjpn-cta-contato__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* valor do modelo */
	margin-top: 22px; /* valor do modelo */
}

.fjpn-cta-contato__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px; /* valores do modelo */
	border: var(--fjpn-border-width-outline) solid transparent;
	border-radius: var(--fjpn-radius-default);
	background: var(--fjpn-cta-contato-b1-bg, var(--fjpn-white));
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-button);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1;
	color: var(--fjpn-cta-contato-b1-cor, var(--fjpn-blue-primary));
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fjpn-cta-contato__btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--fjpn-shadow-card);
}

/* A borda transparente já existe no botão preenchido para que os dois tenham
   exatamente a mesma altura — sem isso o vazado ficaria 4px mais alto e o par
   sairia desalinhado, defeito clássico deste padrão. */
.fjpn-cta-contato__btn--vazado {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--fjpn-cta-contato-b2-cor, var(--fjpn-white));
}

.fjpn-cta-contato__btn:focus-visible {
	outline: var(--fjpn-border-width-outline) solid var(--fjpn-white);
	outline-offset: 3px;
}

/* ==========================================================================
   5. LISTA DE CONTATO
   ========================================================================== */

.fjpn-cta-contato__lista {
	display: grid;
	gap: 8px; /* valor do modelo */
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	line-height: 1.7;
	color: var(--fjpn-cta-contato-texto, rgba(255, 255, 255, 0.92));
}

/* Cada par rótulo/valor numa linha só. `dt` e `dd` são bloco por padrão e o
   `dd` vem com recuo de 40px do navegador — os dois precisam ser corrigidos
   para o par ficar em linha, como no modelo. */
.fjpn-cta-contato__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
}

.fjpn-cta-contato__item-rotulo {
	margin: 0;
	font-weight: var(--fjpn-weight-bold);
	color: var(--fjpn-white);
}

.fjpn-cta-contato__item-valor {
	margin: 0; /* zera o recuo padrão do <dd> */
	min-width: 0;
}

.fjpn-cta-contato__item-valor a {
	color: inherit;
	text-decoration: underline;
	/* Endereço e e-mail longos quebram dentro da coluna estreita em vez de
	   esticar o cartão e criar rolagem horizontal no celular. */
	overflow-wrap: break-word;
}

.fjpn-cta-contato__item-valor a:hover {
	color: var(--fjpn-white);
}

/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */

@media (max-width: 799px) {
	.fjpn-cta-contato__cartao {
		padding: 30px; /* valor do modelo */
	}
}