/*
 * Componente: card dei servizi.
 *
 * Il link del titolo copre l'intera card con uno pseudo-elemento: così la
 * card è cliccabile tutta ma resta UN solo elemento focalizzabile e un solo
 * nome accessibile, invece di tre link sovrapposti.
 */

.sh-service-cards {
	/* Serve a 100cqi per l'allineamento a header e footer, sotto. */
	container-type: inline-size;
}

/*
 * Larghezza esplicita sul contenitore del widget Elementor: con container-type
 * le card non hanno una larghezza intrinseca e il flex a colonna di Elementor
 * le misurava a una larghezza sbagliata. Su mobile la home aveva 334px vuoti
 * sotto le card; in Incentive, al contrario, il contenitore era più basso
 * delle card, che finivano sopra la sezione successiva.
 */
.elementor-widget-sh-service-cards {
	width: 100%;
}

.sh-service-cards__list {
	display: grid;
	gap: var(--sh-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.sh-service-cards--cols-2 .sh-service-cards__list,
	.sh-service-cards--cols-3 .sh-service-cards__list,
	.sh-service-cards--cols-4 .sh-service-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sh-service-cards--cols-3 .sh-service-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sh-service-cards--cols-4 .sh-service-cards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sh-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--sh-card);
	color: var(--sh-ink);
}

/*
 * L'altezza minima serve solo a mostrare la foto. Data a tutte le card, su
 * telefono quelle senza immagine restavano alte 22rem con 200px di testo:
 * ~150px di vuoto fra una card e l'altra.
 */
.sh-service-card--media {
	min-height: 18rem;
}

@media (min-width: 768px) {
	.sh-service-card--media {
		min-height: 22rem;
	}
}

.sh-service-card__media {
	position: absolute;
	inset: 0;
}

.sh-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Velo sulla foto: pieno dove sta il testo (in alto a sinistra), trasparente
 * verso l'angolo opposto, dove resta visibile il soggetto — come nel mockup.
 * Sullo schema chiaro il velo è del fondo chiaro, sullo scuro è nero.
 */
.sh-service-card__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, var(--sh-bg) 0%, color-mix(in srgb, var(--sh-bg) 85%, transparent) 40%, color-mix(in srgb, var(--sh-bg) 10%, transparent) 85%);
	content: "";
}

.sh-scheme--dark .sh-service-card__media::after {
	background: linear-gradient(115deg, color-mix(in srgb, var(--sh-c-black) 92%, transparent) 0%, color-mix(in srgb, var(--sh-c-black) 70%, transparent) 45%, color-mix(in srgb, var(--sh-c-black) 20%, transparent) 100%);
}

.sh-service-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sh-space-2xs);
	padding: var(--sh-space-md);
}

/*
 * Nel contenitore, su fondo chiaro e senza foto, la card non ha un fondo
 * diverso dalla pagina: il margine interno spostava il testo di 24px rispetto
 * a logo, copertina e bande. Senza, le colonne partono sulla stessa linea.
 */
.sh-service-cards--boxed.sh-scheme--light .sh-service-card:not(.sh-service-card--media) .sh-service-card__body {
	padding-inline: 0;
}

.sh-service-card__icon {
	color: var(--sh-red);
}

.sh-service-card__title {
	margin-block: var(--sh-space-2xs) 0;
}

.sh-service-card__link {
	color: inherit;
	text-decoration: none;
}

/* Zona cliccabile estesa a tutta la card. */
.sh-service-card__link::after {
	position: absolute;
	inset: 0;
	z-index: 2;
	content: "";
}

.sh-service-card:hover .sh-service-card__title {
	color: var(--sh-red-text);
}

.sh-service-card__text {
	margin-block: 0;
	max-width: 40ch;
	color: var(--sh-muted);
}

.sh-service-card--media .sh-service-card__text {
	color: var(--sh-ink);
}

.sh-service-card__cta {
	margin-block-start: var(--sh-space-sm);
}

/* Il focus si vede sulla card intera, non sul solo testo del link. */
.sh-service-card__link:focus-visible {
	outline: none;
}

.sh-service-card:has(.sh-service-card__link:focus-visible) {
	outline: 2px solid var(--sh-focus);
	outline-offset: -4px;
}

/* ==== Card da bordo a bordo (fuori dal contenitore) ==== */

