/* =========================================================================
   Vetrina del sindacato — pagina autonoma (senza intestazione e piè di
   pagina del tema). I colori del portale arrivano dalle variabili
   --cral-portale* impostate sul contenitore dal template.
   ========================================================================= */

.cral-vetrina-pagina {
	margin: 0;
	background: #ffffff;
}

/*
 * La vetrina è alta almeno quanto la finestra e distribuisce lo spazio in
 * colonna: così, quando i contenuti sono pochi, il piè di pagina arriva
 * comunque in fondo allo schermo invece di lasciare sotto di sé una fascia
 * bianca vuota. Si tiene conto della barra di amministrazione di WordPress,
 * quando c'è, per non generare uno scorrimento inutile.
 */
.cral-vetrina {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - var( --wp-admin--admin-bar--height, 0px ) );

	--cral-portale: #f2761e;
	--cral-portale-scuro: #d9640f;
	--cral-portale-chiaro: #fff1e6;
	--cral-vetrina-testo: #1a1a1a;
	--cral-vetrina-muted: #6b7280;
	--cral-vetrina-bordo: #e9e6e2;
	--cral-vetrina-scuro: #14161c;

	color: var( --cral-vetrina-testo );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

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

.cral-vetrina-largo {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* --- 1. Barra del portale ------------------------------------------------ */

.cral-vetrina-testata {
	background: #ffffff;
	border-bottom: 1px solid var( --cral-vetrina-bordo );
	position: sticky;
	top: 0;
	z-index: 30;
}

.cral-vetrina-testata-riga {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 76px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*
 * Nella barra ci sono tre cose: marchio, menu e pulsante. L'unica che
 * può restringersi è il marchio: menu e pulsante devono restare interi,
 * altrimenti diventano impossibili da centrare col dito. Il nome del
 * sindacato resta quindi su una riga sola e, se lo spazio finisce, viene
 * accorciato con i puntini: così la barra non cresce mai in altezza e
 * niente può finire sopra a qualcos'altro, qualunque sia la lunghezza
 * del nome.
 */
.cral-vetrina-marchio {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex: 0 1 auto;
	min-width: 0;
}

.cral-vetrina-marchio-logo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var( --cral-portale-chiaro );
	display: flex;
	align-items: center;
	justify-content: center;
}

.cral-vetrina-marchio-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 5px;
}

.cral-vetrina-marchio-iniziale {
	font-size: 1.3rem;
	font-weight: 800;
	color: var( --cral-portale );
	text-transform: uppercase;
}

.cral-vetrina-marchio-nome {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Zona centrale: oggi vuota, domani ospiterà il menu di categorie e
 * sottocategorie. Le regole delle voci e del sottomenu sono già qui:
 * basterà stampare gli <a> dentro <nav class="cral-vetrina-menu">.
 */
.cral-vetrina-menu {
	display: flex;
	align-items: center;
	gap: 22px;

	/* Occupa solo lo spazio che gli serve e non si lascia comprimere:
	   è così che il pulsante "Categorie" smette di finire sopra a quello
	   delle convenzioni quando il nome del sindacato è lungo. */
	flex: 0 0 auto;
}

.cral-vetrina-menu:empty {
	display: block;
}

.cral-vetrina-menu > a,
.cral-vetrina-menu > .cral-vetrina-menu-voce > a {
	color: var( --cral-vetrina-testo );
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 0;
}

.cral-vetrina-menu a:hover {
	color: var( --cral-portale );
}

.cral-vetrina-menu-voce {
	position: relative;
}

.cral-vetrina-menu-voce > .cral-vetrina-sottomenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	display: none;
	flex-direction: column;
	gap: 2px;
	padding: 10px;
	background: #ffffff;
	border: 1px solid var( --cral-vetrina-bordo );
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba( 20, 20, 20, 0.12 );
}

/* La tendina si apre solo al clic, con la classe messa dallo script: al
   semplice passaggio del mouse si apriva da sola, dando fastidio a chi
   stava soltanto attraversando la barra. */

.cral-vetrina-testata-azioni {
	margin-left: auto;
	flex-shrink: 0;
}

