/* ==========================================================================
   TEXT-IMAGE BLOCK - FRONTEND
   Layout: immagine + testo con varianti left/right
   ========================================================================== */

.s4w-text-image {
	padding: 96px 0;
}

.s4w-text-image__wrapper {
	display: flex;
	justify-content: space-between;
}

/* Immagine */
.s4w-text-image__media {
	flex: 0 0 calc(50% - 20px);
	max-width: calc(50% - 20px);
}

.s4w-text-image__image {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Contenuto */
.s4w-text-image__content {
	flex: 0 0 calc(50% - 40px);
	max-width: calc(50% - 40px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}



.s4w-text-image__label *{
	margin-bottom: 16px;
	text-transform: uppercase !important;
}


.s4w-text-image__text {
	margin-bottom: 32px;
}

/* ==========================================================================
   VARIANTE LEFT - Immagine a sinistra (default)
   ========================================================================== */
.s4w-text-image--left .s4w-text-image__media {
	order: 1;
}

.s4w-text-image--left .s4w-text-image__content {
	order: 2;
}

/* ==========================================================================
   VARIANTE RIGHT - Immagine a destra
   ========================================================================== */
.s4w-text-image--right .s4w-text-image__media {
	order: 2;
}

.s4w-text-image--right .s4w-text-image__content {
	order: 1;
}

/* ==========================================================================
   RESPONSIVE - TABLET (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.s4w-text-image {
		padding: 60px 0;
	}

	.s4w-text-image__media,
	.s4w-text-image__content {
		flex: 0 0 calc(50% - 20px);
		max-width: calc(50% - 20px);
	}
}

/* ==========================================================================
   RESPONSIVE - MOBILE (<=768px)
   ========================================================================== */
@media (max-width: 768px) {
	.s4w-text-image {
		padding: 64px 0;
	}

	.s4w-text-image__wrapper {
		flex-direction: column;
		gap: 32px;
	}

	.s4w-text-image__media,
	.s4w-text-image__content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Su mobile: sempre testo prima dell'immagine, indipendentemente dalla variante */
	.s4w-text-image__content {
		order: 1 !important;
		justify-content: flex-start;
	}

	.s4w-text-image__media {
		order: 2 !important;
	}

	.s4w-text-image__top {
		margin-bottom: 24px;
	}

	.s4w-text-image__label {
		margin-bottom: 12px;
	}

	.s4w-text-image__text {
		margin-bottom: 24px;
	}
}