/* =============================================================================
   servizi.css — hub servizi e landing singolo servizio
   Proprietario: agente A5 (round 2). Nessun altro agente scrive in questo file.
   Dipende da main.css (design system): usa i token, non ridefinirli.

   I token di spaziatura sono richiamati con fallback (var(--fg-s4, 2rem)) così
   il foglio regge anche prima che main.css pubblichi la scala di §12.2.

   Indice
     1. Utility locali
     2. Card di servizio (componente condiviso con la home)
     3. Hub /servizi/ — intro e numeri
     4. Hub /servizi/ — reparti alternati
     5. Hub /servizi/ — un unico punto di riferimento
     6. Hub /servizi/ — rimando ai marchi
     7. Landing — apertura e indice
     8. Landing — blocchi di contenuto
     8b. Landing — tabelle dentro i contenuti
     9. Landing — striscia foto
    10. Landing — FAQ
    11. Landing — altri reparti e nota finale
    12. Riduzione del movimento
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Utility locali
   -------------------------------------------------------------------------- */

.fg-pagina--servizi,
.fg-pagina--servizio {
	overflow-x: clip;
}

/* Numero di reparto: filo conduttore grafico di tutte le pagine servizi. */
.fg-service-card__num,
.fg-service-card__kicker,
.fg-reparto__num,
.fg-servizio-apertura__num,
.fg-servizio-blocco__indice {
	font-family: var(--fg-font-display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1;
}

/* -----------------------------------------------------------------------------
   2. Card di servizio
   -------------------------------------------------------------------------- */

.fg-service-card {
	position: relative;
	transition: transform .35s ease, box-shadow var(--fg-transition), border-color var(--fg-transition);
}

.fg-service-card:hover {
	transform: translateY(-4px);
}

.fg-service-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--fg-grey-100);
}

.fg-service-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.fg-service-card:hover .fg-service-card__img,
.fg-service-card:focus-within .fg-service-card__img {
	transform: scale(1.06);
}

/* Velo scuro: si intensifica al passaggio del mouse e stacca il numero dallo sfondo. */
.fg-service-card__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 17, 17, .55) 0%, rgba(17, 17, 17, .05) 45%, rgba(17, 17, 17, .55) 100%);
	opacity: .5;
	transition: opacity .35s ease;
	pointer-events: none;
}

.fg-service-card:hover .fg-service-card__velo,
.fg-service-card:focus-within .fg-service-card__velo {
	opacity: .85;
}

.fg-service-card__num {
	position: absolute;
	top: var(--fg-s2, 1rem);
	left: var(--fg-s2, 1rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: .35rem .5rem;
	background: var(--fg-orange);
	color: var(--fg-white);
	font-size: 1rem;
	pointer-events: none;
}

.fg-service-card__kicker {
	margin: 0;
	color: var(--fg-green-dark);
	font-size: 1.125rem;
}

.fg-service-card__body {
	gap: var(--fg-s2, 1rem);
	padding: var(--fg-s3, 1.5rem);
}

.fg-service-card__titolo {
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
	line-height: 1.15;
}

/* Il sommario è il testo che si legge davvero: sotto 1rem, dentro card alte
   200px e più, sembra una didascalia. */
.fg-service-card__testo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.fg-service-card__footer {
	margin-top: auto;
	padding-top: var(--fg-s2, 1rem);
}

.fg-service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fg-s1, .5rem);
	color: var(--fg-orange-text, #B35310);
	font-family: var(--fg-font-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Freccia disegnata in CSS: nessuna icona esterna, nessun font aggiuntivo. */
.fg-service-card__freccia {
	position: relative;
	display: inline-block;
	width: 1.35rem;
	height: .6rem;
	transition: transform .3s ease;
}

.fg-service-card__freccia::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%);
}

.fg-service-card__freccia::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: .45rem;
	height: .45rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.fg-service-card:hover .fg-service-card__freccia,
