/* ============================================================================
   Faixa de contato ao final do post

   LARGURA TOTAL
   A section vive dentro de `article.content-post` (coluna de ~45% da viewport),
   mas é exibida em largura total. O recuo e a largura reais vêm das custom
   properties publicadas por js/faixa-contato.js:

     --faixa-bleed-left   recuo negativo até a borda esquerda da viewport
     --faixa-bleed-width  document.documentElement.clientWidth (sem a scrollbar)

   Os fallbacks (0 e 100%) deixam a faixa na largura da coluna quando não há JS.

   FORMULÁRIO
   O formulário não é nosso: é o CTA antigo do HubSpot, carregado num iframe e
   recortado para mostrar só a área dos campos (ver templates/faixa-contato.php).
   Ele precisa rodar em domínio do HubSpot, senão o reCAPTCHA é rejeitado na
   validação server-side. Como o iframe é cross-origin, nenhum estilo daqui
   alcança os campos — a aparência deles é definida no portal do HubSpot.
   ========================================================================= */

.faixa-contato {
	--faixa-dark: #103440;
	/* respiro interno do destaque do formulário; o eyebrow usa o mesmo valor
	   para continuar alinhado com o título que agora vive dentro dele */
	--faixa-moldura-pad: 28px;
	--faixa-cyan: #5DD0F2;
	--faixa-lime: #7AEA53;

	box-sizing: border-box;

	/* A faixa é mais larga que a coluna do artigo e invade a coluna da sidebar.
	   `aside.sidebar` é esticada pela linha do grid até a altura inteira do artigo
	   (align-items: stretch) e, mesmo transparente, fica por cima da faixa e engole
	   os cliques no formulário. O z-index tira a faixa de baixo dela. */
	position: relative;
	z-index: 1;

	margin-left: var(--faixa-bleed-left, 0);
	width: var(--faixa-bleed-width, 100%);
	margin-top: 56px;
	margin-bottom: 8px;
	padding-block: 36px;
	/* recuo esquerdo menor que o direito, para o texto chegar mais perto da borda */
	padding-inline: clamp(16px, 3vw, 56px) clamp(20px, 6vw, 120px);
	background: var(--faixa-dark);
	font-family: 'Archivo', sans-serif;
}

.faixa-contato *,
.faixa-contato *::before,
.faixa-contato *::after {
	box-sizing: border-box;
}

/* `minmax(0, …)` é obrigatório: com `1fr` puro o mínimo automático é min-content,
   a coluna não encolhe abaixo da largura do recorte e estoura a faixa.
   Teto de 1920px só age acima de ~2160px de viewport. */
.faixa-contato__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 473px;
	/* sem row-gap: o espaço abaixo do eyebrow é dado pela margem dele,
	   senão os dois se somam e abrem um vão grande antes da headline */
	gap: 0 80px;
	/* o texto estica para a altura do formulário e distribui por dentro
	   (ver .faixa-contato__texto-col); o recorte fica ancorado no topo */
	align-items: start;
	max-width: 1920px;
	margin-inline: auto;
}

/* ---------- Coluna de texto ---------- */

