/**
 * Smart Show More per Elementor - CSS strutturale.
 *
 * Filosofia: qui c'è SOLO la meccanica (collasso, sfumatura, layout del
 * toggle). Nessun colore o raggio è imposto al pulsante: la classe
 * .elementor-button eredita lo stile globale dei pulsanti del sito.
 *
 * Tutte le personalizzazioni per-istanza arrivano da variabili CSS
 * (--ssm-*) impostate dai controlli di Elementor tramite {{WRAPPER}},
 * quindi più istanze nella stessa pagina restano totalmente indipendenti.
 */

/* ---------------------------------------------------------------------
 * Contenuto comprimibile
 * ------------------------------------------------------------------ */

.ssm-spoiler__content {
	position: relative;
	overflow: hidden;
	/* --ssm-effective-max è pilotata dal controllo "Visibilità per
	   dispositivo"; in fallback usa l'altezza anteprima. */
	max-height: var(--ssm-effective-max, var(--ssm-collapsed-height, 120px));
	transition: max-height var(--ssm-speed, 400ms) var(--ssm-easing, ease-in-out);
}

.ssm-spoiler.ssm-expanded .ssm-spoiler__content {
	max-height: none;
}

/* Sfumatura di dissolvenza sul bordo inferiore (solo stato compresso). */
.ssm-spoiler__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--ssm-fade-height, 60px);
	background: linear-gradient(to bottom, transparent, var(--ssm-fade-color, #ffffff));
	opacity: 1;
	/* La dissolvenza del testo nascosto: l'overlay sfuma in sincrono con
	   l'espansione (o con durata propria se impostata nel pannello). */
	transition: opacity var(--ssm-fade-speed, var(--ssm-speed, 400ms)) var(--ssm-easing, ease-in-out);
	pointer-events: none;
	display: var(--ssm-fade-display, block);
}

.ssm-spoiler--no-fade .ssm-spoiler__content::after {
	display: none;
}

.ssm-spoiler.ssm-expanded .ssm-spoiler__content::after {
	opacity: 0;
}

/* ---------------------------------------------------------------------
 * Pulsante toggle
 * ------------------------------------------------------------------ */

.ssm-spoiler__toggle-wrap {
	margin-top: var(--ssm-btn-gap, 16px);
	display: var(--ssm-toggle-display, block);
}

/* Il pulsante non serve se il testo è più corto dell'anteprima,
   oppure dopo l'espansione quando "Mostra meno" è disattivato. */
.ssm-spoiler.ssm-no-toggle .ssm-spoiler__toggle-wrap,
.ssm-spoiler.ssm-hide-toggle .ssm-spoiler__toggle-wrap {
	display: none;
}

/* Reset minimo del tag <button> (accessibilità) con specificità bassa:
   qualunque regola del Kit di Elementor (.elementor-kit-* .elementor-button)
   la sovrascrive senza problemi. Nessun colore/raggio imposto. */
.ssm-spoiler__toggle {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	width: var(--ssm-btn-width, auto);
	-webkit-appearance: none;
	appearance: none;
}

.ssm-spoiler__toggle .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-direction: row;
}

.ssm-spoiler__toggle .ssm-spoiler__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: transform var(--ssm-speed, 400ms) var(--ssm-easing, ease-in-out);
}

/* Rotazione dell'icona (es. chevron) quando il testo è espanso. */
.ssm-spoiler.ssm-icon-rotate.ssm-expanded .ssm-spoiler__icon {
	transform: rotate(180deg);
}

.ssm-spoiler__toggle .ssm-spoiler__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------------------------------------------------------------
 * Accessibilità: rispetta prefers-reduced-motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ssm-spoiler {
		--ssm-speed: 0ms;
		--ssm-fade-speed: 0ms;
	}
}