.cral-vetrina-pulsante {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	background: var( --cral-portale );
	color: #ffffff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 700;
}

.cral-vetrina-pulsante:hover,
.cral-vetrina-pulsante:focus {
	background: var( --cral-portale-scuro );
	color: #ffffff;
}

/* --- 2. Presentazione ---------------------------------------------------- */

.cral-vetrina-intro {
	background: var( --cral-portale-chiaro );
	padding: 34px 0 30px;
}

.cral-vetrina-briciole {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.85rem;
	color: var( --cral-vetrina-muted );
	margin-bottom: 16px;
}

.cral-vetrina-briciole a {
	color: var( --cral-vetrina-muted );
	text-decoration: none;
}

.cral-vetrina-briciole a:hover {
	color: var( --cral-portale );
}

.cral-vetrina-briciole-corrente {
	color: var( --cral-vetrina-testo );
	font-weight: 600;
}

/*
 * Occhiello: il nome del sindacato, sempre presente sopra il titolo, così
 * l'iscritto capisce subito su quale portale si trova anche quando titolo e
 * sottotitolo sono quelli comuni a tutte le vetrine.
 */
.cral-vetrina-occhiello {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 6px 16px 6px 6px;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba( 20, 20, 20, 0.07 );
	max-width: 100%;
}

.cral-vetrina-occhiello-logo {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var( --cral-portale-chiaro );
	display: flex;
	align-items: center;
	justify-content: center;
}

.cral-vetrina-occhiello-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.cral-vetrina-occhiello-iniziale {
	font-weight: 800;
	color: var( --cral-portale );
	text-transform: uppercase;
}

.cral-vetrina-occhiello-nome {
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var( --cral-portale-scuro );
	overflow-wrap: anywhere;
}

.cral-vetrina-titolo {
	margin: 0 0 8px;
	font-size: 2.1rem;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cral-vetrina-sottotitolo {
	margin: 0 0 10px;
	max-width: 720px;
	font-size: 1.05rem;
	color: #33383f;
}

.cral-vetrina-conteggio {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var( --cral-portale-scuro );
}

.cral-vetrina-recapiti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-top: 20px;
}

.cral-vetrina-recapito {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: #33383f;
	text-decoration: none;
}

a.cral-vetrina-recapito:hover {
	color: var( --cral-portale-scuro );
}

.cral-vetrina-recapito svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var( --cral-portale );
}

.cral-vetrina-social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cral-vetrina-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #ffffff;
	color: var( --cral-portale );
	text-decoration: none;
	border: 1px solid var( --cral-vetrina-bordo );
}

.cral-vetrina-social a:hover {
	background: var( --cral-portale );
	color: #ffffff;
}

.cral-vetrina-social svg {
	width: 17px;
	height: 17px;
}

/* --- 3. Corpo: il blocco di ricerca già esistente ------------------------ */

.cral-vetrina-corpo {
	padding: 28px 0 8px;
	background: #ffffff;

	/* Occupa lo spazio che avanza e spinge il piè di pagina in fondo. */
	flex: 1 0 auto;
}

/*
 * Il blocco di ricerca porta con sé il contenitore comune del plugin, che
 * ha un'ampia spaziatura pensata per quando sta da solo in pagina. Dentro
 * la vetrina la spaziatura la decide la vetrina: senza questa correzione
 * si sommavano il fondo dell'intestazione e il bordo superiore del
 * contenitore, lasciando mezzo schermo vuoto.
 */
.cral-vetrina-corpo .cral-conv-container {
	/* Stessa larghezza delle altre fasce, così i bordi restano allineati. */
	max-width: 1200px;
	padding-top: 0;
	padding-bottom: 48px;
	background: transparent;
}

/* --- 4) Risultati e mappa: due colonne equilibrate ----------------------- */

.cral-vetrina-corpo .cral-conv-ricerca-risultati {
	grid-template-columns: 1.22fr 1fr; /* circa 55% risultati, 45% mappa */
	align-items: stretch;
}

/*
 * La mappa è alta quanto l'elenco dei risultati e mai di più; se l'elenco
 * supera l'altezza dello schermo, la mappa si ferma a quella e resta
 * agganciata mentre si scorre.
 */
