/**
 * hero-slider.css
 * -----------------------------------------------------------------------
 * Estilo DIRETO (CSS puro) do componente Hero Slider (CPT hero_slide).
 * Posicionamento absoluto/sobreposição de imagens não dá pra resolver
 * bem só com utilitários do Tailwind, então esse componente ganha seu
 * próprio arquivo, na mesma lógica de assets/css/custom-gutenberg.css.
 *
 * Usa as variáveis --dc-color-* definidas em custom-gutenberg.css.
 * ----------------------------------------------------------------------- */

.hero-slider {
	/* Sem overflow:hidden de propósito — o layout é desconstruído, as
	 * imagens (e o parallax) podem vazar um pouco pra fora da seção.
	 * O padding-top aqui é só o suficiente pra o texto não nascer
	 * escondido atrás do header fixo/transparente. */
	position: relative;
	padding-top: 80px;
	padding-bottom: 3rem;
	background-color: var(--dc-color-cream);
}

@media (min-width: 768px) {
	.hero-slider {
		padding-top: 80px;
		padding-bottom: 5rem;
	}
}

/* No mobile, só título + botão — o parágrafo de descrição some pra
 * deixar o slide mais limpo/rápido de ler na tela pequena (nos dois
 * modos: imagem de fundo e texto+imagens). */
@media (max-width: 767px) {
	.hero-slide__bg-content p,
	.hero-slide__body p {
		display: none;
	}
}

/* Os slides ficam todos empilhados (position:absolute) no mesmo lugar
 * dentro do track, por isso o track não tem altura própria — é definida
 * via JS (assets/js/hero-slider.js) pra bater com a altura do slide
 * ativo no momento. Isso é o que permite o cross-fade de verdade: as
 * duas imagens (saindo/entrando) ficam sobrepostas e ambas visíveis
 * por um instante, em vez de uma sumir pra só depois a outra aparecer. */
.hero-slider__track {
	position: relative;
}

/* -----------------------------------------------------------------------
 * Slide: texto à esquerda, imagens à direita
 * --------------------------------------------------------------------- */

.hero-slide {
	/* top+left (não inset:0 inteiro) de propósito: assim a altura do
	 * slide continua vindo do próprio conteúdo (ex.: .hero-slide__bg
	 * tem altura explícita em vh), sem depender da altura do track —
	 * que, por sua vez, é definida via JS lendo a altura do slide ativo. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	z-index: 2;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (min-width: 900px) {
	.hero-slide {
		grid-template-columns: 1fr 1fr;
		gap: 4.5rem;
	}

	.hero-slide--0 {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
 * Slide modo "imagem de fundo" (quando o post tem imagem destacada).
 * Ignora a galeria ACF: a imagem destacada vira o fundo inteiro do
 * slide, com o conteúdo sobreposto num cartão escuro translúcido.
 * --------------------------------------------------------------------- */

.hero-slide--bg {
	display: block;
}

.hero-slide__bg {
	/* "Fura" o container-site que envolve o slider: 90% da TELA de
	 * verdade, não 90% do container já limitado. Altura controlada:
	 * tela inteira descontando a faixa do nav fixo (80px). */
	position: relative;
	width: 90vw;
	max-width: 90vw;
	height: calc(100vh - 80px);
	margin-left: calc(50% - 45vw);
	margin-right: calc(50% - 45vw);
	border-radius: 28px;
	overflow: hidden;
	background-color: var(--dc-color-secondary);
}

.hero-slide__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slide__bg-overlay {
	/* Escurece a imagem inteira (não só atrás do texto) pra destacar o
	 * conteúdo por cima. */
	position: absolute;
	inset: 0;
	background-color: rgba(32, 26, 21, 0.38);
	pointer-events: none;
}

.hero-slide__bg-content {
	/* Centralizado (vertical + horizontal) em vez de grudado no rodapé.
	 * Entrada com delay (a imagem aparece primeiro, o texto vem logo
	 * depois) via transition — não animation, porque animation só toca
	 * uma vez quando o elemento começa a ser renderizado; como os slides
	 * agora nunca saem do DOM (crossfade via opacity, não display:none),
	 * uma animation não reiniciaria ao trocar de slide. Transition, por
	 * outro lado, reinicia de verdade toda vez que .is-active muda. */
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	color: var(--dc-color-cream);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-slide.is-active .hero-slide__bg-content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}

.hero-slide__bg-content p {
	font-family: var(--dc-font-body);
	font-size: 1.5rem;
	line-height: 1;
	max-width: 42rem;
	margin: 0;
}

.hero-slide__bg-content p + p {
	margin-top: 0.75rem;
}

.hero-slide__bg-content h1,
.hero-slide__bg-content h2 {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.02;
	margin: 0 0 1rem;
}

.hero-slide__body {
	font-family: var(--dc-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--dc-color-ink);
	max-width: 34rem;
}

.hero-slide__body p:last-child {
	margin-bottom: 0;
}

.hero-slide__body h1,
.hero-slide__body h2 {
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	line-height: 1.02;
	margin: 0 0 1.5rem;
}

/* -----------------------------------------------------------------------
 * Composição de imagens (1, 2 ou 3 fotos do campo ACF "images")
 * --------------------------------------------------------------------- */

.hero-images {
	position: relative;
	width: 80%;
	aspect-ratio: 4 / 5;
}

.hero-images__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background-color: var(--dc-color-secondary);
	opacity: 0;
	transition: opacity 0.7s ease;
	/* O transform (translate) de cada imagem é controlado via JS pelo
	 * parallax — por isso o fade de carregamento aqui usa só opacity,
	 * sem mexer em transform (evita os dois brigarem pelo mesmo estilo). */
}

