/**
 * Home/Banner largo — Figma 272:2114.
 *
 * Desktop: foto de largura total, altura = proporção da foto (sem corte) · padding 48 em cima e embaixo;
 *   nas laterais o texto começa na linha da grade (--wp--custom--layout--margem-grade) · conteúdo centralizado na vertical, gap 16
 *   degradê da esquerda (preto 80% → transparente em 65%)
 *   sobretítulo Overline 12 maiúsculo (+8%) · título Display 40 / 1.0 / −2% (600), largura 520
 *   frase Body Large 18 / 1.5, largura 520 · botão branco de 50 px (Fundamentos/Botão · color=white).
 * Mobile (< 782px): altura 600 · padding 32/16 · texto na base · degradê de baixo para cima
 *   (mesmo comportamento do Banner principal).
 */

.cdw-largo {
	position: relative;
	overflow: hidden;
	/* Fundo de reserva escuro: o texto é branco, então precisa continuar legível enquanto a foto
	   carrega ou se ela falhar. */
	background: var(--wp--preset--color--ink);
	isolation: isolate;
}

/* A foto vai de ponta a ponta e define a altura do banner, até 750 px.
   Foto na proporção 1920×750 (ou mais larga) aparece inteira; foto mais alta é aparada em cima e embaixo, pelo centro. */
.cdw-largo__fundo {
	position: relative;
	z-index: -1;
	display: block;
}

.cdw-largo__fundo img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 750px;
	object-fit: cover;
	object-position: center;
}

/* Texto por cima da foto. */
.cdw-largo__camada {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--wp--preset--spacing--space-48) var(--wp--custom--layout--margem-grade);
	pointer-events: none;
}

.cdw-largo__camada > * {
	pointer-events: auto;
}

.cdw-largo.tem-texto .cdw-largo__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 65%);
}

.cdw-largo__conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-16);
	width: 520px;
	max-width: 100%;
	color: var(--wp--preset--color--surface);
}

.cdw-largo__sobretitulo,
.cdw-largo__titulo,
.cdw-largo__descricao {
	margin: 0;
	color: var(--wp--preset--color--surface);
}

.cdw-largo__sobretitulo {
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-largo__titulo {
	font-family: var(--wp--preset--font-family--display);
	/* Figma: font-size/display = 40 neste componente. */
	font-size: 2.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
	/* Linhas do mesmo tamanho: nada de uma palavra sozinha na última. */
	text-wrap: balance;
}

.cdw-largo__descricao {
	/* Figma: font-size/body-lg = 18 neste componente. */
	font-size: 1.125rem;
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	text-wrap: pretty;
}

.cdw-largo__link-total {
	position: absolute;
	inset: 0;
}

/* Mobile — Figma 272:2120: 480×600, padding 32/16, texto na base, gap 16, título 40 (igual ao desktop),
   degradê de baixo (preto 75% → transparente em 75%). */
@media (max-width: 781px) {
	.cdw-largo__fundo img {
		height: 600px;
		max-height: none;
	}

	.cdw-largo__camada {
		justify-content: flex-end;
		padding: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-16);
	}

	.cdw-largo.tem-texto .cdw-largo__fundo::after {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 75%);
	}

	.cdw-largo__conteudo {
		width: 100%;
	}
}