.fg-service-card:focus-within .fg-service-card__freccia {
	transform: translateX(.3rem);
}

/* Variante compatta: miniatura a sinistra, titolo a destra.
   Niente riquadri vuoti come nel round 1. */
.fg-service-card--compatta {
	flex-direction: row;
	align-items: stretch;
}

.fg-service-card--compatta .fg-service-card__media {
	flex: 0 0 6.5rem;
	aspect-ratio: 1 / 1;
}

.fg-service-card--compatta .fg-service-card__num {
	top: auto;
	bottom: 0;
	left: 0;
	min-width: 0;
	padding: .2rem .4rem;
	font-size: .75rem;
}

.fg-service-card--compatta .fg-service-card__body {
	justify-content: center;
	gap: var(--fg-s1, .5rem);
	padding: var(--fg-s2, 1rem) var(--fg-s3, 1.5rem);
}

.fg-service-card--compatta .fg-service-card__titolo {
	font-size: 1.0625rem;
}

.fg-service-card--compatta .fg-service-card__footer {
	margin-top: var(--fg-s1, .5rem);
	padding-top: 0;
}

/* Sotto i 480px la colonna di testo della card compatta scendeva a ~128px:
   "Duplicazione chiavi e radiocomandi" andava su tre righe da due parole e la
   dicitura del link su due. Miniatura più stretta, meno padding, occhiello più
   corto: la colonna di testo passa a ~180px e le righe tornano leggibili. */
@media (max-width: 479px) {
	.fg-service-card--compatta .fg-service-card__media {
		flex: 0 0 5rem;
	}

	.fg-service-card--compatta .fg-service-card__body {
		padding-inline: var(--fg-s2, 1rem);
	}

	.fg-service-card--compatta .fg-service-card__titolo {
		font-size: 1rem;
	}

	.fg-service-card--compatta .fg-service-card__cta {
		font-size: .6875rem;
		letter-spacing: .06em;
	}

	.fg-service-card--compatta .fg-service-card__freccia {
		width: 1.1rem;
	}
}

@media (min-width: 480px) {
	.fg-service-card--compatta .fg-service-card__media {
		flex-basis: 8rem;
	}
}

/* -----------------------------------------------------------------------------
   3. Hub — intro e numeri
   -------------------------------------------------------------------------- */

/* main.css elenca .fg-servizi-intro fra i blocchi introduttivi di testo e li
   limita a 62ch: qui però è la SEZIONE a piena larghezza che contiene testo e
   numeri, non un blocco di testo. Senza questo ripristino la sezione si stringe
   a ~700px e metà schermo resta vuota. Da rimuovere se A1 toglie il selettore. */
.fg-servizi-intro {
	max-width: none;
	margin-bottom: 0;
}

.fg-servizi-intro__inner {
	display: grid;
	gap: var(--fg-s5, 3rem);
	align-items: start;
}

@media (min-width: 900px) {
	.fg-servizi-intro__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		gap: var(--fg-s6, 4rem);
	}
}

.fg-servizi-intro__testo > * + * {
	margin-top: var(--fg-s2, 1rem);
}

.fg-servizi-intro__testo .fg-title {
	margin: 0;
}

.fg-servizi-intro__testo p {
	max-width: 60ch;
}

