/* ==========================================================================
   L'Essenza Casa — Home
   Carregado somente na página inicial (inc/assets.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Abertura imersiva
   A imagem começa dentro de uma moldura chanfrada (o octógono do símbolo LE)
   e se abre em tela cheia conforme a rolagem. O home.js atualiza --p de 0 a 1.
   Sem JavaScript, ou com movimento reduzido, --p fica em 1: imagem aberta e estática.
   -------------------------------------------------------------------------- */
.hero {
	--p: 1;
	--topo-fixo: var(--altura-cabecalho);
	--ix0: var(--margem);              /* recuo lateral inicial da moldura */
	--iy0: 1rem;                       /* recuo vertical inicial */
	--chanfro-hero: 1.5rem;            /* chanfro inicial; some ao abrir */
	position: relative;
}

@media (min-width: 64em) {
	.hero {
		--ix0: 6vw;
		--iy0: 6vh;
		--chanfro-hero: 3rem;
	}
}

.admin-bar .hero { --topo-fixo: calc(var(--altura-cabecalho) + 32px); }
@media (max-width: 782px) {
	.admin-bar .hero { --topo-fixo: calc(var(--altura-cabecalho) + 46px); }
}
@media (max-width: 600px) {
	.admin-bar .hero { --topo-fixo: var(--altura-cabecalho); }
}

/* Com a animação ativa, a seção fica mais alta: é o "trilho" da rolagem. */
.hero--animado {
	height: 190vh;
	height: 190svh;
}

.hero__palco {
	position: relative;
	height: calc(100vh - var(--topo-fixo));
	height: calc(100svh - var(--topo-fixo));
	min-height: 32rem;
	overflow: hidden;
}

.hero--animado .hero__palco {
	position: sticky;
	top: var(--topo-fixo);
}

.hero__moldura {
	--ix: calc(var(--ix0) * (1 - var(--p)));
	--iy: calc(var(--iy0) * (1 - var(--p)));
	--c: calc(var(--chanfro-hero) * (1 - var(--p)));
	position: absolute;
	inset: 0;
	background: var(--grafite);
	clip-path: polygon(
		calc(var(--ix) + var(--c)) var(--iy),
		calc(100% - var(--ix) - var(--c)) var(--iy),
		calc(100% - var(--ix)) calc(var(--iy) + var(--c)),
		calc(100% - var(--ix)) calc(100% - var(--iy) - var(--c)),
		calc(100% - var(--ix) - var(--c)) calc(100% - var(--iy)),
		calc(var(--ix) + var(--c)) calc(100% - var(--iy)),
		var(--ix) calc(100% - var(--iy) - var(--c)),
		var(--ix) calc(var(--iy) + var(--c))
	);
}

/* Véu inferior: garante contraste do texto em marfim sobre a foto */
.hero__moldura::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(43, 40, 37, 0.72) 0%, rgba(43, 40, 37, 0.25) 45%, rgba(43, 40, 37, 0) 70%);
	pointer-events: none;
}

.hero__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
	transform: scale(calc(1.06 - 0.06 * var(--p)));
	transform-origin: 50% 70%;
}

.hero__texto {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--iy0) * (1 - var(--p)) + clamp(2rem, 6vh, 4.5rem));
	padding-inline: calc(var(--margem) + var(--ix0) * (1 - var(--p)));
	color: var(--marfim);
}

.hero__titulo {
	color: var(--marfim);
	max-width: 11em;
}

/* Subtítulo e botão aparecem na segunda metade da abertura */
.hero__revelado {
	display: grid;
	justify-items: start;
	gap: var(--esp-4);
	margin-top: var(--esp-3);
	opacity: clamp(0, calc((var(--p) - 0.5) * 2.4), 1);
	transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.5) * 2.4), 1)) * 1.25rem));
}

.hero__revelado .texto-introducao {
	color: var(--marfim);
}

/* Enquanto invisível, o botão não recebe clique acidental.
   Pelo teclado ele continua alcançável: ao receber foco, o home.js abre a moldura. */
.hero--animado:not(.hero--aberto) .hero__revelado {
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Pilares
   -------------------------------------------------------------------------- */
.pilares {
	padding-block: var(--esp-6);
}

.pilares__lista {
	display: grid;
	gap: var(--esp-4);
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.pilares__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.pilares__lista {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--esp-5);
	}
}

.pilares__item {
	padding-top: var(--esp-3);
	border-top: 1px solid var(--caramelo);
}

.pilares__titulo {
	margin-bottom: var(--esp-1);
	font-family: var(--fonte-texto);
	font-size: var(--fs-texto);
	font-weight: 500;
	line-height: 1.4;
	color: var(--marfim);
}

.pilares__item p {
	font-size: var(--fs-pequeno);
	color: var(--pedra);
	max-width: 22em;
}

/* --------------------------------------------------------------------------
   3. Categorias
   -------------------------------------------------------------------------- */
.categorias__titulo {
	margin-bottom: var(--esp-5);
}

.categorias__grade {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--esp-5) var(--esp-3);
	padding: 0;
	list-style: none;
}

@media (min-width: 64em) {
	.categorias__grade {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--esp-4);
	}
}

.categoria {
	display: grid;
	gap: 0.35rem;
	text-decoration: none;
}

.categoria__imagem {
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: var(--esp-2);
	overflow: hidden;
	background: var(--pedra);
}

.categoria__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease);
}

/* Resposta à ação da pessoa: aproximação lenta da foto */
.categoria:hover .categoria__imagem img,
.categoria:focus-visible .categoria__imagem img {
	transform: scale(1.04);
}

.categoria__nome {
	font-family: var(--fonte-titulo);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: 1.15;
}

.categoria__frase {
	font-size: var(--fs-pequeno);
	color: rgba(67, 63, 58, 0.78);
}

.categoria:hover .categoria__nome {
	color: var(--conhaque);
}

/* --------------------------------------------------------------------------
   4. Fragrância em destaque
   -------------------------------------------------------------------------- */
.destaque__grade {
	display: grid;
	gap: var(--esp-5);
	align-items: center;
}

@media (min-width: 56em) {
	.destaque__grade {
		grid-template-columns: 1.15fr 1fr;
		gap: var(--esp-7);
	}
}

.destaque__imagem img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.destaque__fragrancia {
	color: var(--conhaque);
	margin-bottom: var(--esp-2);
}

.destaque__formatos {
	margin: var(--esp-4) 0 var(--esp-5);
	border-top: 1px solid var(--linha-forte);
}

.destaque__formatos > div {
	display: flex;
	justify-content: space-between;
	gap: var(--esp-2);
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--linha-forte);
}

.destaque__formatos dt {
	font-weight: 400;
}

.destaque__formatos dd {
	margin: 0;
	font-size: var(--fs-pequeno);
	color: rgba(67, 63, 58, 0.8);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Blocos editoriais (A marca, Presentes)
   -------------------------------------------------------------------------- */
.editorial__grade {
	display: grid;
	gap: var(--esp-5);
	align-items: center;
}

@media (min-width: 56em) {
	.editorial__grade {
		grid-template-columns: 1fr 1fr;
		gap: var(--esp-7);
	}

	/* Presentes: texto à esquerda, imagem à direita (ritmo alternado) */
	.editorial--invertido .editorial__imagem {
		order: 2;
	}
}

.editorial__imagem img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.editorial__texto h2 {
	max-width: 13em;
}

.editorial__texto .texto-introducao {
	margin-bottom: var(--esp-4);
}

.editorial + .editorial {
	padding-top: 0;
}