/**
 * Hero home — KV "Tapton de Ouro" (ref: assets/stone/s-hero/ref_hero.png)
 * Esquerda: selo + ilustração + boxes informativos | Direita: box de acesso.
 * Desktop: altura máxima 850px. Mobile: tudo empilhado.
 * Seletores com #hero para vencer o CSS legado (home / home-hub-mobile / mobile-assets).
 */

#hero.hero--kv:not(.hero--flow) {
	--hh: clamp(72rem, 100dvh, 85rem);
	--kv-green: #00D700;
	--kv-lime: #a5fa00;
	--kv-dark: #00361a;
	background: var(--kv-green);
	min-height: 0;
	height: auto;
	max-height: none;
	padding-top: var(--hero-stack-h);
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	overflow-y: visible;
}

/* Sem KV de fundo na home: só verde sólido */
#hero.hero--kv:not(.hero--flow) .hero__media,
#hero.hero--kv:not(.hero--flow) .hero__overlay {
	display: none;
}

#hero.hero--kv:not(.hero--flow) .hero__content {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem);
	align-items: center;
	column-gap: clamp(2rem, 4vw, 6rem);
	width: min(100% - 4rem, 140rem);
	min-height: 0;
	height: auto;
	max-height: none;
	margin: 0 auto;
	padding: calc(var(--countdown-h, 0px) + 1.6rem) 0 11.5rem;
	box-sizing: border-box;
	pointer-events: none;
}

/* ---------- Coluna KV ---------- */
#hero.hero--kv .hero__kv {
	container-type: inline-size;
	width: 100%;
	max-width: min(96.6rem, calc((var(--hh) - var(--hero-stack-h) - var(--countdown-h, 0px) - 14.1rem) / 0.647));
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2cqw;
	pointer-events: none;
}

#hero.hero--kv:not(.hero--flow) .hero__selo {
	position: static;
	width: 74%; /* selo -15% / corpo +15% (85/115) */
	height: auto;
	margin: 0 auto;
	padding: 0 !important;
	display: block;
	line-height: 0;
}

#hero.hero--kv .hero__selo-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 22px rgba(0, 60, 0, 0.35));
	transform: none;
}

.hero__kv-body {
	margin-top: -4rem; /* aproxima do selo */
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	align-items: center;
	column-gap: 0;
}

.hero__ilustra {
	line-height: 0;
	position: relative;
	z-index: 1;
	margin-right: -3cqw;
}

.hero__ilustra img {
	display: block;
	width: 100%;
	height: auto;
}

.hero__info {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 1.6cqw;
}

.hero__info img {
	display: block;
	width: 100%;
	height: auto;
}

.hero__mecanica {
	filter: drop-shadow(0 0 1.2cqw rgba(165, 250, 0, 0.35));
}

/* ---------- Hub (formulário) à direita ---------- */
#hero.hero--kv:not(.hero--flow) .hero__hub {
	position: static;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}

#hero.hero--kv:not(.hero--flow) .hero__hub .page-card {
	width: 100%;
	max-width: 38rem;
	pointer-events: auto;
}

/* Home logada: sem limite artificial de altura do box */
#hero.hero--kv.hero--logged {
	height: auto;
}

/* ---------- Desktop: altura máxima 850px ---------- */
@media (min-width: 992px) {
	#hero.hero--kv:not(.hero--flow):not(.hero--logged) {
		height: var(--hh);
		min-height: 0;
		max-height: 85rem;
	}

	#hero.hero--kv.hero--logged:not(.hero--flow) {
		min-height: var(--hh);
		max-height: 85rem;
	}
}

/* ---------- Tablet / mobile: empilhado ---------- */
@media (max-width: 991px) {
	#hero.hero--kv:not(.hero--flow),
	#hero.hero--kv:not(.hero--flow):not(.hero--hub-collapsed) {
		min-height: 0;
		max-height: none;
		height: auto;
		overflow: visible;
	}

	#hero.hero--kv:not(.hero--flow) .hero__content,
	#hero.hero--kv:not(.hero--flow):not(.hero--hub-collapsed) .hero__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2.4rem;
		width: 100%;
		min-height: 0;
		/* reserva espaço p/ o contador (painel aberto ou pílula recolhida) */
		padding: calc(max(var(--countdown-h, 0px), 5.2rem) + 1.4rem) 1.6rem 12rem;
	}

	#hero.hero--kv .hero__kv {
		max-width: 56rem;
	}

	#hero.hero--kv:not(.hero--flow) .hero__selo {
		width: 85%;
	}

	#hero.hero--kv:not(.hero--flow) .hero__hub,
	#hero.hero--kv:not(.hero--flow) .hero__hub.hero__hub {
		top: auto !important;
		justify-content: center;
		width: 100%;
	}

	#hero.hero--kv:not(.hero--flow) .hero__hub .page-card {
		max-width: 46rem;
	}
}

/* Mobile estreito: boxes abaixo da ilustração */
@media (max-width: 575px) {
	.hero__kv-body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.2rem;
	}

	.hero__ilustra {
		width: 78%;
		margin: 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	#hero.hero--kv .hero__selo-img {
		animation: none;
	}
}

/* ---------- Faixa "Periodo da promocao em breve" ativa: sem box de acesso, KV centralizado ---------- */
html.promo-em-breve #hero.hero--kv .hero__hub,
html.promo-em-breve #hero.hero--kv .hero__hub-fab {
	display: none !important;
}

html.promo-em-breve #hero.hero--kv:not(.hero--flow) .hero__content {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
}

html.promo-em-breve #hero.hero--kv .hero__kv {
	margin-left: auto;
	margin-right: auto;
}