/**
 * Widget Circular Testimonials.
 *
 * Só carrega nas páginas que usam o widget, via get_style_depends().
 * Tudo é escopado em .brz-ctestimonials, e toda custom property nasce na
 * raiz do próprio widget.
 *
 * O estado inicial é inteiro CSS: a imagem is-brz-active no centro, as
 * is-brz-prev e is-brz-next nos lados, e só o texto is-brz-active visível.
 * Sem JS é isso que fica na tela — um depoimento completo e estático.
 *
 * Transição só existe com a classe is-brz-ctestimonials-ready, que o JS
 * adiciona, e só fora do prefers-reduced-motion: reduce. Com movimento
 * reduzido as trocas acontecem, mas sem animação nenhuma.
 */

.brz-ctestimonials {
	/* Layout. Direção, proporção, gaps e alinhamentos saem dos controles
	   responsivos da seção Layout, que escrevem nestas variáveis por
	   breakpoint — o Elementor gera as media queries dos breakpoints ativos
	   do site. Os valores daqui são os defaults daqueles controles, e só
	   valem sozinhos enquanto o CSS da página não foi regerado. */
	--brz-ctestimonials-image-col: 50;
	--brz-ctestimonials-column-gap: 5rem;
	--brz-ctestimonials-row-gap: 3rem;
	--brz-ctestimonials-image-size: calc( ( 100% - var( --brz-ctestimonials-column-gap ) ) * var( --brz-ctestimonials-image-col ) / 100 );
	--brz-ctestimonials-areas: "image text";
	--brz-ctestimonials-columns: minmax( 0, var( --brz-ctestimonials-image-size ) ) minmax( 0, 1fr );
	--brz-ctestimonials-content-justify: flex-start;
	--brz-ctestimonials-arrows-push: 0;
	--brz-ctestimonials-arrows-spacing: 3rem;
	/* absolute: os inativos saem do fluxo e as setas seguem o depoimento
	   ativo. static: todos na mesma célula, altura do mais longo. É o
	   controle Arrows position que escreve, por breakpoint. */
	--brz-ctestimonials-slide-position: absolute;
	--brz-ctestimonials-text-align: left;
	--brz-ctestimonials-arrows-justify: flex-start;

	--brz-ctestimonials-image-ratio: 4 / 5;
	--brz-ctestimonials-image-position: center;
	--brz-ctestimonials-image-width: 100%;
	--brz-ctestimonials-image-radius: 1.5rem;
	--brz-ctestimonials-perspective: 1000px;

	/* Deslocamento lateral e elevação das imagens vizinhas. O JS reescreve
	   os dois pela largura do palco, com a mesma conta do original; estes
	   valores são o que a conta devolve em palco estreito, e valem sem JS. */
	--brz-ctestimonials-offset: 60px;
	--brz-ctestimonials-lift: 48px;
	--brz-ctestimonials-inset: 40px;
	--brz-ctestimonials-rise: 0px;

	--brz-ctestimonials-ease: cubic-bezier( 0.4, 2, 0.3, 1 );
	--brz-ctestimonials-image-duration: 0.8s;
	--brz-ctestimonials-text-duration: 0.3s;
	--brz-ctestimonials-word-duration: 0.22s;
	--brz-ctestimonials-word-step: 25ms;

	--brz-ctestimonials-name-color: inherit;
	--brz-ctestimonials-name-spacing: 0.25rem;
	--brz-ctestimonials-designation-color: rgba( 0, 0, 0, 0.7 );
	--brz-ctestimonials-designation-color: color-mix( in srgb, currentColor 70%, transparent );
	--brz-ctestimonials-designation-spacing: 2rem;
	--brz-ctestimonials-quote-bg: transparent;
	--brz-ctestimonials-quote-color: inherit;

	--brz-ctestimonials-arrow-size: 2.7rem;
	--brz-ctestimonials-arrow-icon-size: 1.5rem;
	--brz-ctestimonials-arrow-gap: 1.5rem;
	--brz-ctestimonials-arrow-bg: #141414;
	--brz-ctestimonials-arrow-color: #f1f1f7;
	--brz-ctestimonials-arrow-bg-hover: #00a6fb;
	--brz-ctestimonials-arrow-color-hover: var( --brz-ctestimonials-arrow-color );

	box-sizing: border-box;
	column-gap: var( --brz-ctestimonials-column-gap );
	display: grid;
	grid-template-areas: var( --brz-ctestimonials-areas );
	grid-template-columns: var( --brz-ctestimonials-columns );
	max-width: 100%;
	row-gap: var( --brz-ctestimonials-row-gap );
	width: 100%;
}