.fg-servizi-numeri {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fg-s3, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-servizi-numeri__voce {
	padding: var(--fg-s3, 1.5rem);
	background: var(--fg-grey-100);
	border-left: 4px solid var(--fg-orange);
	border-radius: 0 var(--fg-radius) var(--fg-radius) 0;
}

.fg-servizi-numeri__voce:nth-child(even) {
	border-left-color: var(--fg-green);
}

.fg-servizi-numeri__valore {
	display: block;
	font-family: var(--fg-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1;
	color: var(--fg-black);
	font-variant-numeric: tabular-nums;
}

.fg-servizi-numeri__suffisso {
	margin-left: .2em;
	font-size: .45em;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fg-grey-600);
}

.fg-servizi-numeri__etichetta {
	display: block;
	margin-top: var(--fg-s1, .5rem);
	color: var(--fg-grey-600);
	font-size: .875rem;
	line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   4. Hub — reparti alternati
   -------------------------------------------------------------------------- */

.fg-reparti {
	background: var(--fg-grey-100);
}

.fg-reparti__intestazione {
	margin-bottom: var(--fg-s5, 3rem);
}

.fg-reparti__intestazione .fg-title {
	margin: 0;
}

.fg-reparti__elenco {
	display: grid;
	gap: var(--fg-s5, 3rem);
}

@media (min-width: 900px) {
	.fg-reparti__elenco {
		gap: var(--fg-s6, 4rem);
	}
}

.fg-reparto {
	position: relative;
	display: grid;
	gap: 0;
	align-items: center;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	transition: border-color var(--fg-transition), box-shadow var(--fg-transition);
}

/* Niente overflow:hidden sulla card: l'ingresso laterale sposta la figura di
   -48px fuori dal box e con il ritaglio l'IntersectionObserver di motion.js non
   la vede mai intersecare, così la foto resta mascherata (riquadro grigio vuoto)
   per sempre. Il ritaglio serve solo alla foto, e ce l'ha già lei. */
.fg-reparto__media {
	border-radius: inherit;
}

.fg-reparto:hover {
	border-color: var(--fg-orange);
	box-shadow: var(--fg-shadow-lg, 0 8px 28px rgba(0, 0, 0, .14));
}

/* Soglia a 720px e non a 800: l'iPad verticale (768) cadeva dalla parte del
   mobile e riceveva una foto larga 704px alta 440, cioè il layout del telefono
   stirato. A 720 il tablet ha la sua composizione affiancata. */
@media (min-width: 720px) {
	.fg-reparto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.fg-reparto--invertito .fg-reparto__media {
		order: 2;
	}
}

.fg-reparto__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--fg-grey-100);
	aspect-ratio: 16 / 10;
}

@media (min-width: 720px) {
	.fg-reparto__media {
		height: 100%;
		aspect-ratio: auto;
		min-height: 15rem;
	}
}

@media (min-width: 900px) {
	.fg-reparto__media {
		min-height: 18rem;
	}
}

.fg-reparto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.fg-reparto:hover .fg-reparto__img {
	transform: scale(1.05);
}

.fg-reparto__num {
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--fg-s1, .5rem) var(--fg-s2, 1rem);
	background: var(--fg-orange);
	color: var(--fg-white);
	font-size: 1.125rem;
}

.fg-reparto__num--inline {
	position: static;
	display: inline-block;
	margin: 0 0 var(--fg-s2, 1rem);
}

.fg-reparto__testo {
	padding: var(--fg-s3, 1.5rem);
}

@media (min-width: 720px) {
	.fg-reparto__testo {
		padding: var(--fg-s4, 2rem);
	}
}

@media (min-width: 900px) {
	.fg-reparto__testo {
		padding: var(--fg-s5, 3rem);
	}
}

