/**
 * Strisce: galleria a fette con accordion orizzontale.
 * A riposo: fette strette con la sola immagine principale.
 * In hover: la fetta si allarga; dal basso appare un pannello bianco con i dati.
 * Palette: navy #0B0D29, oro #D6B258.
 */

.msr-strisce {
	display: flex;
	gap: 12px;
	width: 100%;
	height: 460px; /* default; il widget Elementor lo sovrascrive */
	overflow: visible;
	align-items: center; /* le fette di altezza diversa restano centrate sull'asse */
}

.msr-strisce__vuoto {
	padding: 24px;
	text-align: center;
	color: #6b6b73;
}

/* ------------------------------------------------------------------ */
/* Fetta                                                               */
/* ------------------------------------------------------------------ */

.msr-striscia {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--msr-navy, #0B0D29);
	box-shadow: 0 6px 18px rgba(11,13,41,.10);
	--msr-panel-h: 208px;        /* altezza del pannello quando la fetta è aperta */
	/* La transizione su flex-grow crea l'effetto accordion. */
	transition: flex-grow .45s cubic-bezier(.22,.61,.36,1), height .4s ease, opacity .35s ease, filter .35s ease, box-shadow .35s ease;
}

/* Livello immagine: riempie la fetta a riposo; in hover si raccoglie sopra il
   pannello restando centrato verticalmente, così si vede la fascia centrale
   della foto e non quella alta. */
.msr-striscia__img {
	position: absolute;
	inset: 0;
	background-color: var(--msr-navy, #0B0D29);
	background-size: cover;
	background-position: center center;
	transition: bottom .45s cubic-bezier(.22,.61,.36,1);
}

/* Immagine vera: usata solo nella griglia mobile (vedi media query).
   Su desktop e home resta l'immagine di sfondo. */
.msr-striscia__foto {
	display: none;
}

/* Blocco globale dello spostamento dell'immagine al trascinamento del dito:
   il gesto scorre la pagina e non "afferra" mai la foto. */
.msr-striscia,
.msr-striscia__img,
.msr-striscia__foto {
	-webkit-user-drag: none !important;
	-khtml-user-drag: none !important;
	-moz-user-drag: none !important;
	user-drag: none !important;
	-webkit-user-select: none !important;
	user-select: none !important;
	-webkit-touch-callout: none !important;
	touch-action: pan-y !important;
}

.msr-striscia__foto {
	pointer-events: none !important;
}

/* Altezze sfalsate: ogni fetta è un po' più bassa dell'area, con uno scostamento
   che si ripete a ciclo di sei. Così le fette risultano naturali e non allineate,
   come nel riferimento. In hover la fetta attiva torna piena altezza. */
.msr-striscia { height: 82%; }
.msr-striscia:nth-child(6n + 1) { height: 92%; }
.msr-striscia:nth-child(6n + 2) { height: 78%; }
.msr-striscia:nth-child(6n + 3) { height: 100%; }
.msr-striscia:nth-child(6n + 4) { height: 74%; }
.msr-striscia:nth-child(6n + 5) { height: 88%; }
.msr-striscia:nth-child(6n + 6) { height: 84%; }

/* Stato espanso: hover col mouse o focus da tastiera. */
.msr-strisce:hover .msr-striscia:hover,
.msr-striscia.is-active {
	flex-grow: 6;
	height: 100%;
	box-shadow: 0 16px 40px rgba(11,13,41,.22);
}

/* In hover l'immagine occupa solo lo spazio sopra il pannello: il bordo basso
   sale dell'altezza del pannello, e con background-position center la porzione
   visibile mostra il centro verticale della foto. */
.msr-strisce:hover .msr-striscia:hover .msr-striscia__img,
.msr-striscia.is-active .msr-striscia__img {
	bottom: var(--msr-panel-h);
}

/* Le altre fette, mentre una è aperta, si attenuano. Solo su dispositivi con
   mouse vero: su touch il "tocco" verrebbe letto come hover e le card
   resterebbero attenuate anche quando non serve. */
@media (hover: hover) {
	.msr-strisce:hover .msr-striscia:not(:hover) {
		opacity: .55;
		filter: saturate(.7);
	}
}

/* ------------------------------------------------------------------ */
/* Pannello bianco (compare solo da espansa)                           */
/* ------------------------------------------------------------------ */

.msr-striscia__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--msr-panel-h);
	box-sizing: border-box;
	background: #ffffff;
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
	/* Nascosto sotto il bordo inferiore; sale in vista quando la fetta si apre. */
	transform: translateY(102%);
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}

