/* ==========================================================================
   HERO — primeira tela da home
   A imagem e um <img> com object-fit (nao background-image) para permitir
   srcset e fetchpriority, melhorando o LCP.
   ========================================================================== */

/* A imagem ocupa toda a largura da tela (full-bleed).
   Quem respeita a margem lateral e o conteudo, via .hero-home__container. */
.hero-home {
	/* ------------------------------------------------------------------
	   Enquadramento da imagem de fundo
	   A imagem e maior que a area visivel: estas duas variaveis decidem
	   que pedaco dela aparece.

	   --hero-foco-y  0%   = mostra o TOPO da imagem (empurra a imagem para baixo)
	                  50%  = centro
	                  100% = mostra a BASE (puxa a imagem para cima)

	   --hero-foco-x  mesma logica na horizontal (0% esquerda, 100% direita).

	   Ou seja: para descer a imagem, DIMINUA --hero-foco-y.

	   --hero-deslocar-x: escorrega a imagem para a ESQUERDA.

	   Existe porque o hero e proporcionalmente mais largo que o banner
	   (2.08:1 contra 1.76:1). Com object-fit: cover a imagem e ajustada
	   pela largura, entao sobra area para cortar em cima e embaixo, mas
	   nada na horizontal — e sem sobra, --hero-foco-x nao tem efeito.
	   Alargar a imagem e puxa-la com margem negativa cria essa folga.
	   ------------------------------------------------------------------ */
	--hero-foco-x: 70%;
	--hero-foco-y: 5%;
	--hero-deslocar-x: 5%;

	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 48vw, 52rem);
	overflow: hidden;
	background-color: #012a2a; /* cor media do banner: evita flash branco */
	isolation: isolate;
}

.hero-home__midia {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero-home__imagem {
	/* Fica mais larga que o container e e puxada para a esquerda pela
	   margem negativa. A borda direita continua coberta porque o excesso
	   de largura e exatamente o do deslocamento. */
	width: calc(100% + var(--hero-deslocar-x));
	max-width: none;
	margin-left: calc(-1 * var(--hero-deslocar-x));
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-foco-x) var(--hero-foco-y);
}

/* --------------------------------------------------------------------------
   Video de fundo

   Substitui a imagem no desktop. A imagem continua no HTML e reaparece no
   celular e para quem pediu menos movimento — nesses casos o JS tambem
   remove as fontes do video, para nao baixar nada a toa.
   -------------------------------------------------------------------------- */

.hero-home__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-foco-x) var(--hero-foco-y);
}

.hero-home__midia--com-video .hero-home__imagem {
	display: none;
}

/* Sem video: a imagem volta a valer */
.hero-home__midia--sem-video .hero-home__video {
	display: none;
}

.hero-home__midia--sem-video .hero-home__imagem {
	display: block;
}

/* Duas camadas sobre a imagem:
   1. veu claro a esquerda  -> garante contraste do titulo preto;
   2. sombra a direita      -> aprofunda o azul do canto e destaca o
                               logotipo branco sobreposto. */
.hero-home__midia::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(214, 240, 180, 0.45) 0%,
			rgba(214, 240, 180, 0.12) 38%,
			transparent 62%
		),
		linear-gradient(
			270deg,
			rgba(0, 14, 26, 0.72) 0%,
			rgba(0, 14, 26, 0.42) 22%,
			rgba(0, 14, 26, 0.12) 45%,
			transparent 68%
		);
	pointer-events: none;
}

.hero-home__container {
	position: relative;
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	/* Margem do site + recuo extra do conteudo sobre a imagem */
	padding-inline: calc(var(--respiro-lateral) + var(--respiro-conteudo-hero));
	padding-block: clamp(8rem, 14vw, 11rem) clamp(3rem, 6vw, 5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* Titulo e assinatura na mesma altura, como no layout */
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.hero-home__conteudo {
	max-width: 34rem;
}

.hero-home__titulo {
	color: var(--cor-preto);
	font-size: var(--titulo-hero);
	font-weight: var(--peso-light);
	line-height: 1.14;
	letter-spacing: -0.02em;
	max-width: 13ch;
}

/* Assinatura da marca a direita, centrada com o titulo.
   Cerca de 25% da largura, como no layout. */
.hero-home__assinatura {
	width: clamp(12rem, 25vw, 23rem);
	height: auto;
	justify-self: end;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 900px) {
	.hero-home {
		min-height: 32rem;
	}

	.hero-home__container {
		padding-inline: var(--respiro-lateral);
	}

	/* No mobile a imagem aperta: puxamos o enquadramento para o miolo */
	.hero-home {
		--hero-foco-x: 72%;
	}

	.hero-home__container {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 2.5rem;
	}

	.hero-home__conteudo {
		max-width: 100%;
	}

	.hero-home__titulo {
		max-width: 16ch;
	}

	.hero-home__assinatura {
		justify-self: start;
		width: clamp(10rem, 44vw, 16rem);
	}

	/* Veu mais forte no mobile: sobra menos area clara da imagem */
	.hero-home__midia::after {
		background:
			linear-gradient(
				160deg,
				rgba(214, 240, 180, 0.62) 0%,
				rgba(214, 240, 180, 0.2) 45%,
				transparent 75%
			),
			linear-gradient(
				0deg,
				rgba(0, 14, 26, 0.6) 0%,
				rgba(0, 14, 26, 0.2) 30%,
				transparent 60%
			);
	}
}

/* --------------------------------------------------------------------------
   Celular

   A arte vertical ja tem a composicao pronta, entao o enquadramento volta
   ao natural e o deslocamento sai de cena. No layout a ordem tambem muda:
   o logotipo fica no meio da tela e o titulo embaixo.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.hero-home {
		--hero-foco-x: 50%;
		--hero-foco-y: 50%;
		--hero-deslocar-x: 0%;

		min-height: 100svh;
		align-items: stretch;
	}

	/* space-between afasta os dois blocos: o logotipo sobe e o titulo
	   desce, como pedido no layout de celular. */
	.hero-home__container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: clamp(2.5rem, 12vw, 5rem);
		padding-block: clamp(7rem, 26vw, 11rem) clamp(4rem, 14vw, 7rem);
		text-align: center;
	}

	/* Logotipo primeiro, na parte de cima e maior que antes */
	.hero-home__assinatura {
		order: 1;
		justify-self: center;
		align-self: center;
		width: clamp(13rem, 66vw, 20rem);
	}

	/* Titulo depois, fechando a tela */
	.hero-home__conteudo {
		order: 2;
		max-width: 100%;
	}

	.hero-home__titulo {
		max-width: 100%;
		text-wrap: balance;
	}

	/* Duas pontas: sombra no topo, onde o cabecalho translucido precisa de
	   contraste, e clareado na base, onde fica o titulo em preto. */
	.hero-home__midia::after {
		background: linear-gradient(
			180deg,
			rgba(0, 14, 11, 0.82) 0%,
			rgba(0, 14, 11, 0.52) 18%,
			rgba(0, 14, 11, 0.2) 32%,
			transparent 48%,
			rgba(214, 240, 180, 0.15) 72%,
			rgba(214, 240, 180, 0.4) 100%
		);
	}
}

@media (max-width: 520px) {
	.hero-home__titulo {
		font-size: clamp(1.375rem, 6.5vw, 1.75rem);
	}
}