.fg-reparto__titolo {
	margin: 0 0 var(--fg-s2, 1rem);
	font-family: var(--fg-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.1;
}

.fg-reparto__titolo a {
	color: var(--fg-black);
	text-decoration: none;
	background-image: linear-gradient(var(--fg-orange), var(--fg-orange));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 3px;
	transition: background-size .35s ease;
}

.fg-reparto:hover .fg-reparto__titolo a,
.fg-reparto__titolo a:hover,
.fg-reparto__titolo a:focus-visible {
	background-size: 100% 3px;
}

/* Il titolo è un link alto 24px: troppo poco per il dito. Invece di gonfiarlo
   (e scollare la sottolineatura animata) si estende la sua area attiva a tutta
   la colonna di testo, come fa main.css con .fg-card--link. Titolo e bottone
   puntano allo stesso indirizzo: la sovrapposizione non nasconde nulla.

   Il riferimento è .fg-reparto__testo e non l'intera scheda perché motion.js
   lascia una transform sulla colonna, e una transform è blocco contenitore per
   i discendenti assoluti: senza questo `position` l'ancoraggio dipenderebbe da
   un residuo dell'animazione invece che dal CSS. */
.fg-reparto__testo {
	position: relative;
}

.fg-reparto__titolo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fg-reparto__sommario {
	margin: 0 0 var(--fg-s3, 1.5rem);
	max-width: 46ch;
	color: var(--fg-grey-600);
}

.fg-reparto__voci {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
	margin: 0 0 var(--fg-s3, 1.5rem);
	padding: 0;
	list-style: none;
}

.fg-reparto__voci li {
	padding: .35rem .7rem;
	background: var(--fg-grey-100);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	color: var(--fg-grey-900);
	font-size: .8125rem;
	line-height: 1.3;
}

/* Sopra il velo del titolo (vedi .fg-reparto__titolo a::after): il bottone deve
   conservare il proprio focus e il proprio stato :hover. */
.fg-reparto__azione {
	position: relative;
	z-index: 1;
	margin: 0;
}

/* .fg-btn--ghost azzera la min-height dei bottoni e resta alto 36px: sotto la
   soglia di 44x44 raccomandata per il dito (WCAG 2.2 AA ne chiede almeno 24).
   Qui è l'unico invito all'azione della scheda, quindi va toccabile. */
.fg-reparto__azione .fg-btn--ghost {
	min-height: 2.75rem;
	padding-block: .5rem;
}

/* -----------------------------------------------------------------------------
   5. Hub — un unico punto di riferimento
   -------------------------------------------------------------------------- */

.fg-unico-punto__inner {
	display: grid;
	gap: var(--fg-s5, 3rem);
	align-items: center;
}

@media (min-width: 900px) {
	.fg-unico-punto__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: var(--fg-s6, 4rem);
	}
}

.fg-unico-punto__testo > * + * {
	margin-top: var(--fg-s2, 1rem);
}

.fg-unico-punto__testo .fg-title {
	margin: 0;
}

.fg-unico-punto__testo .fg-list {
	margin-top: var(--fg-s4, 2rem);
}

.fg-unico-punto__testo .fg-list li {
	margin-bottom: var(--fg-s2, 1rem);
}

.fg-unico-punto__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fg-radius);
	aspect-ratio: 4 / 3;
}

.fg-unico-punto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------------------------------------------------------
   6. Hub — rimando ai marchi
   -------------------------------------------------------------------------- */

.fg-servizi-marchi__inner {
	display: grid;
	gap: var(--fg-s4, 2rem);
	align-items: center;
}

@media (min-width: 900px) {
	.fg-servizi-marchi__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--fg-s6, 4rem);
	}
}

.fg-servizi-marchi__testo > * + * {
	margin-top: var(--fg-s2, 1rem);
}

.fg-servizi-marchi__testo .fg-title {
	margin: 0;
}

.fg-servizi-marchi__testo p {
	max-width: 54ch;
}

