/* =========================================================================
   Striscia dei banner: la usano le vetrine dei sindacati e le "Offerte in
   evidenza" della homepage. Il cerchietto con la freccia serve anche ai
   banner premium della homepage.
   ========================================================================= */

.cral-vetrina-banner-contenitore,
.cral-vetrina-banner-contenitore *,
.cral-vetrina-banner-contenitore *::before,
.cral-vetrina-banner-contenitore *::after,
.cral-vetrina-banner-apri {
	box-sizing: border-box;
}

/*
 * Striscia dei banner: 3 alla volta da computer, 2 su tablet, 1 su
 * telefono (con un pezzetto del successivo che spunta, per invitare a
 * scorrere). Lo scorrimento è quello nativo del browser.
 */
.cral-vetrina-banner-contenitore {
	position: relative;
}

.cral-vetrina-banner-pista {
	--cral-banner-per-vista: 3;
	--cral-banner-spazio: 20px;
	display: flex;
	gap: var( --cral-banner-spazio );
	margin: 0;
	padding: 4px 2px 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cral-vetrina-banner-pista::-webkit-scrollbar {
	display: none;
}

.cral-vetrina-banner-voce {
	display: block;
	flex: 0 0 calc( ( 100% - ( var( --cral-banner-per-vista ) - 1 ) * var( --cral-banner-spazio ) ) / var( --cral-banner-per-vista ) );
	margin: 0;
	scroll-snap-align: start;
}

/*
 * Tutte le card sono quadrate, come i banner veri: così nella stessa
 * striscia restano alte uguali, con o senza testi. Una card senza testi è
 * tutta immagine; una con i testi divide lo stesso quadrato fra immagine
 * sopra e testi sotto.
 */
.cral-vetrina-banner-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 0;
	overflow: hidden;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 22px rgba( 20, 30, 40, 0.08 );
	color: #1a1a1a;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.cral-vetrina-banner-card:hover,
a.cral-vetrina-banner-card:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 28px rgba( 20, 30, 40, 0.14 );
	color: #1a1a1a;
}

/*
 * Riquadro dell'immagine: prende tutto lo spazio della card che i testi
 * non usano. In una card senza testi è la card intera, e un banner
 * quadrato la riempie tutta. Un'immagine di altre proporzioni si vede
 * comunque intera ("contain"), mai tagliata né deformata, e lo spazio che
 * avanza si riempie con la stessa immagine sfocata.
 */
.cral-vetrina-banner-immagine {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	background: #eef1f6;
}

.cral-vetrina-banner-immagine::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image: var( --cral-banner-sfondo, none );
	background-position: center;
	background-size: cover;
	filter: blur( 24px ) saturate( 1.1 );
	opacity: 0.55;
}

.cral-vetrina-banner-immagine img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Banner senza immagine: al posto della foto, il colore del sindacato. */
.cral-vetrina-banner-immagine-vuota {
	background: var( --cral-arancione );
}

.cral-vetrina-banner-testo {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

/*
 * Segnale discreto che la card si può aprire, su tutte le card cliccabili:
 * un cerchietto con la freccia nell'angolo in basso a destra
 * dell'immagine. Si vede sempre, anche sul telefono dove il passaggio del mouse
 * non esiste; sotto il mouse prende il colore del sindacato.
 */
.cral-vetrina-banner-apri {
	position: absolute;
	z-index: 1;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a1a1a;
	box-shadow: 0 2px 8px rgba( 20, 30, 40, 0.22 );
	transition: background-color 0.15s ease, color 0.15s ease;
}

a.cral-vetrina-banner-card:hover .cral-vetrina-banner-apri,
a.cral-vetrina-banner-card:focus-visible .cral-vetrina-banner-apri {
	background: var( --cral-arancione-scuro );
	color: var( --cral-testo-su-scuro, #fff );
}

.cral-vetrina-banner-titolo,
.cral-vetrina-banner-sottotitolo {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cral-vetrina-banner-titolo {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
}

.cral-vetrina-banner-sottotitolo {
	font-size: 0.9rem;
	line-height: 1.35;
	color: #555;
}

/* Frecce: compaiono solo se c'è qualcosa da scorrere. */
.cral-vetrina-banner-freccia {
	position: absolute;
	top: calc( 50% - 29px );
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 4px 16px rgba( 20, 30, 40, 0.18 );
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.cral-vetrina-banner-scorrevole .cral-vetrina-banner-freccia {
	display: flex;
}

.cral-vetrina-banner-freccia:disabled {
	opacity: 0;
	pointer-events: none;
}

.cral-vetrina-banner-indietro {
	left: -18px;
}

.cral-vetrina-banner-avanti {
	right: -18px;
}

@media ( max-width: 900px ) {

	.cral-vetrina-banner-pista {
		--cral-banner-per-vista: 2;
	}
}

@media ( max-width: 600px ) {

	.cral-vetrina-banner-pista {
		--cral-banner-spazio: 14px;
	}

	.cral-vetrina-banner-voce {
		flex-basis: 85%;
	}

	/* Sul telefono si scorre col dito: le frecce coprirebbero i banner. */
	.cral-vetrina-banner-scorrevole .cral-vetrina-banner-freccia {
		display: none;
	}
}