/* ==========================================================================
   CAROSELLO TESTIMONIANZE — [dazzero_testimonianze]
   Caricato solo dove lo shortcode è presente (vedi inc/enqueue.php).

   Scorrimento con scroll-snap nativo del browser, niente libreria esterna:
   il "per pagina" lo decide il CSS (3 colonne da desktop, 2 sotto i 900px,
   1 sotto i 560px — vedi sezione 5), il JS (assets/js/testimonianze.js) si
   limita a misurare quante card stanno davvero in una schermata per
   costruire i pallini e a far scorrere il viewport di una pagina alla
   volta cliccandone uno. Niente frecce: solo pallini e lo swipe nativo,
   gratis dallo scroll del browser.

   1. Contenitore e viewport
   2. Card
   3. Persona (avatar, nome, instagram)
   4. Pallini
   5. Responsive (3 → 2 → 1)
   ========================================================================== */

/* 1. Contenitore e viewport ================================================ */
.dz-testi-wrap {
	--dz-testi-gap: 1.75rem;
	--dz-testi-col: 3; /* colonne da desktop, personalizzabile con l'attributo col="" dello shortcode */

	max-width: var(--dz-container, 1280px);
	margin-inline: auto;
	position: relative;
}

.dz-testi__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dz-testi__viewport::-webkit-scrollbar {
	display: none;
}

.dz-testi__track {
	display: flex;
	gap: var(--dz-testi-gap);
}

/* La formula tiene conto del gap tra le card così le --dz-testi-col card
   riempiono esattamente la larghezza del viewport, senza sbordare di un
   pixel — è quello che permette a "scrollBy(viewport.clientWidth)" nel JS
   di atterrare esattamente sul prossimo punto di snap. */
.dz-testi__slide {
	flex: 0 0 calc((100% - (var(--dz-testi-col) - 1) * var(--dz-testi-gap)) / var(--dz-testi-col));
	min-width: 0;
	scroll-snap-align: start;
}

/* 2. Card ================================================================== */
.dz-testi__card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.75rem 1.75rem;
	border: 1px solid var(--dz-bordo, #e4e4e4);
	background: var(--dz-bianco, #fff);
}

.dz-testi__quote {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--dz-bordo, #e4e4e4);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3.25rem;
	line-height: 1;
}

.dz-testi__content {
	flex: 1 1 auto;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	color: var(--dz-nero, #1a1a1a);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.dz-testi__content p {
	margin: 0 0 0.875rem;
}

.dz-testi__content p:last-child {
	margin-bottom: 0;
}

/* 3. Persona ================================================================ */
.dz-testi__person {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dz-bordo, #e4e4e4);
}

.dz-testi__avatar {
	flex: 0 0 auto;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dz-grigio, #f4f4f4);
}

.dz-testi__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dz-testi__person-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dz-testi__name {
	font-family: var(--dz-font-titoli, inherit);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--dz-nero, #1a1a1a);
}

.dz-testi__ig {
	color: var(--dz-grigio-testo, #6b6b6b);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.8125rem;
	text-decoration: none;
	transition: color var(--dz-transizione, 240ms ease);
}

.dz-testi__ig:hover,
.dz-testi__ig:focus-visible {
	color: var(--dz-link, var(--dz-accento, #141414));
}

/* 4. Pallini ================================================================ */
.dz-testi__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
}

.dz-testi__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dz-testi__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: var(--dz-bordo, #e4e4e4);
	cursor: pointer;
	transition: background-color var(--dz-transizione, 240ms ease), transform var(--dz-transizione, 240ms ease);
}

.dz-testi__dot:hover {
	background: var(--dz-grigio-testo, #6b6b6b);
}

.dz-testi__dot.is-active {
	background: var(--dz-nero, #1a1a1a);
	transform: scale(1.25);
}

/* Un'unica card: niente frecce/pallini da mostrare, non c'è dove scorrere. */
.dz-testi-wrap.is-single .dz-testi__nav {
	display: none;
}

/* 5. Responsive ============================================================= */
/* Sotto i breakpoint il numero di colonne è fisso (2, poi 1): la richiesta
   era esplicitamente "3 | 2 | 1 mobile", non una scala proporzionale al
   col="" del desktop. Si sovrascrive flex-basis direttamente (non la
   custom property --dz-testi-col, impostata inline dallo shortcode: uno
   stile inline vince sempre su una regola esterna, media query comprese —
   stesso motivo per cui .dz-corsi-wrap in corsi.css usa un selettore su
   data-col invece di provare a toccare --dz-col). */
@media (max-width: 900px) {
	.dz-testi-wrap {
		--dz-testi-gap: 1.25rem;
	}

	.dz-testi-wrap .dz-testi__slide {
		flex-basis: calc((100% - var(--dz-testi-gap)) / 2);
	}
}

@media (max-width: 560px) {
	.dz-testi-wrap .dz-testi__slide {
		flex-basis: 100%;
	}

	.dz-testi__card {
		padding: 1.75rem 1.5rem 1.5rem;
	}

	.dz-testi__nav {
		margin-top: 1.5rem;
	}
}