.faixa-contato__texto-col {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.faixa-contato__eyebrow {
	/* a margem real vem da regra de especificidade tripla mais abaixo:
	   `.content-post p:first-child` (0,2,1) vence qualquer seletor menor */
	margin: 0;
	color: var(--faixa-cyan);
	font-size: clamp(16px, 1.2vw, 22px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.faixa-contato__headline {
	margin: 0 0 24px;
	color: #FFF;
	font-size: clamp(28px, 3vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.faixa-contato__texto {
	margin: 0;
	max-width: 68ch; /* comprimento de linha confortável, mesmo em tela larga */
	color: #C7D5D9;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}


/* Headline + parágrafo posicionados no espaço livre da coluna, que tem a altura
   do formulário. Topo fixo (em vez de `auto`) para o bloco subir; o `auto`
   embaixo absorve a sobra e empurra os indicadores. */
.faixa-contato__texto-bloco {
	margin: 72px 0 auto;
}

/* O eyebrow e o parágrafo são `<p>` dentro de `article.content-post`, que o tema
   estiliza com `.content-post p` (0,1,1) e `.content-post p:first-child` (0,2,1)
   — este último impõe margem e aquele impõe `text-align: justify`. Só uma
   especificidade de três classes (0,3,0) vence os dois. */
.faixa-contato .faixa-contato__texto-col .faixa-contato__eyebrow {
	margin: var(--faixa-moldura-pad) 0 0;
	text-align: left;
}

.faixa-contato .faixa-contato__texto-bloco .faixa-contato__texto {
	margin: 0;
	text-align: left;
}

/* ---------- Indicadores ---------- */

/* Especificidade dobrada: `.content-post ul` (post.css:110) impõe
   margin-bottom:40px e `.content-post ul li` (113) impõe line-height:40px e
   margin-left:20px a qualquer lista dentro do artigo. */
.faixa-contato .faixa-contato__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	/* a base vem da margem `auto` do bloco de texto; os 56px levantam os
	   indicadores cerca de duas linhas em relação ao fim do formulário */
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}

.faixa-contato .faixa-contato__stat {
	flex: 1 1 0;
	min-width: 150px;
	margin-left: 0;
	line-height: normal;
	padding-top: 16px;
	border-top: 3px solid var(--faixa-cyan);
}

.faixa-contato__stat:nth-child(2) {
	border-top-color: #4FDCA8;
}

.faixa-contato__stat:nth-child(3) {
	border-top-color: var(--faixa-lime);
}

.faixa-contato__stat-numero {
	display: block;
	color: #FFF;
	font-size: clamp(24px, 2.2vw, 38px);
	font-weight: 700;
	line-height: 1.1;
}

.faixa-contato__stat-rotulo {
	display: block;
	margin-top: 4px;
	color: #9FB4BA;
	font-size: 14px;
	line-height: 1.35;
}

/* ---------- Coluna do formulário ----------
   Sem fundo próprio: o recorte já traz o fundo do CTA e cobriria qualquer
   cor definida aqui, que só vazaria pelas bordas. */

.faixa-contato__card {
	min-width: 0;
	padding: 0;
	background: none;
}

.faixa-contato__card-titulo {
	/* alinha com os rótulos do formulário, recuados dentro da caixa recortada;
	   o recuo acompanha a escala aplicada ao recorte */
	padding-left: calc(
		var(--faixa-crop-offset, 0px)
		+ var(--faixa-crop-inset, 0px) * var(--faixa-crop-escala, 1)
	);
	margin: 0 0 20px;
	color: #FFF;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

/* Destaque do formulário: superfície levemente clara sobre o fundo escuro,
   com elevação. O objetivo é fazer o bloco saltar, não contorná-lo — por isso
   sombra difusa e halo translúcido em vez de uma linha branca sólida.
   O padding é o respiro entre o destaque e os campos. */
.faixa-contato__moldura {
	/* Calibração do recorte para DESKTOP. Fica na moldura, e não no recorte,
	   porque o título também precisa dela para alinhar com os rótulos.
	   O CTA do HubSpot não empilha em tela estreita: mantém duas colunas
	   proporcionais, então a largura imposta ao iframe é o que determina de que
	   tamanho o formulário nasce. Medido com o CTA renderizado a 1521px. */
	--faixa-crop-vw: 1521px;   /* largura imposta ao iframe */
	--faixa-crop-vh: 867px;    /* altura do documento nessa largura */
	/* 2px para dentro da caixa (791/87, 493x748): a escala cai em pixel
	   fracionário e deixava uma costura de 1px na aresta do recorte. A folga
	   até os campos é de 10px, então recuar 2px não toca em nenhum conteúdo. */
	--faixa-crop-x: 793px;
	--faixa-crop-y: 89px;
	--faixa-crop-w: 489px;
	--faixa-crop-h: 744px;
	--faixa-crop-inset: 8px;   /* recuo dos rótulos, já descontados os 2px */
	/* cor do painel do formulário dentro do CTA, medida no HubSpot
	   (rgb(30,64,75)). Coincide com a composição da moldura sobre a faixa. */
	--faixa-form-bg: #1E404B;
	--faixa-crop-escala-max: 0.85;
	--faixa-crop-escala: 0.85; /* fallback sem JS */

	padding: var(--faixa-moldura-pad);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---------- Recorte do formulário ----------
   Dimensões e offsets são herdados da moldura. `--faixa-crop-escala` é
   publicada pelo JS na moldura, para caber na coluna disponível. */

.faixa-contato__crop {
	position: relative;
	width: calc(var(--faixa-crop-w) * var(--faixa-crop-escala));
	height: calc(var(--faixa-crop-h) * var(--faixa-crop-escala));
	max-width: 100%;
	overflow: hidden;
	border-radius: 8px;
	margin-inline: auto;
}

/* A escala do recorte cai em pixel fracionário e deixa uma costura de 1px na
   aresta esquerda, por toda a altura. Esta faixa cobre só essa coluna, com a
   mesma cor do painel do formulário — fica a 8px dos campos, então não encosta
   em rótulo, input ou botão. */
.faixa-contato__crop::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: var(--faixa-form-bg);
	z-index: 1;
	pointer-events: none;
}

/* Especificidade dobrada de propósito: `.content-post iframe` (post.css:105) é
   (0,1,1) e impõe width:100% + position:relative em qualquer iframe do artigo,
   o que achataria o recorte. */
.faixa-contato .faixa-contato__crop-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--faixa-crop-vw);
	height: var(--faixa-crop-vh);
	min-height: 0;
	max-width: none;
	border: 0;
	/* escala primeiro, depois desloca no espaço já escalado */
	transform: scale(var(--faixa-crop-escala))
	           translate(calc(var(--faixa-crop-x) * -1), calc(var(--faixa-crop-y) * -1));
	transform-origin: 0 0;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1024px) {
	.faixa-contato__wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px 0;
	}

	/* Em coluna única o texto não é esticado até a altura do formulário, então
	   as folgas calculadas para o desktop viram espaço morto. */
	.faixa-contato__texto-bloco {
		margin: 32px 0 0;
	}

	/* Calibração do recorte para TELA ESTREITA.
	   A 1521px a caixa do formulário nasce com 493px e precisaria encolher a
	   ~0,60 para caber nos ~295px disponíveis no celular, o que deixa os campos
	   pequenos demais. A 700px ela nasce com 293px e cabe praticamente 1:1.
	   Medido com o CTA renderizado a 700px. */
	.faixa-contato__moldura {
		--faixa-crop-vw: 700px;
		--faixa-crop-vh: 1300px;
		/* mesmo recuo de 2px do desktop (caixa em 375/121, 293x748) */
		--faixa-crop-x: 377px;
		--faixa-crop-y: 123px;
		--faixa-crop-w: 289px;
		--faixa-crop-h: 744px;
		--faixa-crop-inset: 8px;
		--faixa-crop-escala-max: 1;
	}

	/* em coluna única o eyebrow não precisa acompanhar o destaque */
	.faixa-contato .faixa-contato__texto-col .faixa-contato__eyebrow {
		margin-top: 0;
	}

	.faixa-contato .faixa-contato__stats {
		margin-bottom: 0;
	}

	.faixa-contato__card {
		max-width: 560px;
	}
}

@media (max-width: 768px) {
	.faixa-contato {
		margin-top: 40px;
		padding-block: 28px;
	}

	.faixa-contato__texto {
		margin-bottom: 32px;
	}

	/* mesma especificidade da regra base (0,2,0), senão o media query perde */
	.faixa-contato .faixa-contato__stats {
		gap: 24px;
	}

	.faixa-contato .faixa-contato__stat {
		flex: 1 1 100%;
		min-width: 0;
	}
}