/* ==========================================================================
   SECAO "NOSSOS CLIENTES CONFIRMAM"
   Titulo em degrade a esquerda e carrossel de depoimentos.
   ========================================================================== */

.secao-depoimentos {
	--degrade-depoimentos: linear-gradient(120deg, var(--cor-teal) 0%, var(--cor-verde) 55%, var(--cor-lima) 100%);
	--aspas-cor: var(--cor-verde);

	background-color: var(--cor-superficie);
	padding-block: clamp(5rem, 10vw, 9rem);
}

.secao-depoimentos__container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--respiro-secao);
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.secao-depoimentos__titulo {
	font-size: var(--titulo-secao);
	font-weight: var(--peso-bold);
	line-height: var(--titulo-secao-altura);
	letter-spacing: var(--titulo-secao-tracking);
	max-width: 14ch;

	background-image: var(--degrade-depoimentos);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Carrossel
   -------------------------------------------------------------------------- */

.carrossel {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

/* A trilha rola na horizontal com encaixe: arrastar com o dedo e navegar
   por teclado ja funcionam sem JavaScript. */
.carrossel__trilha {
	display: flex;
	overflow-x: auto;
	/* overflow-x: auto tambem recorta na vertical — sem este respiro as
	   aspas, que ficam fora da caixa do texto, apareceriam cortadas. */
	padding-block: 1.5rem 1.75rem;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* A barra some, mas a rolagem continua disponivel */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.carrossel__trilha::-webkit-scrollbar {
	display: none;
}

.carrossel__trilha:focus-visible {
	outline: 2px solid var(--cor-foco);
	outline-offset: 4px;
	border-radius: var(--raio-padrao);
}

/* --------------------------------------------------------------------------
   Setas
   -------------------------------------------------------------------------- */

.carrossel__seta {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	color: var(--cor-cinza);
	transition:
		color var(--transicao-rapida),
		background-color var(--transicao-rapida);
}

.carrossel__seta:hover,
.carrossel__seta:focus-visible {
	color: var(--cor-verde);
	background-color: rgba(0, 0, 0, 0.04);
}

/* Sem mais depoimentos naquele sentido */
.carrossel__seta[disabled] {
	opacity: 0.3;
	cursor: default;
}

.carrossel__icone {
	width: 1.25rem;
	height: 1.25rem;
}

/* O icone base aponta para baixo; giramos para cada lado */
.carrossel__seta--anterior .carrossel__icone {
	transform: rotate(90deg);
}

.carrossel__seta--proximo .carrossel__icone {
	transform: rotate(-90deg);
}

/* --------------------------------------------------------------------------
   Depoimento
   -------------------------------------------------------------------------- */

.depoimento {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

/* As aspas sao decorativas: entram por pseudo-elemento para nao serem
   lidas em voz alta nem copiadas junto com o texto. */
.depoimento__texto {
	position: relative;
	margin: 0;
	padding-block: 0.5rem;
	color: var(--cor-texto);
	font-size: clamp(0.75rem, 0.3vw + 0.6875rem, 0.875rem);
	line-height: 1.65;
	text-align: justify;
}

.depoimento__texto::before,
.depoimento__texto::after {
	position: absolute;
	color: var(--aspas-cor);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.5rem;
	line-height: 1;
	pointer-events: none;
}

.depoimento__texto::before {
	content: "\201C";
	top: -0.75rem;
	left: -1.25rem;
}

.depoimento__texto::after {
	content: "\201D";
	right: -1rem;
	bottom: -1.25rem;
}

/* --------------------------------------------------------------------------
   Logotipo do cliente — canto inferior direito, como no layout
   -------------------------------------------------------------------------- */

.depoimento__marca {
	margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
	align-self: flex-end;
}

.depoimento__logo {
	width: auto;
	max-height: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Fallbacks
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
	.secao-depoimentos__titulo {
		background-image: none;
		color: CanvasText;
	}
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.secao-depoimentos__titulo {
		color: var(--cor-teal);
	}
}

@media (prefers-reduced-motion: reduce) {
	.carrossel__trilha {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* --------------------------------------------------------------------------
   Celular

   Coluna unica com o titulo centralizado acima do carrossel. O logotipo do
   cliente vai para o centro, e nao mais para o canto.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
	.secao-depoimentos__container {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.5rem);
		justify-items: center;
		/* Recuo menor: a secao e estreita e o carrossel precisa da largura */
		padding-inline: var(--respiro-lateral);
	}

	/* Titulo maior no celular, quebrando em tres linhas */
	.secao-depoimentos__titulo {
		max-width: 9ch;
		text-align: center;
		font-size: clamp(1.75rem, 9vw, 2.5rem);
	}

	/* As setas descem para uma linha propria abaixo do depoimento: ao lado
	   da trilha elas comiam a largura do texto, que ficava espremido. */
	.carrossel {
		width: 100%;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"trilha   trilha"
			"anterior proximo";
		row-gap: clamp(0.75rem, 3vw, 1.25rem);
		column-gap: 0.75rem;
	}

	.carrossel__trilha {
		grid-area: trilha;
	}

	.carrossel__seta--anterior {
		grid-area: anterior;
		justify-self: end;
	}

	.carrossel__seta--proximo {
		grid-area: proximo;
		justify-self: start;
	}

	/* Espaco so para as aspas, que ficam fora da caixa do texto */
	.depoimento {
		padding-inline: 1.5rem;
	}

	.depoimento__texto {
		/* A hifenizacao evita os vaos enormes que o texto justificado abre
		   quando a coluna e estreita. */
		hyphens: auto;
		font-size: 0.8125rem;
	}

	.depoimento__marca {
		align-self: center;
	}
}