.fg-servizi-marchi__azione {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-servizi-marchi__elenco {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-servizi-marchi__elenco li {
	padding: .5rem .9rem;
	background: var(--fg-white);
	border: 1px solid var(--fg-grey-200);
	border-radius: var(--fg-radius);
	font-family: var(--fg-font-display);
	font-weight: 700;
	font-size: .9375rem;
	color: var(--fg-black);
	transition: transform var(--fg-transition), border-color var(--fg-transition);
}

.fg-servizi-marchi__elenco li:hover {
	transform: translateY(-2px);
	border-color: var(--fg-orange);
}

.fg-servizi-marchi__elenco li.fg-servizi-marchi__altri {
	background: transparent;
	border-color: transparent;
	color: var(--fg-grey-600);
	font-family: var(--fg-font-body);
	font-weight: 400;
	font-style: italic;
}

/* -----------------------------------------------------------------------------
   7. Landing — apertura e indice
   -------------------------------------------------------------------------- */

.fg-servizio-apertura__inner {
	display: grid;
	gap: var(--fg-s4, 2rem);
	align-items: start;
}

@media (min-width: 900px) {
	.fg-servizio-apertura__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
		gap: var(--fg-s6, 4rem);
	}
}

.fg-servizio-apertura__num {
	display: flex;
	align-items: baseline;
	gap: var(--fg-s1, .5rem);
	margin: 0 0 var(--fg-s3, 1.5rem);
	font-size: 2.5rem;
	color: var(--fg-orange);
}

.fg-servizio-apertura__num span {
	font-family: var(--fg-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-servizio-apertura__lead {
	margin: 0;
	max-width: 62ch;
}

/* Capoversi successivi dell'intro: testo corrente, non lead. */
.fg-servizio-apertura__par {
	margin: var(--fg-s3, 1.5rem) 0 0;
	max-width: 66ch;
	line-height: 1.7;
	color: var(--fg-grey-900);
}

.fg-servizio-indice {
	padding: var(--fg-s3, 1.5rem);
	background: var(--fg-grey-100);
	border-top: 4px solid var(--fg-green);
	border-radius: 0 0 var(--fg-radius) var(--fg-radius);
}

@media (min-width: 900px) {
	.fg-servizio-indice {
		position: sticky;
		top: calc(var(--fg-header-h, 4.25rem) + 1rem);
	}
}

.fg-servizio-indice__titolo {
	margin: 0 0 var(--fg-s2, 1rem);
	font-family: var(--fg-font-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-grey-600);
}

.fg-servizio-indice__elenco {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fg-indice;
}

.fg-servizio-indice__elenco li {
	counter-increment: fg-indice;
	border-top: 1px solid var(--fg-grey-200);
}

.fg-servizio-indice__elenco li:first-child {
	border-top: 0;
}

/* L'indice è la scorciatoia di una pagina che su telefono è alta 10.000px:
   deve essere comodo da centrare col pollice. 44px di altezza minima. */
.fg-servizio-indice__elenco a {
	display: flex;
	align-items: center;
	gap: var(--fg-s2, 1rem);
	min-height: 2.75rem;
	padding: .55rem 0;
	color: var(--fg-black);
	font-size: .9375rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--fg-transition), transform var(--fg-transition);
}

.fg-servizio-indice__elenco a::before {
	content: counter(fg-indice, decimal-leading-zero);
	flex: none;
	font-family: var(--fg-font-display);
	font-weight: 700;
	font-size: .8125rem;
	color: var(--fg-orange);
}

.fg-servizio-indice__elenco a:hover,
.fg-servizio-indice__elenco a:focus-visible {
	color: var(--fg-orange-text, #B35310);
	transform: translateX(3px);
}

/* -----------------------------------------------------------------------------
   8. Landing — blocchi di contenuto
   -------------------------------------------------------------------------- */

.fg-servizio-blocco {
	padding-block: clamp(var(--fg-s5, 3rem), 6vw, var(--fg-s6, 4rem));
}

.fg-servizio-blocco__inner {
	display: grid;
	gap: var(--fg-s4, 2rem);
	align-items: center;
}

/* Dai 720px il blocco con foto si affianca: sul tablet verticale una foto 4:3
   larga quanto il contenitore era alta oltre 500px e spingeva il testo fuori
   schermo a ogni sezione. La colonna della foto resta la minore. */
@media (min-width: 720px) {
	.fg-servizio-blocco--media .fg-servizio-blocco__inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
		gap: var(--fg-s4, 2rem);
	}

	/* `order: -1` sposta la foto nella PRIMA cella, che è la più larga: nei
	   blocchi invertiti la foto si prendeva la colonna grande e il testo quella
	   stretta (a 768px: foto 437px, testo 235px). Invertendo anche le tracce la
	   proporzione resta quella giusta da entrambi i lati. */
	.fg-servizio-blocco--media.fg-servizio-blocco--invertito .fg-servizio-blocco__inner {
		grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
	}

	.fg-servizio-blocco--invertito .fg-servizio-blocco__media {
		order: -1;
	}
}

@media (min-width: 900px) {
	.fg-servizio-blocco--media .fg-servizio-blocco__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		gap: var(--fg-s6, 4rem);
	}

	.fg-servizio-blocco--media.fg-servizio-blocco--invertito .fg-servizio-blocco__inner {
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	}
}

.fg-servizio-blocco__titolo {
	margin: 0 0 var(--fg-s3, 1.5rem);
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
	line-height: 1.15;
}

.fg-servizio-blocco__indice {
	display: block;
	margin-bottom: var(--fg-s1, .5rem);
	font-size: .875rem;
	letter-spacing: .16em;
	color: var(--fg-orange);
}

.fg-servizio-blocco__paragrafo {
	margin: 0;
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--fg-grey-900);
}

