/**
 * Carrossel de depoimentos (template-parts/reviews-content.php).
 *
 * Substitui o Swiper. O markup antigo trazia toda a estrutura da biblioteca
 * (`swiper`, `swiper-wrapper`, `swiper-slide`, `swiper-button-*`), mas os
 * enqueues do CSS e do JS estavam comentados e ninguém chamava `new Swiper()`.
 * Na prática os depoimentos apareciam empilhados em coluna única e as setas
 * eram divs vazias e inertes.
 *
 * A rolagem horizontal com encaixe é feita aqui, em CSS, com scroll-snap; as
 * setas são ligadas por initTestimonialsCarousel() em assets/js/main-sale-page.js.
 * Isso evita carregar 145 KB de JavaScript para um carrossel simples.
 *
 * As classes são próprias (prefixo `tav-`) e não dependem do Tailwind. O motivo
 * não é o que esta nota dizia — a de que "o assets/css/output.css é um build
 * versionado sem toolchain no repositório", o que deixou de valer quando
 * tailwind.config.js e src/css/output.css foram versionados. É que um carrossel
 * com scroll-snap, trilha rolável e setas de estado precisa de regras que não
 * têm utilitário equivalente (`scroll-snap-type`, `::-webkit-scrollbar`,
 * `calc()` sobre o gap), e espalhar metade delas em classes utilitárias no
 * markup separaria em dois lugares um componente que se lê melhor junto.
 */

.tav-carousel {
	position: relative;
}

/* ==========================================================================
   Trilha
   ========================================================================== */

/* `scroll-snap-type: x mandatory` faz cada card encaixar na borda esquerda ao
   fim da rolagem. O `scroll-padding` reserva o mesmo espaço do `gap` para o
   card encaixado não colar na borda do container. A barra de rolagem é
   escondida porque a navegação já é feita pelas setas (desktop) e pelo arrasto
   ou swipe (mobile). */
.tav-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 1.5rem;
	padding: 0.5rem 0.25rem 1.5rem;
	margin: 0;
	list-style: none;

	/* Firefox */
	scrollbar-width: none;

	/* Internet Explorer / Edge legado */
	-ms-overflow-style: none;
}

/* Chrome, Safari e navegadores baseados em WebKit */
.tav-carousel__track::-webkit-scrollbar {
	display: none;
}

/* ==========================================================================
   Card
   ========================================================================== */

/* Largura responsiva sem Tailwind: 1 card por vez no mobile, 2 em telas
   médias e 3 acima de 1024px. O `calc()` desconta a fatia do `gap` que cabe a
   cada card para que a soma feche exatamente a largura da trilha. */
.tav-carousel__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {

	.tav-carousel__item {

		/* 2 cards visíveis: cada um cede metade de um `gap`. */
		width: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 1024px) {

	.tav-carousel__item {

		/* 3 cards visíveis: dois `gap` divididos entre os três cards. */
		width: calc((100% - 3rem) / 3);
	}
}

/* ==========================================================================
   Avatar
   ========================================================================== */

.tav-carousel__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1rem;
	flex-shrink: 0;
}

/* Variante com as iniciais do autor, usada quando o depoimento não tem foto. */
.tav-carousel__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #dbeafe;
	color: #1d4ed8;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: 0.02em;
	user-select: none;
}

/* ==========================================================================
   Texto
   ========================================================================== */

.tav-carousel__name {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-align: center;
	color: #1f2937;
}

.tav-carousel__text {
	margin: 0;
	line-height: 1.6;
	color: #374151;
}

/* ==========================================================================
   Setas
   ========================================================================== */

/* Escondidas abaixo de 768px: no mobile o usuário arrasta a trilha com o dedo
   e as setas só roubariam espaço sobre o card. */
.tav-carousel__nav {
	display: none;
}

@media (min-width: 768px) {

	.tav-carousel__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #e5e7eb;
		border-radius: 50%;
		background-color: #fff;
		color: #1f2937;
		cursor: pointer;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
		transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
		z-index: 2;
	}

	.tav-carousel__nav--prev {
		left: -0.5rem;
	}

	.tav-carousel__nav--next {
		right: -0.5rem;
	}

	.tav-carousel__nav:hover {
		background-color: #1d4ed8;
		color: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	}

	/* Estado desabilitado: aplicado pelo JavaScript nas extremidades da trilha. */
	.tav-carousel__nav:disabled {
		opacity: 0.4;
		cursor: default;
		box-shadow: none;
	}

	.tav-carousel__nav:disabled:hover {
		background-color: #fff;
		color: #1f2937;
	}
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

/* Mesmo contorno azul padronizado em assets/css/global.css. A trilha recebe
   `tabindex="0"` no markup para poder ser rolada pelo teclado, então precisa
   de foco visível tanto quanto os botões. */
.tav-carousel__nav:focus-visible,
.tav-carousel__track:focus-visible {
	outline: 3px solid rgba(11, 96, 224, 0.35);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.tav-carousel__track {
		scroll-behavior: auto;
	}

	.tav-carousel__nav {
		transition: none;
	}
}