/* Carosello su mobile (vc_row / vc_row_inner) — struttura Swiper creata via JS <=768px */

.g-cols.swiper {
	display: block;        /* neutralizza il flex/grid di Impreza in modalità carosello */
	overflow: hidden;
	position: relative;
	padding-bottom: 40px;  /* spazio per i dots */
}

.g-cols.swiper > .swiper-wrapper > .swiper-slide {
	height: auto;
}

/* Dots "smudge" nello stile del progetto */
.g-cols.swiper .swiper-pagination.cm-dots {
	position: absolute;
	bottom: 0;
	/* In modalità peek il contenitore va da bordo a bordo dello schermo:
	   --cm-bleed rientra i dots sulla griglia del sito */
	left: var(--cm-bleed, 0px);
	right: var(--cm-bleed, 0px);
	display: flex;
	justify-content: center; 
	gap: 8px;
	align-items: center;
}
.g-cols.swiper .cm-dots .swiper-pagination-bullet {
	width: 12px;
	height: 2px;
	border-radius: 10px;
	background: var(--color-testa-di-moro);
	opacity: 0.25;
	margin: 0 !important;
	transition: width 0.25s ease, opacity 0.25s ease;
}
.g-cols.swiper .cm-dots .swiper-pagination-bullet-active {
	width: 60px;
	height: 2px;
	opacity: 1;
}

/* Peek: la colonna che contiene il carosello non deve avere padding a destra,
   altrimenti il full bleed non arriva al bordo dello schermo. Il :has() è
   ristretto al percorso diretto, così non azzera il padding delle colonne
   antenate (un :has() con discendente generico le prenderebbe tutte). */
.vc_column-inner:has(> .wpb_wrapper > .carosello-mobile-peek),
.vc_column-inner:has(> .carosello-mobile-peek) {
	padding-right: 0 !important;
}


/* Modalità peek: valori di riferimento.
 *
 * --cm-margine-esterno è la linea a cui si allinea la prima e l'ultima slide.
 * NON coincide con il contenuto della sezione: sta leggermente più fuori, per
 * scelta di design. Corrisponde alla guida viola "griglia-esterna" in
 * fh55-debug-griglie.css, che a queste larghezze sta a 20px dal bordo.
 * Il JS la legge da qui: se manca, ripiega sul contenuto della sezione. */
.carosello-mobile-peek {
	--cm-margine-esterno: 20px;
}

/* Modalità peek: larghezza della slide.
 *
 * Con slidesPerView "auto" Swiper legge la larghezza dal CSS, quindi la slide si
 * dimensiona sulla griglia del sito invece che su una frazione del contenitore.
 * Il contenitore va da 0 a 100vw e gli offset di Swiper riportano prima e ultima
 * slide sul margine, quindi qui resta da togliere: il margine di griglia, lo
 * spazio tra le slide e la porzione che deve restare visibile della successiva.
 *
 * --cm-margine lo scrive il JS misurando la .l-section-h.
 * --cm-peek e --cm-gap sono sovrascrivibili per singola riga. */
.carosello-mobile-peek .swiper-slide {
	width: calc(100vw - var(--cm-margine, 0px) - var(--cm-gap, 20px) - var(--cm-peek, 90px));
}


/* Prima che il JS monti Swiper (con NitroPack parte in ritardo): le colonne sono
 * già in riga con la larghezza delle slide, così all'avvio l'altezza della sezione
 * non cambia. Senza queste regole restano impilate e la pagina si accorcia di colpo.
 * :not(.swiper) = solo finché il carosello non è montato.
 * Impreza mette padding e margini solo ai figli diretti di .g-cols: dentro lo Swiper
 * le colonne non lo sono più, quindi qui vanno azzerati per avere la stessa altezza.
 * La posizione orizzontale della modalità peek la calcola il JS (bleed): prima del
 * montaggio la prima card può stare qualche px più a destra o a sinistra. */
@media (max-width: 768px) {
	.carosello-mobile > .l-section-h > .g-cols:not(.swiper),
	.g-cols.carosello-mobile:not(.swiper) {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		padding-bottom: 40px; /* stesso spazio dei dots */
	}

	.carosello-mobile > .l-section-h > .g-cols:not(.swiper) > div,
	.g-cols.carosello-mobile:not(.swiper) > div {
		flex: 0 0 100%;
		margin-top: 0;
		margin-bottom: 0;
	}

	.carosello-mobile > .l-section-h > .g-cols:not(.swiper) > div > .vc_column-inner,
	.g-cols.carosello-mobile:not(.swiper) > div > .vc_column-inner {
		padding: 0;
	}

	.carosello-mobile-peek > .l-section-h > .g-cols:not(.swiper),
	.g-cols.carosello-mobile-peek:not(.swiper) {
		column-gap: var(--cm-gap, 20px);
	}

	/* --cm-margine non esiste ancora (lo scrive il JS): si usa il margine di riferimento */
	.carosello-mobile-peek > .l-section-h > .g-cols:not(.swiper) > div,
	.g-cols.carosello-mobile-peek:not(.swiper) > div {
		flex-basis: calc(100vw - var(--cm-margine-esterno, 20px) - var(--cm-gap, 20px) - var(--cm-peek, 90px));
	}
}