/*
 * Hero da Home — V4 "Primeira dobra fotográfica".
 *
 * MUDANÇA ESTRUTURAL em relação à V3.4: a fotografia deixou de ser um card
 * contido (com margem off-white e border-radius ao redor) e passou a ocupar
 * a primeira dobra INTEIRA, começando no topo absoluto da página. O Header
 * vive sobre ela (ver header.css, `.site-header--overlay`) — a fotografia é
 * o fundo da navegação, não um bloco que começa abaixo dela.
 *
 * O que foi PRESERVADO da direção já aprovada:
 * - a fotografia é protagonista (nada de massa gráfica verde por cima);
 * - a legibilidade vem de gradiente localizado, nunca de caixa/card atrás
 *   do texto;
 * - a mensagem aprovada e a hierarquia eyebrow → headline → apoio → CTAs;
 * - o CTA primário off-white sobre a foto (contraste já validado).
 *
 * O que MUDOU: full-bleed desde o topo, gradiente muito mais longo e suave
 * (o usuário não deve perceber "há um degradê aqui", só "consigo ler"),
 * escala tipográfica recalibrada e o label "01 — Representação" removido.
 * Ver memoria.md ("Polimento premium final").
 */

.hero {
	position: relative;
	/* Sem padding: a fotografia encosta nas quatro bordas da viewport. */
	padding: 0;
	background: var(--color-brand-deep);
}

.hero__canvas {
	position: relative;
	overflow: hidden;
	/* Sem radius e sem margem — o Hero É o topo da página. */
	border-radius: 0;
	background: var(--color-brand-deep);
	display: flex;
	align-items: flex-end;
	/*
	 * Altura da primeira dobra: `svh` evita o salto causado pela barra do
	 * navegador no mobile. O teto impede que telas muito altas transformem
	 * o Hero num vazio desproporcional.
	 */
	min-height: min(660px, 100svh);
}

@media (min-width: 768px) {
	.hero__canvas {
		min-height: min(760px, 100svh);
	}
}

@media (min-width: 1024px) {
	.hero__canvas {
		min-height: min(900px, 100svh);
	}
}

/* Notebooks de pouca altura: usa a viewport inteira em vez de um teto fixo. */
@media (min-width: 1024px) and (max-height: 820px) {
	.hero__canvas {
		min-height: 100svh;
	}
}

/* ---------- Fotografia ---------- */

.hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Desktop: preserva o prédio à direita e a profundidade do céu; o
	   conteúdo vive à esquerda, sobre a vegetação. */
	object-position: 64% 46%;
}

@media (max-width: 1023px) {
	/* Mobile: enquadramento mais fechado no prédio/estrutura — em retrato,
	   um crop largo demais deixaria o assunto pequeno e o céu dominante. */
	.hero__photo {
		object-position: 62% 42%;
	}
}

/*
 * PROTEÇÃO DE CONTRASTE — a parte mais delicada desta composição.
 *
 * Objetivo: o visitante NÃO deve perceber "tem um degradê preto aqui". Deve
 * perceber apenas "consigo ler perfeitamente". Por isso:
 * - transições longas, com muitos color-stops (nada de preto→transparente
 *   direto, que cria uma borda visível);
 * - tom levemente esverdeado (não preto puro), que se funde com a paleta da
 *   fotografia em vez de sujá-la;
 * - o lado DIREITO da imagem fica praticamente intacto (céu, prédio,
 *   vegetação, profundidade preservados).
 */
.hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Mobile: proteção predominantemente vertical (o conteúdo ocupa quase
	   toda a largura), concentrada na base. */
	background:
		linear-gradient(
			to top,
			rgba(6, 26, 19, 0.88) 0%,
			rgba(6, 26, 19, 0.84) 14%,
			rgba(6, 27, 20, 0.76) 30%,
			rgba(7, 29, 21, 0.66) 44%,
			rgba(7, 30, 22, 0.54) 56%,
			rgba(7, 32, 23, 0.38) 68%,
			rgba(7, 34, 25, 0.2) 80%,
			rgba(7, 36, 26, 0.07) 91%,
			rgba(7, 36, 26, 0) 100%
		);
}

@media (min-width: 1024px) {
	.hero__scrim {
		/*
		 * Desktop: a proteção é sobretudo HORIZONTAL, ancorada à esquerda,
		 * dissipando por completo antes dos 70% da largura. Um segundo
		 * gradiente vertical, bem mais leve, reforça só a base.
		 */
		background:
			linear-gradient(
				to right,
				rgba(6, 26, 19, 0.82) 0%,
				rgba(6, 26, 19, 0.74) 10%,
				rgba(6, 27, 20, 0.62) 20%,
				rgba(7, 29, 21, 0.48) 30%,
				rgba(7, 31, 23, 0.34) 40%,
				rgba(7, 33, 24, 0.2) 50%,
				rgba(7, 35, 25, 0.09) 60%,
				rgba(7, 36, 26, 0.02) 70%,
				rgba(7, 36, 26, 0) 78%
			),
			linear-gradient(
				to top,
				rgba(6, 28, 20, 0.42) 0%,
				rgba(6, 29, 21, 0.24) 14%,
				rgba(7, 31, 22, 0.1) 28%,
				rgba(7, 33, 24, 0) 44%
			);
	}
}