.msr-strisce:hover .msr-striscia:hover .msr-striscia__panel,
.msr-striscia.is-active .msr-striscia__panel {
	transform: translateY(0);
}

.msr-striscia__nome {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	color: var(--msr-navy, #0B0D29);
	white-space: nowrap;
}

.msr-striscia__luogo {
	margin: 0;
	font-size: 15px;
	color: #6b6b73;
	white-space: nowrap;
}

.msr-striscia__testo {
	margin: 2px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #44444c;
	/* Solo un estratto: massimo due righe. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.msr-striscia__cta {
	margin-top: 4px;
	font-weight: 700;
	font-size: 15px;
	color: var(--msr-oro, #b8912f);
}

/* Versione home (popup="no"): fette solo visive, non cliccabili. */
.msr-strisce--statica .msr-striscia {
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Mobile: niente hover -> griglia di card sempre aperte               */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Su mobile nessuna fetta va attenuata: tutte a colori pieni. */
	.msr-striscia {
		opacity: 1 !important;
		filter: none !important;
	}

	/* Default: le fette diventano una griglia di card (esclusa la variante home). */
	.msr-strisce:not(.msr-strisce--mobile-strisce) {
		height: auto !important;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;
		overflow: visible;
	}

	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia {
		flex: none;
		height: auto !important; /* annulla le altezze sfalsate del desktop */
		aspect-ratio: auto;      /* la card si adatta al contenuto */
		display: flex;
		flex-direction: column;
	}

	/* Foto quadrata, centrata, in cima alla card.
	   Nella griglia mobile usiamo un'IMMAGINE VERA (non lo sfondo): i browser
	   mobile la ridisegnano in modo affidabile durante lo scroll, così non
	   compare più il fondo dietro. */
	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia {
		background-color: transparent;
	}

	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__img {
		position: relative;
		inset: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		aspect-ratio: auto;
		background: none !important;
	}

	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__foto {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		/* La foto non cattura il tocco: il dito scorre la pagina e non può
		   "afferrare" e trascinare l'immagine (era quello a scoprire il fondo). */
		pointer-events: none;
		-webkit-user-drag: none;
		user-select: none;
		-webkit-touch-callout: none;
	}

	/* Anche il livello immagine non deve reagire al trascinamento. */
	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__img {
		pointer-events: none;
		touch-action: pan-y;
	}

	/* Il pannello scorre sotto la foto, in flusso normale. */
	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__panel {
		position: relative;
		inset: auto;
		transform: none;
		height: auto;
	}

	/* In griglia, anche se una card diventasse "attiva", l'immagine non deve
	   spostarsi (era ciò che scopriva il fondo navy durante lo scroll). */
	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia.is-active .msr-striscia__img {
		bottom: auto !important;
		top: auto !important;
	}

	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__nome { white-space: normal; }
	.msr-strisce:not(.msr-strisce--mobile-strisce) .msr-striscia__luogo { white-space: normal; }

	/* Variante home (mobile="strisce"): mantiene le fette affiancate, solo più strette.
	   Restano gli stili desktop (altezze sfalsate incluse); riduciamo solo il gap. */
	.msr-strisce--mobile-strisce {
		gap: 6px;
		height: 380px !important;   /* un goccio più bassa su mobile */
	}

	/* Pannello un po' più basso, così ci sta bene nell'altezza ridotta. */
	.msr-strisce--mobile-strisce .msr-striscia {
		--msr-panel-h: 184px;
	}

	/* La fetta aperta si allarga di più, così la finestra non viene tagliata. */
	.msr-strisce--mobile-strisce .msr-striscia.is-active {
		flex-grow: 14;
	}

	/* Su schermo stretto il nome può andare a capo invece di essere tagliato. */
	.msr-strisce--mobile-strisce .msr-striscia__nome {
		white-space: normal;
		font-size: 20px;
	}
	.msr-strisce--mobile-strisce .msr-striscia__luogo {
		white-space: normal;
	}
}