/* =========================================================================
   Sezione "I nostri sindacati" — homepage
   -------------------------------------------------------------------------
   Quattro card con la fotografia a tutto blocco. In basso, incolonnati:
   logo, nome, descrizione e bottone. Il riquadro del logo ha altezza fissa
   e larghezza automatica: i loghi hanno forme diverse — quadrati, verticali,
   orizzontali — e il riquadro si adatta a loro, mai il contrario.
   ========================================================================= */

.cral-sindacati-evidenza {
	box-sizing: border-box;
	/* Il bordo stacca la sezione dalla striscia "Popolari", che ha un fondo
	   crema simile a questo. */
	border-top: 1px solid #f0ebe7;
	background: #fdfaf8;
	padding: 52px 64px 56px;
}

.cral-sindacati-dentro {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
}

.cral-sindacati-titolo {
	margin: 0 0 8px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	color: #1a1a1a;
}

.cral-sindacati-sottotitolo {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.5;
	color: #5b5b5b;
}

.cral-sindacati-griglia {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

/* ---- La card ---- */

.cral-sindacato-card {
	position: relative;
	display: block;
	height: 340px;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba( 20, 20, 20, 0.08 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cral-sindacato-foto {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cral-sindacato-velo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.92 ) 0%, rgba( 0, 0, 0, 0.8 ) 32%, rgba( 0, 0, 0, 0.36 ) 62%, rgba( 0, 0, 0, 0.12 ) 100% );
}

.cral-sindacato-corpo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
}

/* ---- Il blocco in basso: logo, nome, descrizione, bottone ---- */

.cral-sindacato-testo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	margin-top: auto;
}

/* ---- Il riquadro del logo: altezza fissa, larghezza che segue il logo ---- */

.cral-sindacato-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 52px;
	width: auto;
	padding: 0 10px;
	border-radius: 13px;
	background: #ffffff;
	box-sizing: border-box;
}

.cral-sindacato-logo img {
	display: block;
	height: 38px;
	width: auto;
	max-width: 104px;
	object-fit: contain;
}

.cral-sindacato-nome {
	align-self: stretch;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: #ffffff;
}

.cral-sindacato-descrizione {
	align-self: stretch;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.9 );
}

.cral-sindacato-bottone {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Il blocco allinea a sinistra per il logo: il bottone si riprende
	   tutta la larghezza da solo. */
	align-self: stretch;
	min-height: 44px;
	padding: 12px;
	border-radius: 11px;
	background: #306a76;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
	box-sizing: border-box;
	transition: background 0.25s ease;
}

/* ---- Il riflesso che attraversa la card, solo CSS ---- */

.cral-sindacato-card::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -75%;
	z-index: 3;
	width: 45%;
	height: 220%;
	pointer-events: none;
	transform: rotate( 18deg ) translateX( 0 );
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.28 ) 50%, rgba( 255, 255, 255, 0 ) 100% );
	opacity: 0;
}

.cral-sindacato-card:hover,
.cral-sindacato-card:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 16px 34px rgba( 20, 20, 20, 0.18 );
}

.cral-sindacato-card:hover .cral-sindacato-bottone,
.cral-sindacato-card:focus-visible .cral-sindacato-bottone {
	background: #23515a;
}

.cral-sindacato-card:hover::after,
.cral-sindacato-card:focus-visible::after {
	opacity: 1;
	transform: rotate( 18deg ) translateX( 320% );
	transition: transform 0.75s ease, opacity 0.75s ease;
}

/* Chi ha chiesto meno animazioni non vede né riflesso né salto. */
@media ( prefers-reduced-motion: reduce ) {

	.cral-sindacato-card,
	.cral-sindacato-card::after,
	.cral-sindacato-bottone {
		transition: none;
	}

	.cral-sindacato-card:hover,
	.cral-sindacato-card:focus-visible {
		transform: none;
	}

	.cral-sindacato-card:hover::after,
	.cral-sindacato-card:focus-visible::after {
		opacity: 0;
		transform: rotate( 18deg ) translateX( 0 );
	}
}

/* ---- Il bottone sotto la griglia ---- */

.cral-sindacati-tutti {
	margin: 32px 0 0;
	text-align: center;
}

.cral-sindacati-tutti-bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 14px 28px;
	border: 1.5px solid #306a76;
	border-radius: 12px;
	color: #306a76;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	background: transparent;
	transition: background 0.25s ease, color 0.25s ease;
}

.cral-sindacati-tutti-bottone:hover,
.cral-sindacati-tutti-bottone:focus-visible {
	background: #306a76;
	color: #ffffff;
}

/* =========================================================================
   Schermi piccoli
   ========================================================================= */

@media ( max-width: 1023px ) {

	.cral-sindacati-evidenza {
		padding: 44px 24px 48px;
	}

	.cral-sindacati-griglia {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cral-sindacati-titolo {
		font-size: 28px;
	}
}

@media ( max-width: 639px ) {

	.cral-sindacati-evidenza {
		padding: 36px 16px 40px;
	}

	.cral-sindacati-griglia {
		grid-template-columns: repeat( 2, 1fr );
		gap: 14px;
	}

	.cral-sindacato-card {
		height: 240px;
	}

	.cral-sindacato-corpo {
		padding: 12px;
	}

	.cral-sindacato-logo {
		height: 40px;
		padding: 0 8px;
		border-radius: 11px;
	}

	.cral-sindacato-logo img {
		height: 28px;
		max-width: 74px;
	}

	.cral-sindacato-nome {
		font-size: 17px;
	}

	/* Sullo stretto la descrizione ruberebbe spazio al nome e al bottone. */
	.cral-sindacato-descrizione {
		display: none;
	}

	.cral-sindacato-bottone {
		font-size: 13px;
		padding: 10px;
	}

	.cral-sindacati-titolo {
		font-size: 24px;
	}
}