/* ---------------------------------------------------------------------------
 * Slider realizzazioni in evidenza.
 * Le card ereditano gli stili da ak-realizzazioni.css (.ak-rlz-card).
 * ------------------------------------------------------------------------- */

.ak-slider {
	--ak-sl-cols: 3;      /* colonne su desktop (sovrascrivibile per istanza) */
	--ak-sl-gap: 24px;
	position: relative;
}

/* Viewport scrollabile: scrollbar nascosta, snap orizzontale. */
.ak-slider__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ak-slider__viewport::-webkit-scrollbar {
	display: none;
}

.ak-slider__track {
	display: flex;
	gap: var(--ak-sl-gap);
}

/* Ogni slide occupa 1/colonne della larghezza, tolti i gap. */
.ak-slider__slide {
	flex: 0 0 calc((100% - (var(--ak-sl-cols) - 1) * var(--ak-sl-gap)) / var(--ak-sl-cols));
	scroll-snap-align: start;
}

/* --- Frecce ------------------------------------------------------------- */
/* !important per annullare lo stile "bottone" del tema VamTam. */

.ak-slider .ak-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #000 !important;
	font-size: 24px !important;
	line-height: 1 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	cursor: pointer;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: opacity 0.2s ease;
}

.ak-slider .ak-slider__prev {
	left: 8px;
}

.ak-slider .ak-slider__next {
	right: 8px;
}

.ak-slider .ak-slider__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
	box-shadow: none !important;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
	.ak-slider {
		--ak-sl-cols: 2;
	}
}

@media (max-width: 600px) {
	.ak-slider {
		--ak-sl-cols: 1;
		--ak-sl-gap: 16px;
	}

	/* Su mobile le frecce restano ai bordi ma piu' piccole. */
	.ak-slider .ak-slider__arrow {
		width: 40px !important;
		height: 40px !important;
		font-size: 20px !important;
	}
}