/* ==========================================================================
   CTA BLOCK - FRONTEND
   Layout: contenuto (37%) + immagine (63%)
   ========================================================================== */

.s4w-cta {
	padding: 96px 0;
}

.s4w-cta__wrapper {
	width:100%;
	display: flex;
	flex-flow: row nowrap;
}

/* Contenuto (37%) */
.s4w-cta__content {
	flex: 0 0 37%;
	max-width: 37%;
	display: flex;
	flex-direction: column;
}

.s4w-cta__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 60px 48px;
}

.s4w-cta__inner_bottom {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 20px);
}

.s4w-cta__title {
	margin-bottom: 0;
}

.wp-block-s4w-cta .s4w-cta__title .s4w-title.title-xlarge {
	text-transform: uppercase !important;
}

.s4w-cta__text {
	margin-bottom: 24px;
}

.s4w-cta__simple-text {
	margin: 0;
}

.s4w-cta__button {
	margin-top: auto;
}

/* Immagine (63%) */
.s4w-cta__media {
	flex: 0 0 63%;
	max-width: 63%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 852/639;
}

.s4w-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center	;

}

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

	.s4w-cta__wrapper {
		min-height: 400px;
	}

	.s4w-cta__content {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.s4w-cta__inner {
		padding: 40px 32px;
	}

	.s4w-cta__media {
		flex: 0 0 60%;
		max-width: 60%;
	}
}

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

	.s4w-cta__wrapper {
		flex-direction: column;
		min-height: auto;
	}

	.s4w-cta__content {
		flex: 0 0 100%;
		max-width: 100%;
		order: 1;
	}

	.s4w-cta__inner {
		padding: 64px 24px 32px;
	}

	.s4w-cta__media {
		flex: 0 0 100%;
		max-width: 100%;
		order: 2;
		aspect-ratio: 1 / 1;
		position: relative;
	}

	.s4w-cta__image {
		position: absolute;
	}

	.s4w-cta__title {
		margin-bottom: 24px;
	}

	.s4w-cta__text {
		margin-bottom: 24px;
	}
}