/* Capoversi successivi dentro lo stesso blocco. */
.fg-servizio-blocco__corpo > .fg-servizio-blocco__paragrafo + .fg-servizio-blocco__paragrafo {
	margin-top: var(--fg-s3, 1.5rem);
}

.fg-servizio-blocco__elenco {
	margin-top: var(--fg-s4, 2rem);
	max-width: 68ch;
}

.fg-servizio-blocco__elenco li {
	margin-bottom: var(--fg-s2, 1rem);
	line-height: 1.6;
}

/* Elenco su due colonne solo quando il blocco è a piena larghezza. */
@media (min-width: 900px) {
	.fg-servizio-blocco:not(.fg-servizio-blocco--media) .fg-servizio-blocco__elenco {
		max-width: none;
		columns: 2;
		column-gap: var(--fg-s6, 4rem);
	}

	.fg-servizio-blocco:not(.fg-servizio-blocco--media) .fg-servizio-blocco__elenco li {
		break-inside: avoid;
	}
}

/* Blocchi di solo testo: titolo a sinistra, paragrafo a destra. Spezza la
   sequenza di paragrafi tutti uguali e non lascia mezza fascia vuota. */
@media (min-width: 900px) {
	.fg-servizio-blocco--solo-testo .fg-servizio-blocco__testo {
		display: grid;
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: var(--fg-s6, 4rem);
		align-items: start;
	}

	.fg-servizio-blocco--solo-testo .fg-servizio-blocco__titolo {
		margin: 0;
	}

	.fg-servizio-blocco--solo-testo .fg-servizio-blocco__paragrafo {
		max-width: 62ch;
	}
}

.fg-servizio-blocco__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fg-radius);
	aspect-ratio: 4 / 3;
	box-shadow: var(--fg-shadow);
}

.fg-servizio-blocco__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.fg-servizio-blocco__media:hover .fg-servizio-blocco__img {
	transform: scale(1.04);
}

/* -----------------------------------------------------------------------------
   8b. Landing — tabelle dentro i contenuti

   Markup e stile base delle tabelle di servizio stanno in inc/servizi-content.php
   (proprietario: agente SEO). Non si tocca quel file: qui si aggiunge solo ciò che
   serve sul telefono, con selettori più specifici così l'ordine di stampa dello
   <style> in linea non conta.

   Le tabelle sono la prima causa di scroll orizzontale su telefono. Questo sito
   non ne soffre (il contenitore ritaglia), ma il difetto opposto è altrettanto
   grave: a 360px l'ultima colonna della tabella era invisibile e NIENTE diceva
   che si potesse scorrere. Due correttivi: la tabella si stringe quanto può e il
   bordo destro sfuma, così si vede che il contenuto continua.
   -------------------------------------------------------------------------- */

.fg-pagina--servizio .fg-tabella-scroll,
.fg-pagina--servizi .fg-tabella-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