.brz-ctestimonials:focus {
	outline: none;
}

.brz-ctestimonials:focus-visible {
	border-radius: 0.5rem;
	outline: 2px solid currentColor;
	outline-offset: 0.5rem;
}

/* Palco das imagens ------------------------------------------------------ */

/* A margem de cima é o quanto as vizinhas elevadas sobem além do palco,
   calculada pelo JS. Sem ela o widget invadiria a seção de cima. */
.brz-ctestimonials__images {
	/* Topo, e não o stretch padrão do grid: sem altura própria, o palco
	   seria esticado até a altura da coluna de texto, e a foto perderia a
	   proporção sempre que o depoimento fosse mais alto que ela. */
	align-self: start;
	grid-area: image;
	justify-self: center;
	margin-top: var( --brz-ctestimonials-rise );
	max-width: 100%;
	min-width: 0;
	perspective: var( --brz-ctestimonials-perspective );
	position: relative;
	width: var( --brz-ctestimonials-image-width );
}

/* A altura do palco vem deste espaçador invisível, o único filho em fluxo
   (as fotos são absolutas). Ele tem a largura da foto — o palco menos o
   recuo das laterais, que o JS calcula — e a proporção escolhida no
   controle Aspect ratio. Resultado: a foto visível fica exatamente naquela
   proporção em qualquer largura, e quando o JS muda o recuo a altura
   acompanha sozinha. O JS lê a altura real do palco para elevar as
   vizinhas, então não precisa saber de nada disto. */
.brz-ctestimonials__images::before {
	aspect-ratio: var( --brz-ctestimonials-image-ratio );
	content: "";
	display: block;
	margin-inline: var( --brz-ctestimonials-inset );
}

/* As imagens não ocupam o palco inteiro: cada lado recua o quanto a vizinha
   deslocada escaparia da coluna, e a composição inteira cabe na largura do
   container do Elementor, sem rolagem lateral. O recuo exato depende do
   deslocamento, do scale, do giro e da perspectiva, e quem o calcula é o
   JS; os 40px do default são o que a conta dá num palco típico. */
.brz-ctestimonials__image {
	border-radius: var( --brz-ctestimonials-image-radius );
	bottom: 0;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.2 );
	left: var( --brz-ctestimonials-inset );
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: var( --brz-ctestimonials-inset );
	top: 0;
	z-index: 1;
}

.brz-ctestimonials__image img {
	border-radius: inherit;
	display: block;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --brz-ctestimonials-image-position );
	width: 100%;
}

.brz-ctestimonials__image.is-brz-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 3;
}

.brz-ctestimonials__image.is-brz-prev,
.brz-ctestimonials__image.is-brz-next {
	opacity: 1;
	z-index: 2;
}

.brz-ctestimonials__image.is-brz-prev {
	transform: translateX( calc( var( --brz-ctestimonials-offset ) * -1 ) ) translateY( calc( var( --brz-ctestimonials-lift ) * -1 ) ) scale( 0.85 ) rotateY( 15deg );
}

.brz-ctestimonials__image.is-brz-next {
	transform: translateX( var( --brz-ctestimonials-offset ) ) translateY( calc( var( --brz-ctestimonials-lift ) * -1 ) ) scale( 0.85 ) rotateY( -15deg );
}

/* Texto ------------------------------------------------------------------ */

.brz-ctestimonials__content {
	display: flex;
	flex-direction: column;
	grid-area: text;
	justify-content: var( --brz-ctestimonials-content-justify );
	min-width: 0;
	text-align: var( --brz-ctestimonials-text-align );
}

/* Todos os textos ocupam a mesma célula da grade, sobrepostos para a troca.
   Quem define a altura do bloco é o controle Arrows position, pela
   --brz-ctestimonials-slide-position dos inativos:

   - absolute (Follow each testimonial): os inativos saem do fluxo, o bloco
     tem a altura do ativo e as setas ficam logo abaixo dele. O JS anima a
     altura na troca, para as setas deslizarem em vez de pular;
   - static (Reserve the longest): todos ficam no fluxo, o bloco tem a
     altura do mais longo e as setas nunca se movem.

   O inset só vale quando o position é absolute; no static é ignorado. */