.hero-images__item.is-loaded {
	opacity: 1;
}

/* 1 imagem: preenche tudo, apenas um canto arredondado */
.hero-images--1 .hero-images__item--1 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 0 96px 0 0;
}

/* 2 imagens: base grande + uma menor sobrepondo em parte, no canto inferior */
.hero-images--2 .hero-images__item--1 {
	top: 0;
	right: 12%;
	bottom: 14%;
	left: 0;
	border-radius: 0 80px 0 0;
	z-index: 1;
}

.hero-images--2 .hero-images__item--2 {
	width: 56%;
	height: 52%;
	top: auto;
	right: 0;
	bottom: 0;
	left: auto;
	border-radius: 20px;
	box-shadow: 0 20px 45px rgba(32, 26, 21, 0.25);
	z-index: 2;
}

/*
 * 3 imagens: pilha vertical.
 *   1ª (topo)  → menor, sobrepõe um pouco a 2ª por cima.
 *   2ª (meio)  → grande, predominante.
 *   3ª (base)  → sobrepõe um pouco a 2ª por baixo.
 */
.hero-images--3 .hero-images__item--2 {
	top: 16%;
	right: 12%;
	bottom: 16%;
	left: 8%;
	border-radius: 0 80px 0 32px;
	z-index: 1;
}

.hero-images--3 .hero-images__item--1 {
	width: 50%;
	height: 30%;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	border-radius: 16px;
	box-shadow: 0 16px 36px rgba(32, 26, 21, 0.22);
	z-index: 2;
}

.hero-images--3 .hero-images__item--3 {
	width: 46%;
	height: 32%;
	top: auto;
	right: -22%;
	bottom: 0;
	left: auto;
	border-radius: 16px;
	box-shadow: 0 16px 36px rgba(32, 26, 21, 0.3);
	z-index: 3;
}

/* -----------------------------------------------------------------------
 * Setas prev/next — ficam FORA do cartão de 90vw, nos 5vw de margem de
 * cada lado (mesma lógica de "furar" o container usada no .hero-slide__bg).
 * Só a partir de 768px: no mobile não tem espaço sobrando nessa margem.
 * imagem é só uma seta apontando pra direita (assets/image/arrow.webp);
 * a da esquerda é a mesma imagem espelhada via transform.
 * --------------------------------------------------------------------- */

.hero-slider__arrow {
	display: none;
}

@media (min-width: 768px) {
	.hero-slider__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 45%;
		transform: translateY(-50%);
		z-index: 20;
		width: 2rem;
		height: 2rem;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
		opacity: 0.7;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.hero-slider__arrow:hover {
		opacity: 1;
	}

	.hero-slider__arrow img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* A borda da imagem fica em 5vw (ver .hero-slide__bg). Em vez de um
	 * valor fixo em vw (que não conta o tamanho da seta e deixava ela
	 * colada/sobrepondo a imagem), calcula a partir da borda da imagem
	 * menos a largura da seta menos um respiro de verdade. */
	.hero-slider__arrow--prev {
		left: calc(5vw - 2rem - 1rem);
	}

	.hero-slider__arrow--prev img {
		transform: rotate(180deg);
	}

	.hero-slider__arrow--prev:hover {
		transform: translateY(-50%) translateX(-4px);
	}

	.hero-slider__arrow--next {
		right: calc(5vw - 2rem - 1rem);
	}

	.hero-slider__arrow--next:hover {
		transform: translateY(-50%) translateX(4px);
	}
}

/* -----------------------------------------------------------------------
 * Navegação (dots)
 * --------------------------------------------------------------------- */

.hero-slider__nav {
	display: flex;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 2.5rem;
}

.hero-slider__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background-color: var(--dc-color-secondary);
	opacity: 0.3;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.hero-slider__dot:hover {
	opacity: 0.6;
}

.hero-slider__dot.is-active {
	opacity: 1;
	background-color: var(--dc-color-primary);
	transform: scale(1.2);
}

/* -----------------------------------------------------------------------
 * Animações e acessibilidade
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: opacity 0.3s ease !important;
		transform: none !important;
	}

	.hero-slide__bg-content,
	.hero-slide.is-active .hero-slide__bg-content {
		transition: none !important;
		transform: none !important;
		opacity: 1;
	}

	.hero-images__item {
		transition: opacity 0.3s ease;
		transform: none !important;
	}

	[data-parallax] {
		transform: none !important;
	}
}