/*
 * NOTA DE ESPECIFICIDADE: os seletores de item repetem `.csa-depoimentos` de
 * propósito. A conversão para blocos nativos (Fase 4.5) gerou para cada
 * citação/parágrafo um pin de caixa e de margem escopado por página --
 * `body.page-id-21 .csa-box-073669e8 { padding: 28px }`, especificidade
 * (0,2,1) -- e o tema imprime isso em `wp_head` na prioridade 31, ou seja
 * DEPOIS desta folha. Com `.csa-depoimentos .csa-depoimento` (0,2,0) quem
 * vencia era o pin; com a classe repetida vira (0,3,0) e esta folha ganha.
 *
 * Seção "Declarações de Graças / Os Milagres dos Santos Anjos" da Home.
 *
 * O módulo original é um carrossel (Splide) renderizado em runtime pelo React
 * da HubSpot; o HTML capturado na migração só trouxe o ponto de montagem
 * vazio. A Fase 4.2 recuperou os sete depoimentos e os recriou como blocos de
 * citação estáticos -- mas empilhados numa grade de cartões, um visual que o
 * original não tem (e 1706px de altura contra 1010px).
 *
 * Aqui o visual é o do original, medido ao vivo com getComputedStyle em
 * 2026-08-21: cartão branco de cantos 16px com 48px de respiro em cima e
 * embaixo, UM depoimento por vez (texto 32px/49.58px centralizado, autor
 * 24px), setas de 36px nas laterais e sete tracinhos de 48x4px embaixo.
 * A estrutura do carrossel é montada em runtime por
 * assets/js/testimonials-slider.js, sem alterar o conteúdo do post.
 */

.csa-depoimentos {
	position: relative;
	box-sizing: border-box;
	/* 48px em cima e embaixo, como no original. Os tracinhos de paginação são
	   absolutos e ficam na folga do último respiro do slide -- reservar espaço
	   extra embaixo deixava o cartão 61px mais alto que o original. */
	padding: 48px 0;
	background: var(--wp--preset--color--base-1, #fff);
	border-radius: 16px;
	max-width: none;
	text-align: center;
}

.csa-depoimentos__viewport {
	margin: 0 48px;
	overflow: hidden;
}

.csa-depoimentos__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.4s ease;
}

.csa-depoimentos.csa-depoimentos .csa-depoimento {
	box-sizing: border-box;
	margin: 0;
	/* No original: blockquote com `margin: 0 40px 32px` e `padding: 24px` --
	   64px de recuo lateral e 56px abaixo do conteúdo. */
	padding: 24px 64px 56px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

/* Só vira slide quando o JS montou o carrossel; sem JS a lista continua
   empilhada e legível. */
.csa-depoimentos--slider .csa-depoimento {
	flex: 0 0 100%;
	width: 100%;
}

.csa-depoimentos.csa-depoimentos .csa-depoimento__texto {
	/* 77px = os 40px de respiro do texto no original + a caixa do rodapé do
	   depoimento, que lá tem um bloco a mais acima do nome. */
	margin: 0 0 77px;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 32px;
	font-weight: 500;
	line-height: 49.58px;
	color: var(--wp--preset--color--base-3, #09152B);
	text-align: center;
}

.csa-depoimentos.csa-depoimentos .csa-depoimento__autor {
	display: block;
	/* Fecha o orçamento vertical abaixo do texto medido no original (196px):
	   77 (texto) + 24 (nome) + 39 + 56 (padding do bloco). */
	margin: 0 0 39px;
	font-family: var(--wp--preset--font-family--body, Georgia, "Times New Roman", Times, serif);
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: 24px;
	color: var(--wp--preset--color--base-3, #09152B);
	text-align: center;
}

/* O travessão antes do nome era invenção da recriação estática; o original
   mostra só o nome. */
.csa-depoimentos.csa-depoimentos .csa-depoimento__autor::before {
	content: none;
}

.csa-depoimentos__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	opacity: 0.7;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.csa-depoimentos__arrow:hover {
	opacity: 1;
}

.csa-depoimentos__arrow svg {
	width: 24px;
	height: 38px;
	fill: #000;
}

.csa-depoimentos__arrow--prev {
	left: 18px;
}

.csa-depoimentos__arrow--prev svg {
	transform: rotate(180deg);
}

.csa-depoimentos__arrow--next {
	right: 18px;
}

.csa-depoimentos__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 57px;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0 18px;
	list-style: none;
}

.csa-depoimentos__dots li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.csa-depoimentos__dots button {
	display: inline-block;
	width: 48px;
	height: 4px;
	margin: 0 6px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #000;
	opacity: 0.25;
	cursor: pointer;
}

.csa-depoimentos__dots button.is-active {
	opacity: 1;
}

@media (max-width: 782px) {
	.csa-depoimentos.csa-depoimentos .csa-depoimento {
		padding: 16px 8px 24px;
	}

	.csa-depoimentos.csa-depoimentos .csa-depoimento__texto {
		font-size: 24px;
		line-height: 1.5;
	}

	.csa-depoimentos__viewport {
		margin: 0 36px;
	}

	/* Sete tracinhos de 48px + 12px de folga não cabem numa tela estreita e,
	   como a lista não é recortada por ninguém, estouravam a largura do
	   documento. Encolhem e quebram linha. */
	.csa-depoimentos__dots {
		flex-wrap: wrap;
		padding: 0 8px;
	}

	.csa-depoimentos__dots button {
		width: 24px;
		margin: 2px 4px;
	}
}