/* ---------- Conteúdo ---------- */

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	color: var(--color-branco);
	/*
	 * O conteúdo do Hero vive no MESMO container do restante do site — a
	 * headline nasce no mesmo eixo X que "A ARPAN", "Logística Reversa" e o
	 * Footer. A fotografia, essa sim, continua full-bleed (é o canvas).
	 */
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-mobile);
	padding-block-end: clamp(48px, 7vh, 96px);
	/* Espaço para o Header sobreposto — o conteúdo nunca colide com a nav. */
	padding-block-start: calc(var(--header-height-mobile) + var(--space-8));
}

@media (min-width: 768px) {
	.hero__content {
		padding-inline: var(--container-pad-tablet);
	}
}

@media (min-width: 1024px) {
	.hero__content {
		gap: var(--space-5);
		padding-inline: var(--container-pad-notebook);
		padding-block-start: calc(var(--header-height) + var(--space-8));
		padding-block-end: clamp(64px, 9vh, 120px);
	}

	/* A coluna de texto ocupa parte do container; o resto do canvas fica
	   para a fotografia respirar. */
	.hero__content > * {
		max-width: min(100%, 720px);
	}
}

@media (min-width: 1440px) {
	.hero__content {
		padding-inline: var(--container-pad-desktop);
	}

	.hero__content > * {
		max-width: min(100%, 780px);
	}
}

/* Eyebrow — sem pill/caixa: um marcador laranja discreto + texto claro.
   A pill off-white anterior lia como etiqueta colada sobre a foto; o
   marcador é mais editorial e deixa a fotografia respirar. */
.hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: var(--font-size-label);
	color: rgba(245, 243, 237, 0.92);
	text-shadow: 0 1px 12px rgba(6, 26, 19, 0.5);
}

.hero__eyebrow-mark {
	width: 26px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-accent);
	flex: none;
}

.hero__headline {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-branco);
	letter-spacing: -0.025em;
	line-height: 1.06;
	margin: 0;
	width: 100%;
	font-size: clamp(2.15rem, 1.55rem + 2.9vw, 3rem);
	/* Sombra muito difusa: não lê como sombra, só impede que a tipografia
	   "vibre" contra áreas mais claras da fotografia. */
	text-shadow: 0 2px 28px rgba(6, 26, 19, 0.42);
	overflow-wrap: break-word;
	/* Evita palavra órfã na última linha. */
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.hero__headline {
		font-size: clamp(2.6rem, 1.5rem + 2.9vw, 3.7rem);
		line-height: 1.04;
	}
}

@media (min-width: 1440px) {
	.hero__headline {
		/* Teto contido: presença editorial sem virar headline de landing
		   page. A fotografia divide o protagonismo com a mensagem. */
		font-size: clamp(3rem, 1.5rem + 2.6vw, 3.6rem);
	}
}

/* Viewports curtas: reduz escala e respiro para o conteúdo caber sem
   comprimir a fotografia. */
@media (min-width: 1024px) and (max-height: 820px) {
	.hero__content {
		gap: var(--space-4);
		padding-block-end: clamp(40px, 6vh, 72px);
	}

	.hero__headline {
		font-size: clamp(2.4rem, 1.4rem + 2.4vw, 3.1rem);
	}
}

.hero__support {
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.65;
	color: rgba(245, 243, 237, 0.9);
	max-width: 46ch;
	width: 100%;
	margin: 0;
	overflow-wrap: break-word;
	text-shadow: 0 1px 18px rgba(6, 26, 19, 0.45);
}

/* Texto de apoio mais curto no mobile — reduz densidade sem encolher fonte.
   Só uma versão fica visível por vez (leitores de tela nunca leem as duas). */
.hero__support--short {
	display: block;
}

.hero__support--full {
	display: none;
}

@media (min-width: 768px) {
	.hero__support--short {
		display: none;
	}

	.hero__support--full {
		display: block;
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-2);
}

@media (max-width: 767px) {
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
		width: 100%;
		max-width: 320px;
	}
}

/* CTA primário: off-white com texto verde profundo — sobre a fotografia,
   o botão verde escuro perderia contraste contra a região já escurecida. */
.hero__actions .button--primary {
	background: var(--color-off-white);
	color: var(--color-brand-deep);
	justify-content: center;
}

.hero__actions .button--primary:hover,
.hero__actions .button--primary:focus-visible {
	background: var(--color-branco);
	color: var(--color-brand-deep);
}

/* CTA secundário: editorial, sem caixa — claramente subordinado ao sólido. */
.hero__actions .button--secondary {
	border-color: transparent;
	padding-inline: 4px;
	color: var(--color-branco);
	justify-content: center;
}

.hero__actions .button--secondary:hover,
.hero__actions .button--secondary:focus-visible {
	border-color: transparent;
	background: transparent;
	color: var(--color-branco);
	opacity: 0.82;
}

/* Foco visível sobre a fotografia escura. */
.hero__content :focus-visible {
	outline-color: var(--color-branco);
	outline-offset: 3px;
}

/* ---------- Revelação inicial ---------- */

.hero__meta,
.hero__headline,
.hero__support,
.hero__actions {
	animation: arpan-hero-reveal 900ms var(--motion-ease) both;
}

.hero__meta {
	animation-delay: 60ms;
}

.hero__headline {
	animation-delay: 150ms;
}

.hero__support {
	animation-delay: 260ms;
}

.hero__actions {
	animation-delay: 360ms;
}

@keyframes arpan-hero-reveal {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__meta,
	.hero__headline,
	.hero__support,
	.hero__actions {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}