/*
 * RAVOLLI — CARROSSEL HOME v1.4.1
 * Base aprovada: 1.2.x.
 *
 * Evolução (carrossel de luxo sem botão, 12/09/2026): remove o botão visível
 * em favor do link de imagem inteira (.ravolli-home-carousel__slide-link) e
 * adiciona a camada de contraste atrás do texto (.ravolli-home-carousel__overlay).
 * Setas, dots, altura e autoplay não foram alterados nesta versão.
 *
 * 1.4.0 (14/09/2026): título de slide pode ser uma imagem (logotipo de
 * coleção) em vez de texto — .ravolli-home-carousel__title-image.
 *
 * 1.4.1 (25/09/2026): hero mais alto — computador 93svh (600–1000px),
 * celular 96svh. Decisão da Ana.
 */

body.home.ravolli-home-carousel-active .site-main,
body.home.ravolli-home-carousel-active .site-main > .ct-container,
body.home.ravolli-home-carousel-active .site-main > .ct-container-full {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.ravolli-home-carousel {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 58px;
	background: #f5f4f2;
	overflow: hidden;
}

.ravolli-home-carousel__viewport {
	position: relative;
	width: 100%;
	/*
	 * Hero ocupa a maior parte da tela, mas nunca 100%: a sobra deixa a seção
	 * seguinte aparecer na borda inferior, sinalizando que há mais conteúdo.
	 * svh (small viewport height) evita o "pulo" de layout quando a barra de
	 * endereço do navegador móvel aparece e some durante a rolagem.
	 */
	height: clamp(600px, 93svh, 1000px);
	overflow: hidden;
}

.ravolli-home-carousel__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ravolli-home-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms ease, visibility 900ms ease;
	pointer-events: none;
}

.ravolli-home-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.ravolli-home-carousel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/*
 * Área de clique da imagem inteira. Substitui o botão visível: quando o
 * slide tem link, tudo — imagem, camada de contraste e texto — fica dentro
 * deste <a>, que ocupa o mesmo espaço do slide (inset: 0).
 */
.ravolli-home-carousel__slide-link {
	display: block;
	position: absolute;
	inset: 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Camada de contraste (10–15% preto) entre a imagem e o texto. Só é
 * renderizada quando o slide tem título ou texto (ver has_copy() no PHP) —
 * um slide só-imagem não ganha esse escurecimento.
 */
.ravolli-home-carousel__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(6, 14, 30, 0.12);
	pointer-events: none;
}

/* O ponto X/Y representa o centro do bloco de texto. */
.ravolli-home-carousel__copy-wrap {
	position: absolute;
	left: var(--ravolli-copy-x, 24%);
	top: var(--ravolli-copy-y, 50%);
	z-index: 2;
	width: var(--ravolli-copy-width, 34%);
	max-width: 560px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ravolli-home-carousel__slide--left .ravolli-home-carousel__copy-wrap {
	text-align: left;
}

.ravolli-home-carousel__slide--center .ravolli-home-carousel__copy-wrap {
	text-align: center;
}

.ravolli-home-carousel__slide--right .ravolli-home-carousel__copy-wrap {
	text-align: right;
}

.ravolli-home-carousel__copy {
	width: 100%;
}

.ravolli-home-carousel__slide--light .ravolli-home-carousel__copy {
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.ravolli-home-carousel__slide--dark .ravolli-home-carousel__copy {
	color: #060e1e;
	text-shadow: 0 1px 18px rgba(255, 255, 255, 0.24);
}

.ravolli-home-carousel__slide--gold .ravolli-home-carousel__copy {
	color: var(--wp--preset--color--accent-gold, #BC9C6D);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

.ravolli-home-carousel__title {
	margin: 0;
	color: inherit !important;
	font-family: 'Lora', serif;
	font-size: clamp(34px, 3.25vw, 52px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

/*
 * Imagem de título (logotipo de coleção com fundo transparente) no lugar do
 * <h2>. Ocupa a largura do mesmo bloco posicionável (--ravolli-copy-width) —
 * sem largura/altura fixas, então qualquer proporção de arte funciona.
 */
.ravolli-home-carousel__title-image {
	display: block;
	width: 100%;
	height: auto;
}

.ravolli-home-carousel__text {
	margin: 16px 0 0;
	color: inherit !important;
	font-family: 'Source Serif 4', serif;
	font-size: clamp(17px, 1.35vw, 21px);
	line-height: 1.45;
}

.ravolli-home-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0 0 3px;
	/*
	 * Seta sem moldura. Sem o círculo de fundo, o contraste passa a depender da
	 * foto — a sombra garante legibilidade sobre imagens claras sem introduzir
	 * um elemento visual concorrente.
	 */
	border: 0;
	background: none;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(6, 14, 30, 0.55));
	font: 300 32px/1 Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 180ms ease, transform 180ms ease;
}

.ravolli-home-carousel:hover .ravolli-home-carousel__arrow,
.ravolli-home-carousel:focus-within .ravolli-home-carousel__arrow {
	opacity: 1;
}

.ravolli-home-carousel__arrow:hover,
.ravolli-home-carousel__arrow:focus-visible {
	filter: drop-shadow(0 1px 5px rgba(6, 14, 30, 0.7));
}

.ravolli-home-carousel__arrow--prev {
	left: 24px;
}

.ravolli-home-carousel__arrow--next {
	right: 24px;
}

.ravolli-home-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 3;
	display: flex;
	gap: 9px;
	transform: translateX(-50%);
}

.ravolli-home-carousel__dot {
	width: 7px;
	height: 7px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(6, 14, 30, 0.28);
	cursor: pointer;
	transition: transform 180ms ease, background 180ms ease;
}

.ravolli-home-carousel__dot.is-active {
	background: #fff;
	transform: scale(1.2);
}

@media (max-width: 767px) {
	.ravolli-home-carousel {
		margin-bottom: 42px;
	}

	.ravolli-home-carousel__viewport {
		/*
		 * Efeito wallpaper: a imagem vertical (9:16) preenche quase toda a tela.
		 * A tira de 4% que sobra insinua a seção seguinte sem parecer vazio.
		 */
		height: 96svh;
	}

	.ravolli-home-carousel__copy-wrap {
		left: var(--ravolli-copy-mobile-x, 50%);
		top: var(--ravolli-copy-mobile-y, 72%);
		width: var(--ravolli-copy-mobile-width, 88%);
		max-width: 440px;
	}

	.ravolli-home-carousel__title {
		font-size: 32px;
	}

	.ravolli-home-carousel__text {
		margin-top: 12px;
		font-size: 17px;
	}

	.ravolli-home-carousel__arrow {
		width: 38px;
		height: 38px;
		font-size: 28px;
		opacity: 0.88;
	}

	.ravolli-home-carousel__arrow--prev {
		left: 12px;
	}

	.ravolli-home-carousel__arrow--next {
		right: 12px;
	}

	.ravolli-home-carousel__dots {
		bottom: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ravolli-home-carousel__slide,
	.ravolli-home-carousel__arrow,
	.ravolli-home-carousel__dot {
		transition: none !important;
	}
}