/* ==========================================================================
   Cúpula em Saúde — Seção "Feedbacks / Depoimentos"
   Inspirada no componente "testimonials-columns" (21st.dev): 3 colunas de
   cards com rolagem vertical infinita, com fade suave no topo e na base.
   Identidade da Cúpula: títulos no padrão do site (eyebrow + Anton) e cores
   da marca nos detalhes.

   Inserção: shortcode [cupula_feedbacks]. Edição total pelo menu
   "Feedbacks Cúpula" (textos, depoimentos, cores e velocidade). Tokens em
   custom.css.
   ========================================================================== */

.cupula-feedbacks {
	--fb-bg: var(--cs-color-white, #ffffff);
	--fb-card-bg: #ffffff;
	--fb-card-border: #ececf3;
	--fb-text: #3a3f55;
	--fb-nome: var(--cs-color-navy, #02065F);
	--fb-cargo: #8b90a6;
	--fb-eyebrow: #45a397;
	--fb-titulo: var(--cs-color-navy, #02065F);
	--fb-intro: var(--cs-color-gray-600, #7A7A7A);
	--fb-sombra: rgba(2, 6, 95, 0.08);

	/* Durações das colunas (preenchidas inline pela velocidade escolhida). */
	--fb-dur-1: 26s;
	--fb-dur-2: 32s;
	--fb-dur-3: 29s;

	--fb-gap: 1.5rem;
	--fb-maxh: clamp(520px, 70vh, 760px);

	position: relative;
	overflow: hidden;
	background-color: var(--fb-bg);
	padding: clamp(56px, 8vw, 100px) 20px;
	font-family: var(--cs-font-body, "Nunito Sans", sans-serif);
}

.cupula-feedbacks__shell {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---- Cabeçalho (padrão do site: eyebrow + título Anton) ------------------ */
.cupula-feedbacks__head {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.cupula-feedbacks__eyebrow {
	margin: 0 0 8px;
	color: var(--fb-eyebrow);
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.cupula-feedbacks__titulo {
	margin: 0 0 16px;
	color: var(--fb-titulo);
	font-family: "Anton", "Nunito Sans", Arial, sans-serif;
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.cupula-feedbacks__intro {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--fb-intro);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.7;
}

/* ---- Colunas com rolagem infinita --------------------------------------- */
.cupula-feedbacks__cols {
	display: flex;
	justify-content: center;
	gap: var(--fb-gap);
	margin-top: clamp(36px, 5vw, 56px);
	max-height: var(--fb-maxh);
	overflow: hidden;
	/* Fade no topo e na base. */
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.cupula-feedbacks__col {
	width: 100%;
	max-width: 21rem;
	flex: 0 0 auto;
}

/* Trilha que se move verticalmente. O conteúdo é duplicado (2x) no PHP, por
   isso translateY(-50%) gera um loop perfeito. O padding-bottom igual ao gap
   mantém o espaçamento constante na emenda. */
.cupula-feedbacks__track {
	display: flex;
	flex-direction: column;
	gap: var(--fb-gap);
	padding-bottom: var(--fb-gap);
	will-change: transform;
	animation: cupula-fb-scroll var(--fb-dur-1) linear infinite;
}
.cupula-feedbacks__col--2 .cupula-feedbacks__track { animation-duration: var(--fb-dur-2); }
.cupula-feedbacks__col--3 .cupula-feedbacks__track { animation-duration: var(--fb-dur-3); }

/* Pausa ao passar o mouse (facilita a leitura). */
.cupula-feedbacks__col:hover .cupula-feedbacks__track {
	animation-play-state: paused;
}

@keyframes cupula-fb-scroll {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

/* ---- Card de depoimento -------------------------------------------------- */
.cupula-feedbacks__card {
	background: var(--fb-card-bg);
	border: 1px solid var(--fb-card-border);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 10px 30px var(--fb-sombra);
}
.cupula-feedbacks__card-text {
	margin: 0;
	color: var(--fb-text);
	font-size: 15px;
	line-height: 1.6;
}
.cupula-feedbacks__card-user {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}
.cupula-feedbacks__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%!important;
	object-fit: cover;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Avatar de fallback (inicial) quando não há foto. */
.cupula-feedbacks__avatar--ph {
	background: linear-gradient(135deg, var(--cs-color-cyan, #00A0CC), var(--cs-color-teal, #56A69D));
	color: #fff;
	font-family: "Anton", sans-serif;
	font-size: 18px;
	line-height: 1;
	text-transform: uppercase;
}
.cupula-feedbacks__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cupula-feedbacks__nome {
	color: var(--fb-nome);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.cupula-feedbacks__cargo {
	color: var(--fb-cargo);
	font-size: 13px;
	line-height: 1.3;
}

/* ---- Reveal do cabeçalho ------------------------------------------------- */
.cupula-feedbacks .fb-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.cupula-feedbacks.is-visible .fb-reveal { opacity: 1; transform: none; }
.cupula-feedbacks.is-visible .fb-reveal:nth-child(2) { transition-delay: 0.08s; }
.cupula-feedbacks.is-visible .fb-reveal:nth-child(3) { transition-delay: 0.16s; }

/* ---- Responsivo ---------------------------------------------------------- */
/* Até 767px: apenas 1 coluna (igual à referência mobile). */
@media (max-width: 767px) {
	.cupula-feedbacks__col--2,
	.cupula-feedbacks__col--3 { display: none; }
}
/* 768–1023px: 2 colunas. */
@media (min-width: 768px) and (max-width: 1023px) {
	.cupula-feedbacks__col--3 { display: none; }
}

/* ---- Modo estático (animação desligada) ---------------------------------- */
.cupula-feedbacks--estatico .cupula-feedbacks__cols {
	max-height: none;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
	align-items: flex-start;
}
.cupula-feedbacks--estatico .cupula-feedbacks__track {
	animation: none;
	padding-bottom: 0;
}
/* Sem rolagem, as cópias de loop não devem aparecer. */
.cupula-feedbacks--estatico .cupula-feedbacks__card--dupe { display: none; }

/* ---- Acessibilidade: reduzir movimento ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cupula-feedbacks__cols {
		max-height: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
		align-items: flex-start;
	}
	.cupula-feedbacks__track {
		animation: none;
		padding-bottom: 0;
	}
	.cupula-feedbacks__card--dupe { display: none; }
	.cupula-feedbacks .fb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}