/* ==========================================================================
   3 COLONNE BLOCK - FRONTEND
   Layout: 1/3 + 1/3 + 1/3
   ========================================================================== */

/* Import element styles */
@import url("elements/page-reference-small.css");
@import url("elements/cta-simple.css");
@import url("elements/cta-image.css");
@import url("elements/product-placeholder.css");

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

/* Header con titolo sezione */
.s4w-threecol__header {
	margin-bottom: 48px;
}

/* Wrapper colonne */
.s4w-threecol__wrapper {
	display: flex;
	justify-content: space-between;
	gap: 0px;
}

/* Colonne: 1/3 ciascuna */
.s4w-threecol__col {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

/* Inner wrapper con bordo e padding */
.s4w-threecol .s4w-col__inner {
	border: var(--col-border-width, 1px) solid var(--col-border-color, #E2E4E9);
	padding: var(--col-inner-padding, 20px);
	height: 100%;
	box-sizing: border-box;
}

/* Override titolo per ThreeCol: usa card-title-main */
.s4w-threecol .s4w-page-reference-small__title {
	font-family: var(--font-secondary);
	font-size: var(--card-title-main);
	font-weight: var(--weight-regular);
	line-height: var(--card-title-main-lh);
	letter-spacing: var(--card-title-main-ls);
}



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

	.s4w-threecol__header {
		margin-bottom: 32px;
	}

	/* ---- Slider tablet + mobile ---- */
	.s4w-threecol__slider-viewport {
		overflow: hidden;
	}

	.s4w-threecol .s4w-threecol__wrapper--slider {
		display: flex;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		transition: transform 0.35s ease;
		will-change: transform;
		align-items: flex-start;
	}

	/* Tablet: 2 slide per view → ogni col 50% */
	.s4w-threecol .s4w-threecol__wrapper--slider > .s4w-threecol__col {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		min-width: 0;
	}

	/* Controlli */
	.s4w-threecol__slider-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24px;
	}

	.s4w-threecol__slider-dots {
		display: flex;
		gap: 5px;
		align-items: center;
	}

	.s4w-threecol__slider-dot {
		display: block;
		width: 56px;
		height: 1.5px;
		background-color: var(--stroke-soft-200, #e2e4e9);
		transition: background-color 0.25s ease;
	}

	.s4w-threecol__slider-dot.is-active {
		background-color: var(--text-main-900, #0a0d14);
	}

	.s4w-threecol__slider-arrows {
		display: flex;
		gap: 8px;
	}

	.s4w-threecol__slider-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		color: var(--text-main-900, #0a0d14);
	}

	.s4w-threecol__slider-arrow:disabled {
		opacity: 0.3;
		cursor: default;
	}
}

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

	/* Mobile: layout statico → colonne impilate */
	.s4w-threecol .s4w-threecol__wrapper:not(.s4w-threecol__wrapper--slider) {
		flex-wrap: wrap;
	}

	.s4w-threecol .s4w-threecol__wrapper:not(.s4w-threecol__wrapper--slider) > .s4w-threecol__col {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Mobile: 1 slide per view → ogni col 100% */
	.s4w-threecol .s4w-threecol__wrapper--slider > .s4w-threecol__col {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Controlli slider: nascosti sempre tranne tablet/mobile */
.s4w-threecol__slider-controls {
	display: none !important;
}

@media (max-width: 1024px) {
	.s4w-threecol__slider-controls {
		display: flex !important;
	}
}