/* Ciampa Slider — stile base */

.cs-slider {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Il padding non deve sommarsi alla larghezza (eviterebbe l'overflow della banda). */
.cs-slider *,
.cs-slider *::before,
.cs-slider *::after {
	box-sizing: border-box;
}

.cs-slider .cs-swiper {
	width: 100%;
	height: 100%;
}

/* Slide immagine: rapporto FISSO 16:9 (immagini preparate a 16:9 → nessun taglio) */
.cs-slider--image .cs-swiper {
	aspect-ratio: 16 / 9;
}

.cs-slider--image .swiper-wrapper,
.cs-slider--image .swiper-slide {
	height: 100%;
}

.cs-slider--image .cs-slide {
	position: relative;
	overflow: hidden;
}

.cs-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.cs-slide__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* Didascalia su slide immagine */
.cs-slider--image .cs-slide__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5em 2em;
	background: linear-gradient(transparent, rgba(0, 0, 0, .55));
	color: #fff;
}

.cs-slide__subtitle {
	margin: 0;
	font-size: 1.1em;
}

/* Slide solo testo (gruppo "frasi") — banda grigio scuro come l'originale */
.cs-slider--text {
	text-align: center;
	background-color: #4a4a4a;
	padding: 1.1em 1em;
}

/* Il wrapper Swiper è alto quanto la frase più lunga (2 righe); le slide più
   corte (1 riga) vanno centrate verticalmente invece di restare in alto. */
.cs-slider--text .swiper-wrapper {
	align-items: center;
}

.cs-slider--text .cs-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	padding: 0.3em 1em;
}

.cs-slide__text {
	margin: 0;
	font-style: italic;
	font-size: 1.25em;
	line-height: 1.4;
	color: #fff;
}

/*
 * Il tema applica uno sfondo "title background" (inline, es. #ff4333) sull'header.
 * Sulle pagine con slider quell'area è coperta dallo slider immagine e dal ticker
 * frasi, quindi lo neutralizziamo per evitare che affiori il colore dietro al testo.
 */
.header-middle.type-slider {
	background-color: transparent !important;
}

/* Frecce e pagination: ereditano lo stile Swiper, ritoccato sul tema */
.cs-slider--image .swiper-button-prev,
.cs-slider--image .swiper-button-next {
	color: #fff;
}

.cs-slider--image .swiper-pagination-bullet-active {
	background: #fff;
}