.brz-ctestimonials__slides {
	display: grid;
	position: relative;
}

.brz-ctestimonials__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY( 20px );
	visibility: hidden;
}

.brz-ctestimonials__slide:not( .is-brz-active ) {
	left: 0;
	position: var( --brz-ctestimonials-slide-position );
	right: 0;
	top: 0;
}

.brz-ctestimonials__slide.is-brz-active {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* Raiz no seletor: o kit do Elementor escreve .elementor-kit-N h3 e
   .elementor-kit-N p, que têm uma classe e um elemento e passariam à frente
   de uma classe só — o controle de cor não teria efeito nenhum. */
.brz-ctestimonials .brz-ctestimonials__name {
	color: var( --brz-ctestimonials-name-color );
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var( --brz-ctestimonials-name-spacing );
}

.brz-ctestimonials .brz-ctestimonials__designation {
	color: var( --brz-ctestimonials-designation-color );
	font-size: 1.25rem;
	line-height: 1.4;
	margin: 0 0 var( --brz-ctestimonials-designation-spacing );
}

/* O blockquote chega estilizado de muitos temas — o Redox, por exemplo,
   pinta fundo, arredonda e acolchoa todo blockquote. Tudo isso é zerado
   aqui, e fundo, raio e padding voltam só pelos controles do widget. */
.brz-ctestimonials .brz-ctestimonials__quote {
	background-color: var( --brz-ctestimonials-quote-bg );
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var( --brz-ctestimonials-quote-color );
	font-size: 1.25rem;
	font-style: normal;
	line-height: 1.75;
	margin: 0;
	overflow-wrap: break-word;
	padding: 0;
	quotes: none;
	text-align: inherit;
}

.brz-ctestimonials__quote::before,
.brz-ctestimonials__quote::after {
	content: none;
}

/* O texto inteiro para o leitor de tela, escrito pelo JS ao lado das
   palavras animadas (que ficam com aria-hidden). Escondido só da vista:
   a classe é do widget porque não dá para contar com o tema trazer a
   screen-reader-text. */

.brz-ctestimonials__sr {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.brz-ctestimonials__word {
	display: inline-block;
}

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

/* O padding é o espaço mínimo acima das setas. No alinhamento esticado,
   a margem automática as empurra para a base da coluna, alinhadas com o pé
   da imagem, como no original. */
.brz-ctestimonials__arrows {
	display: flex;
	gap: var( --brz-ctestimonials-arrow-gap );
	justify-content: var( --brz-ctestimonials-arrows-justify );
	margin-top: var( --brz-ctestimonials-arrows-push );
	padding-top: var( --brz-ctestimonials-arrows-spacing );
}

.brz-ctestimonials__arrows[hidden] {
	display: none;
}

/* Raiz no seletor para passar à frente dos estilos de button e
   [type=button]:hover que os temas costumam trazer. */
.brz-ctestimonials .brz-ctestimonials__arrow {
	align-items: center;
	appearance: none;
	background-color: var( --brz-ctestimonials-arrow-bg );
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: var( --brz-ctestimonials-arrow-color );
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-size: var( --brz-ctestimonials-arrow-icon-size );
	height: var( --brz-ctestimonials-arrow-size );
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.3s, color 0.3s;
	width: var( --brz-ctestimonials-arrow-size );
}

.brz-ctestimonials .brz-ctestimonials__arrow:hover,
.brz-ctestimonials .brz-ctestimonials__arrow:focus-visible {
	background-color: var( --brz-ctestimonials-arrow-bg-hover );
	color: var( --brz-ctestimonials-arrow-color-hover );
}

.brz-ctestimonials .brz-ctestimonials__arrow:focus-visible {
	outline: 2px solid var( --brz-ctestimonials-arrow-bg-hover );
	outline-offset: 3px;
}

.brz-ctestimonials__arrow svg,
.brz-ctestimonials__arrow i {
	display: block;
	font-size: var( --brz-ctestimonials-arrow-icon-size );
	height: var( --brz-ctestimonials-arrow-icon-size );
	width: var( --brz-ctestimonials-arrow-icon-size );
}

/* Ícone SVG da biblioteca do Elementor desenha com fill. O embutido
   desenha com stroke e já traz fill="none" no próprio markup. */
.brz-ctestimonials__arrow .e-font-icon-svg {
	fill: currentColor;
}

/* Empty state ------------------------------------------------------------ */

.brz-ctestimonials__empty {
	border: 1px dashed currentColor;
	margin: 0;
	opacity: 0.6;
	padding: 1rem;
	text-align: center;
}

/* Empilhado no mobile ---------------------------------------------------- */

/* Só a rede de segurança do CSS da página ainda não regerado: com ele em
   dia, é o default mobile do controle Direction que empilha, dentro da
   media query que o Elementor gera para o breakpoint mobile do site. */
@media ( max-width: 767px ) {

	.brz-ctestimonials {
		--brz-ctestimonials-areas: "image" "text";
		--brz-ctestimonials-columns: minmax( 0, 1fr );
	}
}

/* Movimento -------------------------------------------------------------- */

@media ( prefers-reduced-motion: no-preference ) {

	.brz-ctestimonials.is-brz-ctestimonials-ready .brz-ctestimonials__image {
		transition:
			opacity var( --brz-ctestimonials-image-duration ) var( --brz-ctestimonials-ease ),
			transform var( --brz-ctestimonials-image-duration ) var( --brz-ctestimonials-ease );
	}

	/* Saída: sobe e some. A visibilidade só vira hidden depois do fade,
	   para o texto não desaparecer de uma vez. */
	.brz-ctestimonials.is-brz-ctestimonials-ready .brz-ctestimonials__slide.is-brz-leaving {
		opacity: 0;
		transform: translateY( -20px );
		transition:
			opacity var( --brz-ctestimonials-text-duration ) ease-in-out,
			transform var( --brz-ctestimonials-text-duration ) ease-in-out,
			visibility 0s linear var( --brz-ctestimonials-text-duration );
		visibility: hidden;
	}

	/* Entrada: espera a saída terminar, como o AnimatePresence com
	   mode="wait" do original, e sobe de 20px até o lugar. */
	.brz-ctestimonials.is-brz-ctestimonials-ready .brz-ctestimonials__slide.is-brz-active {
		transition:
			opacity var( --brz-ctestimonials-text-duration ) ease-in-out var( --brz-ctestimonials-text-duration ),
			transform var( --brz-ctestimonials-text-duration ) ease-in-out var( --brz-ctestimonials-text-duration ),
			visibility 0s linear var( --brz-ctestimonials-text-duration );
	}

	/* Palavras: nascem desfocadas, e o depoimento ativo as revela uma a uma.
	   O índice de cada palavra vem do JS em --brz-ctestimonials-word. O
	   atraso só existe na regra do ativo: na saída a palavra fica nítida e
	   quem some é o bloco inteiro. */
	.brz-ctestimonials.is-brz-ctestimonials-ready .brz-ctestimonials__word {
		filter: blur( 10px );
		opacity: 0;
		transform: translateY( 5px );
	}

	.brz-ctestimonials.is-brz-ctestimonials-ready .is-brz-leaving .brz-ctestimonials__word,
	.brz-ctestimonials.is-brz-ctestimonials-ready .is-brz-active .brz-ctestimonials__word {
		filter: none;
		opacity: 1;
		transform: none;
	}

	.brz-ctestimonials.is-brz-ctestimonials-ready .is-brz-active .brz-ctestimonials__word {
		transition:
			filter var( --brz-ctestimonials-word-duration ) ease-in-out,
			opacity var( --brz-ctestimonials-word-duration ) ease-in-out,
			transform var( --brz-ctestimonials-word-duration ) ease-in-out;
		transition-delay: calc( var( --brz-ctestimonials-text-duration ) + var( --brz-ctestimonials-word, 0 ) * var( --brz-ctestimonials-word-step ) );
	}
}

/* Com movimento reduzido as imagens vizinhas continuam de lado, mas sem
   giro nem elevação — o 3D é o que mais incomoda quem pediu menos
   movimento, mesmo parado. */
@media ( prefers-reduced-motion: reduce ) {

	.brz-ctestimonials__image.is-brz-prev {
		transform: translateX( calc( var( --brz-ctestimonials-offset ) * -1 ) ) scale( 0.85 );
	}

	.brz-ctestimonials__image.is-brz-next {
		transform: translateX( var( --brz-ctestimonials-offset ) ) scale( 0.85 );
	}
}