/*
 * --sc-edge è la distanza fra il bordo della banda e l'inizio del contenuto di
 * .sh-container: metà dello spazio in eccesso oltre la larghezza massima, più
 * il gutter. Con 100cqi (larghezza reale del componente) e non 100vw la
 * barra di scorrimento non sposta l'allineamento.
 */
.sh-service-cards--bleed {
	--sc-edge: calc(max(0px, (100cqi - var(--sh-container)) / 2) + var(--sh-gutter-mobile));
	--sc-pad: var(--sh-space-md);
}

@media (min-width: 768px) {
	.sh-service-cards--bleed {
		--sc-edge: calc(max(0px, (100cqi - var(--sh-container)) / 2) + var(--sh-gutter));
		--sc-pad: clamp(var(--sh-space-md), 3.5cqi, var(--sh-space-2xl));
	}
}

/* Fra le foto solo un filo del colore del fondo, come nel mockup della home. */
.sh-service-cards--bleed.sh-service-cards--sfondo .sh-service-cards__list {
	gap: 2px;
}

.sh-service-cards--bleed .sh-service-card__body {
	padding: var(--sh-space-lg) var(--sc-pad);
}

/* Una colonna: tutte le card allineate al contenuto della pagina. */
@media (max-width: 767px) {
	.sh-service-cards--bleed .sh-service-card__body {
		padding-inline: var(--sc-edge);
	}
}

/* Più colonne: rientra solo il lato esterno della prima e dell'ultima di ogni riga. */
@media (min-width: 768px) and (max-width: 1023px) {
	.sh-service-cards--bleed:not(.sh-service-cards--cols-1) .sh-service-cards__item:nth-child(2n+1) .sh-service-card__body { padding-inline-start: var(--sc-edge); }
	.sh-service-cards--bleed:not(.sh-service-cards--cols-1) .sh-service-cards__item:nth-child(2n) .sh-service-card__body { padding-inline-end: var(--sc-edge); }
}

@media (min-width: 1024px) {
	.sh-service-cards--bleed.sh-service-cards--cols-1 .sh-service-card__body { padding-inline: var(--sc-edge); }

	.sh-service-cards--bleed.sh-service-cards--cols-2 .sh-service-cards__item:nth-child(2n+1) .sh-service-card__body { padding-inline-start: var(--sc-edge); }
	.sh-service-cards--bleed.sh-service-cards--cols-2 .sh-service-cards__item:nth-child(2n) .sh-service-card__body { padding-inline-end: var(--sc-edge); }

	.sh-service-cards--bleed.sh-service-cards--cols-3 .sh-service-cards__item:nth-child(3n+1) .sh-service-card__body { padding-inline-start: var(--sc-edge); }
	.sh-service-cards--bleed.sh-service-cards--cols-3 .sh-service-cards__item:nth-child(3n) .sh-service-card__body { padding-inline-end: var(--sc-edge); }

	.sh-service-cards--bleed.sh-service-cards--cols-4 .sh-service-cards__item:nth-child(4n+1) .sh-service-card__body { padding-inline-start: var(--sc-edge); }
	.sh-service-cards--bleed.sh-service-cards--cols-4 .sh-service-cards__item:nth-child(4n) .sh-service-card__body { padding-inline-end: var(--sc-edge); }
}

/* ==== Impianto «immagine in alto»: Incentive aziendali ==== */

/*
 * Card affiancate senza spazio e separate da un filo. Il filo è il fondo della
 * lista che traspare dal gap di 1px: segue la griglia anche quando va a capo.
 */
.sh-service-cards--sopra .sh-service-cards__list {
	gap: 1px;
	background-color: var(--sh-line);
}

.sh-service-cards--sopra .sh-service-card {
	min-height: 0;
	background-color: var(--sh-bg);
}

.sh-service-cards--sopra .sh-service-card__media {
	position: relative;
	inset: auto;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.sh-service-cards--sopra .sh-service-card__media::after {
	content: none;
}

.sh-service-cards--sopra .sh-service-card__body {
	gap: var(--sh-space-3xs);
	padding: var(--sh-space-md) var(--sh-space-md) var(--sh-space-lg);
}

.sh-service-cards--sopra .sh-service-card__title {
	margin-block: 0;
}

.sh-service-cards--sopra .sh-service-card__text {
	color: var(--sh-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
	/* Nel mockup la descrizione è un grigio chiarissimo, non il grigio attenuato. */
	opacity: 0.85;
}