.cral-vetrina-corpo .cral-conv-ricerca-mappa-guscio {
	height: auto;
	align-self: stretch;
	min-height: 380px;
	max-height: calc( 100vh - 130px );
	top: 100px;
}

/* --- 4. Piè di pagina ---------------------------------------------------- */

.cral-vetrina-footer {
	background: var( --cral-vetrina-scuro );
	color: #d7dae1;
	padding: 52px 0 26px;
	font-size: 0.92rem;
}

.cral-vetrina-footer h2 {
	margin: 22px 0 12px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
}

.cral-vetrina-footer a {
	color: #d7dae1;
	text-decoration: none;
}

.cral-vetrina-footer a:hover {
	color: #ffffff;
}

.cral-vetrina-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cral-vetrina-footer-griglia {
	display: grid;
	/* Tre colonne: il sindacato, i link comuni, CralNetwork con i recapiti. */
	grid-template-columns: minmax( 240px, 1.2fr ) minmax( 200px, 1fr ) minmax( 240px, 1.1fr );
	gap: 40px;
	padding-bottom: 34px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

.cral-vetrina-footer-marchio {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	color: #ffffff;
	font-size: 1rem;
}

.cral-vetrina-footer-marchio img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: contain;
	background: #ffffff;
	padding: 5px;
	flex-shrink: 0;
}

.cral-vetrina-footer-testo {
	margin: 14px 0 0;
	color: #aeb4c0;
	max-width: 420px;
}

.cral-vetrina-footer-contatti li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.cral-vetrina-footer-contatti svg {
	width: 16px;
	height: 16px;
	margin-top: 4px;
	flex-shrink: 0;
	color: var( --cral-portale );
}

.cral-vetrina-footer .cral-vetrina-social a {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.16 );
	color: #ffffff;
}

.cral-vetrina-footer .cral-vetrina-social a:hover {
	background: var( --cral-portale );
	border-color: var( --cral-portale );
}

.cral-vetrina-footer-cral-logo {
	max-width: 150px;
	height: auto;
	margin-top: 4px;
	display: block;
}

.cral-vetrina-footer-colonne {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 24px;
	margin-top: 22px;
}

.cral-vetrina-footer-colonna h2 {
	margin-top: 0;
}

.cral-vetrina-footer-fondo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding-top: 22px;
	color: #8f96a3;
	font-size: 0.85rem;
}

/* --- Schermi medi -------------------------------------------------------- */

