/* Grid de 3 zonas (esquerda/centro/direita) — a coluna do meio é "auto"
   (tamanho do conteúdo) e as duas de fora são "1fr" iguais, então o que
   estiver no centro fica centralizado de verdade em relação à seção
   inteira, não só ao espaço que sobra do outro lado. Texto e botão
   escolhem sua zona de forma independente (--left/--center/--right); se
   os dois caírem na mesma zona, o botão desce pra uma segunda linha
   (.section-header--stacked). */
.section-header {
	display: grid;
	grid-template-columns: 1.25fr auto 1fr;
	align-items: center;
	column-gap: var(--spacing-md);
	row-gap: var(--spacing-sm);
}

.section-header-text {
	grid-row: 1;
	max-width: 800px;
}

.section-header-text--left {
	grid-column: 1;
	justify-self: start;
}

.section-header-text--center {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.section-header-text--right {
	grid-column: 3;
	justify-self: end;
	text-align: right;
}

.section-header-eyebrow {
	color: var(--cor-texto-secundario, var(--cor-texto));
	font-size: var(--fs-6, 1.25rem);
	margin-bottom: var(--spacing-xs);
}

.section-header-title {
	font-size: var(--fs-2, 2.5rem);
	margin-bottom: 0;
}

.section-header-cta {
	grid-row: 1;
	flex-shrink: 0;
}

.section-header-cta--left {
	grid-column: 1;
	justify-self: start;
}

.section-header-cta--center {
	grid-column: 2;
	justify-self: center;
}

.section-header-cta--right {
	grid-column: 3;
	justify-self: end;
}

/* Texto e botão na mesma zona — botão empilha embaixo em vez de sobrepor. */
.section-header--stacked .section-header-cta {
	grid-row: 2;
}

.section-header-btn,
a.section-header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px var(--spacing-md);
	border-radius: var(--radius-sm);
	background: var(--cor-principal, #eef0f3);
	color: var(--cor-branco);
	font-family: var(--font-2, var(--font-1, inherit));
	font-size: var(--fs-6, 1.25rem);
	white-space: nowrap;
	border: 1px solid transparent;
	transition: all .4s;
}

a.section-header-btn:hover {
	background-color: var(--cor-branco);
	color: var(--cor-principal);
	border-color: var(--cor-principal);
}

/* Mobile: sempre empilha em 1 coluna só, independente da posição escolhida
   pro desktop (não faz sentido testar as 9 combinações numa tela estreita). */
@media (max-width: 767px) {
	.section-header {
		grid-template-columns: 1fr;
	}

	.section-header-text,
	.section-header-cta {
		grid-column: 1;
		grid-row: auto;
	}
}