.mcic-si-wrap {
	position: relative;
	display: flex;
	overflow: clip;
}

.mcic-si-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 60px;

	/* Confina il testo nella zona che l'immagine lascia libera a fine
	 * scroll (--mcic-si-end), indipendentemente da quanto è lungo:
	 * altrimenti righe più lunghe del titolo finiscono sotto
	 * all'immagine e restano coperte anche a effetto completato. */
	max-width: calc( ( 100 - var( --mcic-si-end, 50 ) ) * 1% );
}

.mcic-si-dir-left .mcic-si-text {
	margin-left: auto;
}

.mcic-si-text .elementor-button-wrapper {
	width: fit-content;
	max-width: 100%;
}

.mcic-si-image {
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
	background-size: cover;
	background-position: center;
	pointer-events: none;

	/* Larghezza guidata da --mcic-si-progress (0 = a riposo, 1 = fine
	 * scroll), aggiornata da scroll-effect.js. --mcic-si-end (percentuale
	 * finale) arriva inline dal widget in base al controllo "Larghezza
	 * finale immagine". */
	--mcic-si-start: 100;
	width: calc( ( var( --mcic-si-start ) - ( var( --mcic-si-start ) - var( --mcic-si-end, 50 ) ) * var( --mcic-si-progress, 0 ) ) * 1% );
}

.mcic-si-dir-right .mcic-si-image {
	right: 0;
}

.mcic-si-dir-left .mcic-si-image {
	left: 0;
}

/* Tablet e mobile: niente effetto scroll, blocchi incolonnati con
 * l'immagine (statica, altezza esplicita) sopra al testo. */
@media ( max-width: 1024px ) {
	.mcic-si-wrap {
		flex-direction: column;
		min-height: 0;
		overflow: visible;
	}

	.mcic-si-text {
		z-index: auto;
		padding: 30px;
		max-width: 100%;
		margin-left: 0;
	}

	.mcic-si-image {
		position: static;
		width: 100%;
		height: 45vw;
		max-height: 400px;
		order: -1;
	}
}