/* Carousel plugin - front-end
 * Riusa le classi visive di Nimble (.text-img, .sek-carousel-img) dove possibile,
 * ma porta con se' tutto lo stile necessario per funzionare anche da solo.
 */

.carousel-plugin {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.carousel-viewport {
	width: 100%;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	will-change: transform;
}

.carousel-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: clamp(180px, 30vw, 460px);
	overflow: hidden;
	background: #111;
}

.carousel-slide .carousel-link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}

.carousel-img,
.carousel-slide .sek-carousel-img {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.carousel-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Testo sovrapposto centrato */
.carousel-text-wrapper {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	pointer-events: none;
}

.carousel-plugin .text-img {
	color: #fff;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	font-size: clamp(20px, 3vw, 40px);
	/* Contorno nero identico al modulo Nimble originale */
	text-shadow:
		rgb(0, 0, 0) 4px 0px 0px, rgb(0, 0, 0) 3.88377px 0.957263px 0px, rgb(0, 0, 0) 3.54182px 1.85889px 0px,
		rgb(0, 0, 0) 2.99404px 2.65249px 0px, rgb(0, 0, 0) 2.27226px 3.29194px 0px, rgb(0, 0, 0) 1.41842px 3.74006px 0px,
		rgb(0, 0, 0) 0.482147px 3.97084px 0px, rgb(0, 0, 0) -0.482147px 3.97084px 0px, rgb(0, 0, 0) -1.41842px 3.74006px 0px,
		rgb(0, 0, 0) -2.27226px 3.29194px 0px, rgb(0, 0, 0) -2.99404px 2.65249px 0px, rgb(0, 0, 0) -3.54182px 1.85889px 0px,
		rgb(0, 0, 0) -3.88377px 0.957263px 0px, rgb(0, 0, 0) -4px -1.2865e-15px 0px, rgb(0, 0, 0) -3.88377px -0.957263px 0px,
		rgb(0, 0, 0) -3.54182px -1.85889px 0px, rgb(0, 0, 0) -2.99404px -2.65249px 0px, rgb(0, 0, 0) -2.27226px -3.29194px 0px,
		rgb(0, 0, 0) -1.41842px -3.74006px 0px, rgb(0, 0, 0) -0.482147px -3.97084px 0px, rgb(0, 0, 0) 0.482147px -3.97084px 0px,
		rgb(0, 0, 0) 1.41842px -3.74006px 0px, rgb(0, 0, 0) 2.27226px -3.29194px 0px, rgb(0, 0, 0) 2.99404px -2.65249px 0px,
		rgb(0, 0, 0) 3.54182px -1.85889px 0px, rgb(0, 0, 0) 3.88377px -0.957263px 0px;
}

/* Frecce */
.carousel-nav .carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease;
}

.carousel-nav .carousel-arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.carousel-prev {
	left: 12px;
}

.carousel-next {
	right: 12px;
}

.carousel-arrow .carousel-chevron {
	display: block;
	width: 12px;
	height: 12px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
}

.carousel-prev .carousel-chevron {
	transform: rotate(135deg);
	margin-left: 4px;
}

.carousel-next .carousel-chevron {
	transform: rotate(-45deg);
	margin-right: 4px;
}

@media (max-width: 782px) {
	.carousel-nav {
		display: none;
	}
}

.carousel-plugin.is-grabbing .carousel-track {
	cursor: grabbing;
}