@media ( max-width: 900px ) {

	.cral-vetrina-footer-griglia {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.cral-vetrina-footer-link {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
		gap: 24px;
	}

	.cral-vetrina-titolo {
		font-size: 1.7rem;
	}
}

/* --- Telefono ------------------------------------------------------------ */

@media ( max-width: 640px ) {

	.cral-vetrina-largo {
		padding-left: 16px;
		padding-right: 16px;
	}

	.cral-vetrina-testata {
		position: static;
	}

	/* Su telefono tutto resta su una riga sola: marchio, menu e pulsante. */
	.cral-vetrina-testata-riga {
		gap: 10px;
		min-height: 0;
		flex-wrap: nowrap;
	}

	.cral-vetrina-menu-bottone {
		padding: 8px 12px;
		font-size: 0.85rem;
	}

	.cral-vetrina-marchio-logo {
		width: 40px;
		height: 40px;
	}

	.cral-vetrina-marchio-nome {
		font-size: 0.92rem;
		line-height: 1.25;
	}

	.cral-vetrina-testata-azioni {
		margin-left: auto;
	}

	.cral-vetrina-pulsante {
		padding: 9px 14px;
		font-size: 0.82rem;
	}

	.cral-vetrina-intro {
		padding: 24px 0;
	}

	.cral-vetrina-titolo {
		font-size: 1.5rem;
	}

	.cral-vetrina-sottotitolo {
		font-size: 0.98rem;
	}

	.cral-vetrina-recapiti {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.cral-vetrina-footer {
		padding-top: 38px;
	}

	.cral-vetrina-footer-colonne {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Sotto gli 860px il foglio di stile comune rimette la mappa sopra
 * l'elenco, a piena larghezza e senza aggancio: qui si azzerano le misure
 * pensate per il desktop, che altrimenti resterebbero più forti.
 */
@media ( max-width: 860px ) {

	.cral-vetrina-corpo .cral-conv-ricerca-risultati {
		grid-template-columns: 1fr;
	}

	.cral-vetrina-corpo .cral-conv-ricerca-mappa-guscio {
		position: static;
		height: 280px;
		min-height: 0;
		max-height: none;
	}
}

/* --- Menu delle categorie nella barra del portale ------------------------ */

.cral-vetrina-menu-bottone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 1px solid var( --cral-vetrina-bordo );
	border-radius: 999px;
	background: #ffffff;
	color: var( --cral-vetrina-testo );
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.cral-vetrina-menu-bottone:hover,
.cral-vetrina-menu-voce.cral-aperto .cral-vetrina-menu-bottone {
	border-color: var( --cral-portale );
	color: var( --cral-portale-scuro );
}

.cral-vetrina-menu-bottone svg {
	width: 15px;
	height: 15px;
	transition: transform 0.15s ease;
}

.cral-vetrina-menu-voce.cral-aperto .cral-vetrina-menu-bottone svg {
	transform: rotate( 180deg );
}

/* La tendina si apre al passaggio del mouse, con la tastiera e al tocco
   (in quel caso la classe la mette lo script). */
.cral-vetrina-menu-voce.cral-aperto > .cral-vetrina-sottomenu {
	display: flex;
}

.cral-vetrina-sottomenu {
	max-height: 60vh;
	overflow-y: auto;
	min-width: 260px;
}

.cral-vetrina-sottomenu-voce {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var( --cral-vetrina-testo );
	font-size: 0.9rem;
	font-weight: 600;
}

.cral-vetrina-sottomenu-voce:hover {
	background: var( --cral-portale-chiaro );
	color: var( --cral-portale-scuro );
}

.cral-vetrina-sottomenu-icona {
	display: flex;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	background: var( --cral-portale-chiaro );
	color: var( --cral-portale );
	flex-shrink: 0;
}

.cral-vetrina-sottomenu-icona svg,
.cral-vetrina-sottomenu-icona img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}

.cral-vetrina-sottomenu-nome {
	flex: 1 1 auto;
}

.cral-vetrina-sottomenu-numero {
	flex-shrink: 0;
	min-width: 24px;
	text-align: center;
	padding: 2px 7px;
	border-radius: 999px;
	background: #f1f2f4;
	color: var( --cral-vetrina-muted );
	font-size: 0.76rem;
	font-weight: 700;
}

/* Le sottocategorie stanno rientrate sotto la loro generale. */
.cral-vetrina-sottomenu-figlia {
	padding-left: 46px;
	font-weight: 600;
	font-size: 0.86rem;
	color: var( --cral-vetrina-muted );
}

.cral-vetrina-sottomenu-figlia::before {
	content: "–";
	position: absolute;
	margin-left: -14px;
	color: var( --cral-vetrina-muted );
}

/* --- Blocco categorie della vetrina -------------------------------------- */

.cral-vetrina-categorie {
	background: #ffffff;
	padding: 26px 0 4px;
}

.cral-vetrina-categorie-titolo {
	margin: 0 0 16px;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.cral-vetrina-categorie-griglia {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 165px, 1fr ) );
	gap: 12px;
}

.cral-vetrina-categoria {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var( --cral-vetrina-bordo );
	border-radius: 14px;
	background: #ffffff;
	text-decoration: none;
	color: var( --cral-vetrina-testo );
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cral-vetrina-categoria:hover {
	border-color: var( --cral-portale );
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 20, 20, 20, 0.08 );
}

.cral-vetrina-categoria-attiva {
	border-color: var( --cral-portale );
	background: var( --cral-portale-chiaro );
}

.cral-vetrina-categoria-icona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var( --cral-portale );
	color: #ffffff;
	flex-shrink: 0;
}

.cral-vetrina-categoria-icona svg,
.cral-vetrina-categoria-icona img {
	width: 19px;
	height: 19px;
	object-fit: contain;
}

.cral-vetrina-categoria-nome {
	flex: 1 1 auto;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
}

.cral-vetrina-categoria-numero {
	flex-shrink: 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: var( --cral-portale-chiaro );
	color: var( --cral-portale-scuro );
	font-size: 0.78rem;
	font-weight: 800;
}

.cral-vetrina-categoria-vuota {
	margin: 18px 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	background: var( --cral-portale-chiaro );
	color: var( --cral-vetrina-testo );
	font-size: 0.95rem;
	font-weight: 600;
}

@media ( max-width: 640px ) {

	.cral-vetrina-categorie {
		padding-top: 20px;
	}

	.cral-vetrina-categorie-griglia {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.cral-vetrina-categoria {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.cral-vetrina-sottomenu {
		min-width: 220px;
		max-height: 50vh;
	}
}

/* --- Schermi molto stretti ----------------------------------------------- */

@media ( max-width: 430px ) {

	/*
	 * Qui lo spazio non basta per nome e due pulsanti: sparisce il nome
	 * scritto e resta il logo, che è il segno di riconoscimento più
	 * immediato del portale. Meglio un logo intero che un nome ridotto a
	 * due lettere e tre puntini, e i due pulsanti restano interi e
	 * comodi da toccare. Il nome per esteso si legge subito sotto, nella
	 * fascia di presentazione.
	 */
	.cral-vetrina-marchio-nome {
		display: none;
	}

	.cral-vetrina-testata-riga {
		gap: 8px;
	}

	.cral-vetrina-menu-bottone {
		padding: 8px 11px;
	}
}

/* Vetrina di un sindacato che non ha ancora convenzioni */

.cral-vetrina-nessuna-convenzione {
	/*
	 * Colori scritti per esteso e neutri: qui non arrivano le variabili
	 * della scheda, e un fondo colorato litigherebbe con il colore del
	 * sindacato, che cambia da vetrina a vetrina.
	 */
	margin: 0 0 24px;
	padding: 18px 20px;
	background: #f6f4f2;
	border: 1px solid #e9e6e2;
	border-radius: 16px;
	color: #1a1a1a;
	font-size: 1rem;
}

/* --- Fascia banner del sindacato ------------------------------------------ */

.cral-vetrina-banner {
	padding: 8px 0 4px;
}

/* --- Piè di pagina a tre colonne ------------------------------------------ */

.cral-vetrina-footer-link {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* --- Motore di ricerca in vetrina ----------------------------------------- */

.cral-vetrina-ricerca {
	padding: 8px 0 4px;
}

/*
 * Sulla homepage il blocco bianco della ricerca è stretto e centrato, ed è
 * giusto così. In vetrina invece deve stare in riga con gli altri blocchi:
 * stesso bordo sinistro e stessa larghezza del banner, delle categorie e
 * dei risultati.
 */
.cral-vetrina-ricerca .cral-home-hero-ricerca {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Le linguette sono le stesse della homepage, ma lì poggiano sulla fascia
 * blu dell'hero: quelle non attive sono bianche. In vetrina il fondo è
 * chiaro, quindi si vestono al contrario, con il colore del sindacato.
 */
.cral-vetrina-ricerca .cral-home-ricerca-tab {
	background: rgba( 20, 20, 20, 0.06 );
	color: var( --cral-testo, #1a1a1a );
}

/*
 * Sotto il mouse la linguetta si accende con il colore del sindacato e il
 * testo resta bianco sopra. Serve perché la homepage, da cui queste
 * linguette ereditano, schiarisce il testo al passaggio del mouse: lì il
 * fondo è la fascia colorata dell'hero, qui invece era chiaro, e il testo
 * bianco spariva.
 *
 * Si usa la tinta scura del sindacato, non quella piena: è la stessa che
 * il sito usa già per i pulsanti sotto il mouse.
 *
 * Il testo è bianco per tutti i colori normali. Se però un sindacato
 * sceglie una tinta molto chiara, il bianco sparirebbe: in quel caso il
 * sito passa da solo a scrivere in scuro (vedi cral_conv_testo_leggibile_su).
 */
@media ( hover: hover ) {

	.cral-vetrina-ricerca .cral-home-ricerca-tab:hover {
		background: var( --cral-arancione-scuro, #c25a14 );
		color: var( --cral-testo-su-scuro, #fff );
	}
}

/*
 * Sul telefono il passaggio del mouse non esiste, ma il browser lo finge
 * dopo un tocco e la linguetta resterebbe accesa anche dopo aver tolto il
 * dito. Qui la si riporta com'era da ferma.
 */
@media ( hover: none ) {

	.cral-vetrina-ricerca .cral-home-ricerca-tab:hover {
		background: rgba( 20, 20, 20, 0.06 );
		color: var( --cral-testo, #1a1a1a );
	}
}

.cral-vetrina-ricerca .cral-home-ricerca-tab-attiva,
.cral-vetrina-ricerca .cral-home-ricerca-tab-attiva:hover {
	background: #fff;
	color: var( --cral-arancione-scuro, #1a1a1a );
}

.cral-vetrina-ricerca .cral-home-ricerca-tab-icona svg {
	stroke: currentColor;
}

/*
 * Le spie che dicono "c'è dell'altro di lato" sulla homepage sfumano nel
 * verde-azzurro dell'hero: in vetrina il fondo è chiaro, quindi sfumano nel
 * chiaro e la freccina diventa scura.
 */
.cral-vetrina-ricerca .cral-home-ricerca-tab-fascia::before {
	background-image:
		linear-gradient( to right, #eef1f6 30%, rgba( 238, 241, 246, 0 ) 100% ),
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E" );
}

.cral-vetrina-ricerca .cral-home-ricerca-tab-fascia::after {
	background-image:
		linear-gradient( to left, #eef1f6 30%, rgba( 238, 241, 246, 0 ) 100% ),
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E" );
}

/* --- Elenco unico: ultimi inserimenti e risultati della ricerca ----------- */

.cral-vetrina-elenco-titolo {
	/* Sta dentro il contenitore dei risultati, che ha già i suoi margini. */
	grid-column: 1 / -1;
	margin: 0 0 16px;
	font-size: 1.5rem;
	color: var( --cral-testo, #1a1a1a );
}

/* --- Riquadri delle categorie tutti uguali -------------------------------- */

.cral-vetrina-categoria {
	/*
	 * Altezza uguale per tutti: il nome ha sempre lo spazio di due righe,
	 * così un nome lungo come "Salute e Benessere" non fa crescere il suo
	 * riquadro rispetto a "Casa".
	 */
	align-items: stretch;
	min-height: 68px;
}

.cral-vetrina-categoria-icona {
	align-self: center;
}

.cral-vetrina-categoria-nome {
	display: flex;
	align-items: center;
	min-height: 2.5em;
	/*
	 * "break-word" manda a capo la parola intera; "anywhere" la spezzerebbe
	 * a metà ("Salute e Benesser / e"). Si spezza solo una parola che da
	 * sola non entra nel riquadro.
	 */
	overflow-wrap: break-word;
}

.cral-vetrina-categoria-numero {
	align-self: center;
}

/* --- Linguette della ricerca tutte della stessa misura -------------------- */

/*
 * Larghezza e altezza fisse, uguali per tutte: un nome lungo va su due
 * righe invece di allargare la sua linguetta, e la fila resta regolare
 * qualunque siano i nomi delle categorie.
 */
.cral-vetrina-ricerca .cral-home-ricerca-tab {
	flex: 0 0 168px;
	width: 168px;
	height: 56px;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
	white-space: normal;
	overflow: hidden;
	overflow-wrap: break-word;
}

@media ( max-width: 600px ) {

	.cral-vetrina-ricerca .cral-home-ricerca-tab {
		flex: 0 0 140px;
		width: 140px;
	}

	.cral-vetrina-elenco-titolo {
		padding: 0 16px;
		font-size: 1.25rem;
	}
}

/* Recapiti mostrati insieme al messaggio della vetrina senza convenzioni */

.cral-vetrina-nessuna-convenzione-testo {
	margin: 0;
}

.cral-vetrina-nessuna-convenzione-recapiti {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 10px 0 0;
	font-weight: 600;
}

.cral-vetrina-nessuna-convenzione-recapiti a {
	color: var( --cral-portale-scuro, #1a1a1a );
}