@media (max-width: 47.99em) {
	.fg-pagina--servizio .fg-tabella-scroll,
	.fg-pagina--servizi .fg-tabella-scroll {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), rgba(0, 0, 0, .25));
		mask-image: linear-gradient(to right, #000 calc(100% - 2rem), rgba(0, 0, 0, .25));
	}

	/* La maschera velerebbe anche il contorno di focus del contenitore. */
	.fg-pagina--servizio .fg-tabella-scroll:focus-visible,
	.fg-pagina--servizi .fg-tabella-scroll:focus-visible {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* 32rem di min-width a 320px significa metà tabella fuori campo. Con celle
	   più strette e corpo più piccolo il testo resta leggibile e la porzione
	   nascosta si dimezza. */
	.fg-pagina--servizio .fg-tabella,
	.fg-pagina--servizi .fg-tabella {
		min-width: 26rem;
		font-size: .875rem;
	}

	.fg-pagina--servizio .fg-tabella th,
	.fg-pagina--servizio .fg-tabella td,
	.fg-pagina--servizi .fg-tabella th,
	.fg-pagina--servizi .fg-tabella td {
		padding: .625rem .75rem;
	}

	.fg-pagina--servizio .fg-tabella thead th,
	.fg-pagina--servizi .fg-tabella thead th {
		font-size: .75rem;
	}
}

/* Rete di sicurezza: qualunque tabella arrivi nei contenuti senza il contenitore
   scorrevole non deve poter allargare la pagina. */
.fg-pagina--servizio .fg-content table:not(.fg-tabella),
.fg-pagina--servizio .fg-servizio-blocco table:not(.fg-tabella),
.fg-pagina--servizi .fg-content table:not(.fg-tabella) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

/* -----------------------------------------------------------------------------
   9. Landing — striscia foto (solo se restano immagini non usate nei blocchi)
   -------------------------------------------------------------------------- */

.fg-servizio-striscia__griglia {
	display: grid;
	gap: var(--fg-s3, 1.5rem);
}

@media (min-width: 700px) {
	.fg-servizio-striscia__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fg-servizio-striscia__griglia--1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.fg-servizio-striscia__griglia--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.fg-servizio-striscia__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fg-radius);
	aspect-ratio: 4 / 3;
}

.fg-servizio-striscia__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.fg-servizio-striscia__item:hover .fg-servizio-striscia__img {
	transform: scale(1.04);
}

/* -----------------------------------------------------------------------------
   9b. Landing — carosello fotografico di reparto (template-parts/slider)
   Il componente porta già il proprio CSS (slider.css): qui si regola solo il
   suo inserimento nella pagina, senza ridefinire lo slider.
   -------------------------------------------------------------------------- */

/* La testata del carosello (occhiello + titolo) segue la stessa misura di
   lettura degli altri titoli di sezione della landing. */
.fg-servizio-slider .fg-slider__head {
	max-width: 46rem;
}

/* -----------------------------------------------------------------------------
   10. Landing — FAQ (su fondo scuro)
   -------------------------------------------------------------------------- */

.fg-servizio-faq__inner {
	display: grid;
	gap: var(--fg-s4, 2rem);
	align-items: start;
}

@media (min-width: 900px) {
	.fg-servizio-faq__inner {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: var(--fg-s6, 4rem);
	}

	.fg-servizio-faq__intestazione {
		position: sticky;
		top: calc(var(--fg-header-h, 4.25rem) + 1rem);
	}
}

.fg-servizio-faq__intestazione .fg-title {
	margin: var(--fg-s1, .5rem) 0 0;
}

.fg-servizio-faq .fg-faq {
	max-width: none;
	border-top: 0;
}

.fg-servizio-faq .fg-faq__item {
	margin-bottom: var(--fg-s2, 1rem);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--fg-radius);
	transition: border-color var(--fg-transition), background-color var(--fg-transition);
}

