/**
 * Stili per il pattern "Carosello con descrizione"
 * (patterns/carosello-con-descrizione.php).
 *
 * Fascia a piena larghezza con sfondo colore scelto dall'editor, galleria
 * con crossfade automatico (gestito da assets/js/carosello-con-descrizione.js)
 * o foto singola statica, colonna testo con titolo/paragrafo/indirizzo.
 */

/* Fascia full-width: stesso margine laterale/centratura di
   .contatti__band / .contatti__band-inner (assets/css/contatti.css). */
.carosello-con-descrizione__band {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.carosello-con-descrizione__band-inner {
	max-width: 1200px; /* --container-max */
	margin-left: auto;
	margin-right: auto;
}

.carosello-con-descrizione__row {
	align-items: stretch;
}

/* Galleria/carosello. */
.carosello-con-descrizione__gallery {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px; /* --radius-md */
}

.carosello-con-descrizione__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 600ms ease-out;
}

.carosello-con-descrizione__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prima slide visibile di default: copre sia il caso "foto singola"
   (nessun JS necessario) sia il caricamento iniziale del carosello, prima
   che il JS assegni .is-active. */
.carosello-con-descrizione__slide:first-child {
	opacity: 1;
}

.carosello-con-descrizione__slide.is-active {
	opacity: 1;
}

/* Colonna testo. */
.carosello-con-descrizione__col--text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.carosello-con-descrizione__title {
	margin: 0;
}

.carosello-con-descrizione__address {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.carosello-con-descrizione__address-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.carosello-con-descrizione__row {
		flex-direction: column;
	}

	.carosello-con-descrizione__col--text {
		order: 1;
	}

	.carosello-con-descrizione__col--gallery {
		order: 2;
	}
}