/*
 * Stili per lo slider recensioni (shortcode [recensioni_slider]).
 *
 * Struttura a tre livelli, e perché serve:
 *   .ddr-slider            contenitore esterno: ha il padding (spazio per
 *                           le frecce) e NON ritaglia nulla lui stesso.
 *   .ddr-slider-viewport    la "finestra": larga esattamente quanto UNA
 *                           recensione, ritaglia (overflow:hidden) tutto
 *                           quello che sta fuori. Le frecce stanno fuori da
 *                           questa finestra (sono figlie di .ddr-slider),
 *                           quindi il testo delle recensioni vicine non può
 *                           mai comparire sopra di loro.
 *   .ddr-slider-track       la fila con tutte le recensioni affiancate, che
 *                           scorre orizzontalmente dentro la finestra con
 *                           transform: translateX() (da destra verso
 *                           sinistra quando si avanza).
 *
 * (Prima la finestra di ritaglio era .ddr-slider stesso, largo quanto
 * recensione+frecce: la recensione vicina restava visibile nello spazio
 * delle frecce. Poi, per un altro bug, il ritaglio era finito sulla fila
 * stessa, larga quanto una sola recensione: risultato, il ritaglio si
 * spostava insieme alla fila invece di restare fermo, e si vedeva solo la
 * prima recensione. Serve un livello in più, fermo, largo quanto una
 * recensione: è .ddr-slider-viewport.)
 *
 * Altezza: il contenitore (.ddr-slider-track) riceve dal JS un'altezza
 * in pixel pari a quella della recensione attiva, con una propria
 * transizione morbida: niente più altezze fisse calcolate sulla slide
 * più alta del gruppo, come accadeva con il vecchio Gallery slider di
 * Flatsome basato su screenshot.
 */

.ddr-slider {
	position: relative;
	max-width: 700px;
	margin: 0 auto;
	padding: 2rem 3rem;
	box-sizing: border-box;
}

.ddr-slider-viewport {
	overflow: hidden; /* la vera "finestra": ritaglia tutto ciò che non è la recensione attiva */
}

.ddr-slider-track {
	display: flex;
	align-items: flex-start;
	/* durata ed easing morbidi ("plastici") sia per lo scorrimento orizzontale che per il cambio altezza */
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), height 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.ddr-slide {
	flex: 0 0 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 0.5rem;
	text-align: center;
}

.ddr-slide-stelle {
	color: #f5a623;
	font-size: 1.25rem;
	letter-spacing: 0.15rem;
	margin-bottom: 0.75rem;
}

.ddr-slide-testo {
	font-size: 1.05rem; /* valore di fallback, corrisponde alla dimensione "Medio" */
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* Dimensione del testo, impostabile da Recensioni → Impostazioni slider. */
.ddr-slider.ddr-testo-piccolo .ddr-slide-testo {
	font-size: 0.9rem;
}

.ddr-slider.ddr-testo-medio .ddr-slide-testo {
	font-size: 1.05rem;
}

.ddr-slider.ddr-testo-grande .ddr-slide-testo {
	font-size: 1.25rem;
}

.ddr-slide-autore {
	font-size: 0.95rem;
	color: #555;
}

.ddr-slide-fonte {
	color: #888;
}

.ddr-slider-controlli {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.ddr-freccia {
	pointer-events: auto;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #333;
	padding: 0.5rem;
	line-height: 1;
}

.ddr-freccia:hover {
	color: #000;
}

/* Rispetta chi ha impostato "riduci le animazioni" nel proprio sistema operativo/browser. */
@media (prefers-reduced-motion: reduce) {
	.ddr-slider-track {
		transition: none;
	}
}