.fg-servizio-faq .fg-faq__item:last-child {
	margin-bottom: 0;
}

.fg-servizio-faq .fg-faq__item:hover,
.fg-servizio-faq .fg-faq__item[open] {
	background: rgba(255, 255, 255, .09);
	border-color: var(--fg-orange);
}

.fg-servizio-faq .fg-faq__domanda {
	gap: var(--fg-s2, 1rem);
	padding: var(--fg-s2, 1rem) var(--fg-s3, 1.5rem);
	color: var(--fg-white);
	font-size: 1.0625rem;
}

.fg-servizio-faq .fg-faq__domanda::before {
	border-color: var(--fg-orange);
	transition: transform .3s ease;
}

.fg-servizio-faq .fg-faq__risposta {
	padding: 0 var(--fg-s3, 1.5rem) var(--fg-s3, 1.5rem);
	color: rgba(255, 255, 255, .8);
}

.fg-servizio-faq .fg-faq__risposta p {
	margin: 0;
	max-width: 68ch;
	line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   11. Landing — altri reparti e nota finale
   -------------------------------------------------------------------------- */

.fg-servizio-altri__intestazione {
	margin-bottom: var(--fg-s4, 2rem);
}

.fg-servizio-altri__intestazione .fg-title {
	margin: 0;
}

.fg-servizio-altri__griglia {
	display: grid;
	gap: var(--fg-s3, 1.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.fg-servizio-altri__griglia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Con sei servizi la landing corrente ne esclude uno e ne restano cinque: in
	   griglia a due colonne l'ultima card resterebbe sola e spaiata sulla riga.
	   Quando il numero di card è dispari (l'ultima cade in posizione dispari) la
	   si fa attraversare entrambe le colonne e la si centra, larga come una card:
	   la riga finale risulta bilanciata invece di avere un vuoto a destra. */
	.fg-servizio-altri__griglia > .fg-service-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: calc(50% - (var(--fg-s3, 1.5rem) / 2));
	}
}

.fg-servizio-altri__link {
	margin: var(--fg-s4, 2rem) 0 0;
}

.fg-servizio-nota {
	padding-block: clamp(var(--fg-s5, 3rem), 6vw, var(--fg-s6, 4rem));
}

.fg-servizio-nota__box {
	margin: 0;
	padding: var(--fg-s4, 2rem);
	max-width: 70ch;
	background: var(--fg-grey-100);
	border-left: 4px solid var(--fg-green);
	border-radius: 0 var(--fg-radius) var(--fg-radius) 0;
	font-family: var(--fg-font-display);
	font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--fg-black);
}

/* -----------------------------------------------------------------------------
   12. Riduzione del movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fg-service-card,
	.fg-service-card__img,
	.fg-service-card__velo,
	.fg-service-card__freccia,
	.fg-reparto,
	.fg-reparto__img,
	.fg-reparto__titolo a,
	.fg-servizi-marchi__elenco li,
	.fg-servizio-indice__elenco a,
	.fg-servizio-blocco__img,
	.fg-servizio-striscia__img,
	.fg-servizio-faq .fg-faq__item,
	.fg-servizio-faq .fg-faq__domanda::before {
		transition: none;
	}

	.fg-service-card:hover,
	.fg-service-card:hover .fg-service-card__img,
	.fg-service-card:focus-within .fg-service-card__img,
	.fg-service-card:hover .fg-service-card__freccia,
	.fg-service-card:focus-within .fg-service-card__freccia,
	.fg-reparto:hover .fg-reparto__img,
	.fg-servizi-marchi__elenco li:hover,
	.fg-servizio-indice__elenco a:hover,
	.fg-servizio-blocco__media:hover .fg-servizio-blocco__img,
	.fg-servizio-striscia__item:hover .fg-servizio-striscia__img {
		transform: none;
	}

	.fg-servizio-indice,
	.fg-servizio-faq__intestazione {
		position: static;
	}
}