/* ISF — pagina iniziale.
   Impianto del riferimento adottato in D-241: fascia di apertura con fotografia
   e riquadri, quattro schede di servizio sovrapposte, metodo in tre passi,
   ricerca, contatto.

   Le fotografie portano il trattamento B scelto in D-241 — saturazione 72%,
   contrasto +8%, velatura del blu al 14%. Oggi e' applicato qui, in resa; alla
   generazione delle varianti per dimensione si cuoce nei file e queste regole
   cadono. */

.isf-home {
	--isf-largo: 77.5rem;      /* 1240px, il contenitore del riferimento */
	--isf-gutter: 3.5rem;      /* 56px per lato */

	/* WordPress separa i blocchi di primo livello con il blockGap del tema, che
	   qui vale 22px: fra la testata blu e la fascia scura quella riga si vede
	   come una striscia bianca. Misurata, non stimata. Sulle altre pagine non
	   si nota perche' il contenuto e' bianco come lei, quindi la regola resta
	   ristretta alla pagina iniziale. */
	margin-block-start: 0;
}

/* Senza questo min-height e padding si sommano, e la fascia di apertura cresce
   di tutto il suo padding: misurata a 1050px invece dei 740 dichiarati, con la
   conseguenza che riquadri e schede finiscono entrambi sotto la piega — cioe'
   esattamente la condizione che D-242 voleva evitare. Il riferimento lo
   dichiara nel proprio foglio; il tema padre non lo estende fin qui. */
.isf-home :where(.isf-vetrina, .isf-vetrina__dentro, .isf-riquadro, .isf-carta) {
	box-sizing: border-box;
}

/* Il contenitore condiviso dalle sezioni che non sfondano i margini. */
.isf-carte,
.isf-metodo,
.isf-contatto__dentro,
.isf-cerca-fascia__dentro,
.isf-news__testa,
.isf-news__elenco {
	width: calc(100% - var(--isf-gutter) * 2);
	max-width: var(--isf-largo);
	margin-inline: auto;
}

/* ── Fascia di apertura ──────────────────────────────────────────────── */

.isf-vetrina {
	position: relative;
	isolation: isolate;
	background: var(--wp--preset--color--tertiary);
	color: #fff;
	min-height: 46.25rem;      /* 740px */
	overflow: hidden;
}

/* La fotografia si adatta all'ALTEZZA della fascia e tiene il proprio rapporto,
   invece di essere ingrandita per coprire la larghezza: con «cover» piu' lo
   schermo e' largo piu' la scena avanza, e la lavagna finisce in primo piano.
   Cosi' la scala resta la stessa a ogni larghezza.

   L'immagine e' allineata a destra e sborda un poco di la', dove non c'e'
   niente da perdere; a sinistra il bordo non si taglia netto ma svanisce nel
   fondo, e il titolo copre comunque quella zona. Le tre misure sono variabili
   perche' si regolano guardando, non calcolando. */
.isf-vetrina__sfondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.isf-vetrina__sfondo img {
	height: var(--isf-vetrina-altezza, 100%);
	width: auto;
	max-width: none;
	margin-right: var(--isf-vetrina-sbordo, -3%);
	object-fit: cover;
	display: block;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--isf-vetrina-sfumatura, 18%));
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--isf-vetrina-sfumatura, 18%));
}

/* Il velo: il terzo sinistro quasi opaco, perche' il testo ci vive sopra.
   Misurato: 95% a sinistra, 76% al 33%, 8% al 72%. */
.isf-vetrina__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #052340f2, #052340c2 33%, #05234015 72%);
}

.isf-vetrina__dentro {
	position: relative;
	z-index: 2;
	width: calc(100% - var(--isf-gutter) * 2);
	max-width: var(--isf-largo);
	margin-inline: auto;
	min-height: 46.25rem;
	padding-block: 4.6875rem 16.25rem;   /* 75px sopra, 260px sotto per i riquadri */
	display: block;
}

.isf-vetrina__testo {
	max-width: 38.125rem;      /* 610px */
}

.isf-vetrina .isf-occhiello {
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.75rem;
}

.isf-vetrina__motto {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: #fff;
}

.isf-vetrina__riga {
	display: block;
}

.isf-vetrina__riga--oro {
	color: var(--wp--preset--color--secondary);
}

.isf-vetrina__intro {
	font-size: var(--wp--preset--font-size--large);
	max-width: 33.4375rem;     /* 535px: la riga resta corta anche se la pagina e' larga */
	margin-top: 1.5625rem;
	line-height: 1.65;
	color: #edf3f8;
}

.isf-vetrina__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem;
	margin-top: 1.875rem;
}

/* ── I quattro riquadri: porte, non decorazione (D-242) ──────────────── */

.isf-riquadri {
	position: absolute;
	right: 0;
	bottom: 4.375rem;
	width: 62%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

.isf-riquadro {
	--isf-abbinato: 0;
	position: relative;
	display: block;
	height: 10.9375rem;        /* 175px */
	border: 4px solid #fff;
	box-shadow: 0 0.5rem 1.25rem rgba(5, 35, 64, 0.31);
	overflow: hidden;
	text-decoration: none;
	outline-color: var(--wp--preset--color--secondary);
	transform: translateY(calc(var(--isf-abbinato) * -0.3125rem));
}

.isf-riquadro img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
	display: block;
}

.isf-riquadro__nome {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem 0.625rem 0.5rem;
	background: linear-gradient(transparent, #052340e8);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.25;
}

/* ── Le quattro schede, sovrapposte al bordo della fascia ────────────── */
/* La sovrapposizione non e' estetica: porta le schede sopra la piega insieme
   ai riquadri, che e' la condizione perche' l'abbinamento si veda (D-242). */

.isf-carte {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.125rem;
	margin-top: -2.8125rem;    /* -45px */
	padding: 0;
	list-style: none;
}

.isf-carte > li {
	display: flex;
}

.isf-carta {
	--isf-abbinato: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-top: 4px solid;
	border-top-color: color-mix(
		in srgb,
		var(--wp--preset--color--secondary) calc(var(--isf-abbinato) * 100%),
		var(--wp--preset--color--primary)
	);
	padding: 1.6875rem 1.5625rem 1.75rem;
	box-shadow:
		0 0.625rem 2.8125rem rgba(5, 35, 64, 0.05),
		0 calc(var(--isf-abbinato) * 0.875rem) calc(var(--isf-abbinato) * 2rem) rgba(5, 35, 64, 0.09);
	transform: translateY(calc(var(--isf-abbinato) * -0.3125rem));
	scroll-margin-top: 2.1875rem;
}

.isf-carta__nome {
	font-size: var(--wp--preset--font-size--large);
	margin: 0.25rem 0 0.75rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.025em;
	line-height: 1.18;
}

/* Tutta la scheda e' il collegamento (D-270): il link sta sul titolo e il suo
   ::after copre la scheda. Il nome del link resta la sola materia. */
.isf-carta {
	position: relative;
}

.isf-carta__link {
	color: inherit;
	text-decoration: none;
}

.isf-carta__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.isf-carta__link:focus-visible {
	outline: none;
}

.isf-carta:has(.isf-carta__link:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* La sottolineatura gialla e la freccia che scatta seguono la stessa
   variabile dell'abbinamento con i riquadri: passare sulla foto di una materia
   muove anche la sua scheda, come passare sulla scheda. */
.isf-carta__testo {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	text-decoration-color: color-mix(
		in srgb,
		var(--wp--preset--color--secondary) calc(var(--isf-abbinato) * 100%),
		transparent
	);
}

/* La freccia segue l'ultima parola del titolo, ovunque vada a capo, e non si
   separa da lei. */
.isf-carta__coda {
	white-space: nowrap;
}

.isf-carta__freccia {
	display: inline-block;
	width: 0.95rem;
	height: 0.95rem;
	margin-inline-start: 0.4rem;
	vertical-align: -0.05em;
	color: color-mix(in srgb, #c89f00 calc(var(--isf-abbinato) * 100%), var(--wp--preset--color--primary));
	transform: translate(calc(var(--isf-abbinato) * 0.2rem), calc(var(--isf-abbinato) * -0.1rem));
}

.isf-carta__riga {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin: 0;
	color: var(--wp--preset--color--foreground);
}


/* ── Metodo ──────────────────────────────────────────────────────────── */

.isf-metodo {
	padding-block: 6.5625rem;
	display: grid;
	grid-template-columns: 0.9fr 1.25fr;
	/* Lo spazio e' fra le colonne, non fra le righe: la nota che chiude la
	   sezione sta sotto i passi e deve restarci vicina. */
	gap: 0 6.25rem;
}

.isf-metodo__testa h2 {
	font-size: var(--wp--preset--font-size--headline);
	margin: 0;
	line-height: 1.13;
	letter-spacing: -0.035em;
	color: var(--wp--preset--color--tertiary);
}

.isf-metodo__testa > p:last-child {
	margin: 1.4375rem 0 0;
	max-width: 24.375rem;
	color: var(--wp--preset--color--foreground-mute);
}

.isf-metodo__passi {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.isf-metodo__passi li {
	display: flex;
	gap: 1.6875rem;
	padding: 1.5625rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.isf-metodo__passi li:first-child {
	padding-top: 0;
}

.isf-metodo__n {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	padding-top: 0.3125rem;
}

.isf-metodo__passi h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	color: var(--wp--preset--color--tertiary);
}

.isf-metodo__passi p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--foreground-mute);
	margin: 0.75rem 0 0;
}

/* La politica precauzionale chiude la sezione: sta sotto i tre passi e non
   accanto a loro, perche' e' il criterio che li attraversa e non un quarto
   passo. Il segno giallo e' lo stesso che il sito usa per le note che contano. */
.isf-precauzione {
	grid-column: 2;
	margin-top: 2.25rem;
	padding: 1.375rem 1.5rem;
	background: var(--wp--preset--color--surface-warm);
	border-left: 4px solid var(--wp--preset--color--secondary);
}

.isf-precauzione h3 {
	font-size: var(--wp--preset--font-size--body);
	margin: 0;
	color: var(--wp--preset--color--tertiary);
	line-height: 1.3;
}

.isf-precauzione p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	margin: 0.625rem 0 0;
	color: var(--wp--preset--color--foreground);
}

/* ── Notizie ─────────────────────────────────────────────────────────── */
/* La sezione sta in una fascia piena, e non e' decorazione: delimita, e
   soprattutto spezza. Senza uno stacco la pagina scorre piatta.

   Il fondo e' il GIALLO del marchio, ed e' una prova: il fondo si cambia da
   qui, sulla sola riga che lo dichiara. L'alternativa gia' in tavolozza e'
   `surface-warm`, il giallo tenue (#FEF9DF), che e' crema e non giallo: dice
   una cosa piu' quieta. La terza via e' tornare a `tertiary`, il blu profondo
   che c'era fino al 2026-09-22.

   Il giallo non sta da solo: e' incorniciato fra la fascia del contatto sopra
   e il piede sotto, entrambi blu profondo. Appoggiato fra due bianchi
   sembrerebbe capitato li'.

   TRE COLORI CAMBIANO CON IL FONDO, e non sono preferenza: su giallo il titolo
   bianco scendeva a 1,7:1, il rimando giallo spariva del tutto e il filetto
   giallo della scheda pure. Chi riporta il fondo a `tertiary` riporta indietro
   anche quei tre, che sono marcati qui sotto. */

/* margin-block-start a zero: la fascia delle notizie segue quella scura del
   contatto, e il blockGap del tema (22px, misurato) fra le due si vedeva come
   una riga bianca. Stesso difetto e stessa cura della testata, in cima a
   questo foglio (D-271). */
.isf-news {
	--isf-news-fondo: var(--wp--preset--color--secondary);

	width: 100%;
	max-width: none;
	margin-inline: 0;
	margin-block-start: 0;
	background: var(--isf-news-fondo);
	padding-block: var(--wp--preset--spacing--70);
}

.isf-news__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

/* 1 di 3 — legato al fondo. Su blu profondo era #fff. */
.isf-news h2 {
	font-size: var(--wp--preset--font-size--headline);
	color: var(--wp--preset--color--tertiary);
	margin: 0;
	letter-spacing: -0.03em;
}

/* Dice che le notizie non finiscono qui, ed e' l'unica via verso la pagina
   che le raccoglie tutte.
   2 di 3 — legato al fondo. Su blu profondo era `secondary`, che sul giallo
   sarebbe giallo su giallo. */
.isf-news__tutte {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	white-space: nowrap;
}

.isf-news__tutte:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

/* Il selettore e' piu' specifico di proposito: sito.css azzera i margini
   dell'elenco — la' e' giusto, perche' la scheda vive anche altrove — e senza
   questo la prima scheda sborda a sinistra rispetto al titolo. */
.isf-news .isf-news__elenco {
	width: calc(100% - var(--isf-gutter) * 2);
	max-width: var(--isf-largo);
	margin: var(--wp--preset--spacing--50) auto 0;
}

/* 3 di 3 — legato al fondo. Su blu profondo la scheda perdeva il filetto blu,
   che vi sparirebbe, e prendeva quello del marchio. Sul giallo vale
   l'inverso, quindi il filetto torna a quello di sito.css: la regola resta
   scritta per essere trovata da chi cambia il fondo, non perche' serva. */
.isf-news .isf-news__voce a {
	border-block-start-color: var(--wp--preset--color--primary);
}

/* ── Ricerca ─────────────────────────────────────────────────────────── */

.isf-cerca-fascia {
	background: var(--wp--preset--color--surface);
	padding-block: 3.25rem;
}

.isf-cerca-fascia__dentro {
	display: flex;
	justify-content: space-between;
	gap: 2.8125rem;
	align-items: center;
}

.isf-cerca-fascia__titolo {
	font-size: var(--wp--preset--font-size--headline);
	margin: 0;
	color: var(--wp--preset--color--tertiary);
	letter-spacing: -0.03em;
}

.isf-cerca-fascia .isf-occhiello {
	margin-bottom: 0.5rem;
}

.isf-cerca-fascia .isf-cerca {
	width: 50%;
	max-width: 33.75rem;
	margin: 0;
}

/* ── Contatto ────────────────────────────────────────────────────────── */

/* Fascia orizzontale su fondo scuro, non piu' sezione dentro il contenitore.
   Impianto identico a quello della ricerca — fuori sfonda, dentro un
   contenitore costretto — perche' due fasce che si comportano diversamente si
   notano, e non in bene.

   Il fondo scuro qui ha una funzione in piu' del delimitare: la fascia sta
   subito sopra le notizie, che sono gialle, e il giallo va incorniciato. Fra
   questa fascia e il piede, anch'esso blu profondo, il giallo risulta inserito
   fra due scuri invece che appoggiato a caso. */
/* Ridotta il 2026-09-22 su indicazione dell'utente (D-272): era alta 390px su
   desktop, con il titolo su due righe. Margini interni da 70 a 48px, titolo su
   una riga sola. */
.isf-contatto {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	background: var(--wp--preset--color--tertiary);
	padding-block: 3rem;
}

.isf-contatto__dentro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.8125rem;
}

.isf-contatto__testo {
	flex: 1 1 28rem;
}

.isf-contatto__azione {
	margin: 0;
	flex: 0 0 auto;
}

/* Sul fondo scuro l'occhiello perde il blu, che vi sparirebbe dentro, e prende
   il giallo del marchio: lo stesso scambio che la scheda di notizia fa col
   proprio filetto. */
.isf-contatto .isf-occhiello {
	color: var(--wp--preset--color--secondary);
	margin-bottom: 0.75rem;
}

.isf-contatto h2 {
	font-size: var(--wp--preset--font-size--headline);
	margin: 0;
	line-height: 1.13;
	letter-spacing: -0.03em;
	color: #fff;
}

.isf-contatto__riga {
	max-width: 44rem;
	margin: 0.75rem 0 0;
	color: #cddbe6;
}

/* ── Trattamento B sulle fotografie (D-241) ──────────────────────────── */

.isf-vetrina__sfondo img,
.isf-riquadro img {
	filter: saturate(0.72) contrast(1.08) brightness(1.02);
}

.isf-vetrina__sfondo::after,
.isf-riquadro::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	opacity: 0.14;
	mix-blend-mode: color;
	pointer-events: none;
}

/* ── Movimento: sempre un di piu', mai una condizione ────────────────── */

@media (hover: hover) and (pointer: fine) {
	.isf-carta,
	.isf-riquadro {
		transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	}

	.isf-carta__testo {
		transition: text-decoration-color 0.22s ease;
	}

	.isf-carta__freccia {
		transition: transform 0.22s ease, color 0.22s ease;
	}

	/* La scheda si accende anche passandoci sopra, non solo dal riquadro. */
	.isf-carta:hover {
		--isf-abbinato: 1;
	}
}

/* Da tastiera la scheda si accende sempre: il fuoco non dipende dal puntatore. */
.isf-carta:focus-within {
	--isf-abbinato: 1;
}

@media (prefers-reduced-motion: reduce) {
	.isf-carta,
	.isf-riquadro,
	.isf-carta__freccia {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Adattamento ─────────────────────────────────────────────────────── */

@media (max-width: 71.875rem) {
	.isf-home {
		--isf-gutter: 2rem;
	}

	.isf-riquadri {
		width: 70%;
	}

	.isf-metodo {
		gap: 0 3.4375rem;
	}

	.isf-contatto {
		gap: 4.0625rem;
	}
}

@media (max-width: 56.25rem) {
	.isf-carte {
		grid-template-columns: 1fr 1fr;
	}

	.isf-metodo {
		grid-template-columns: 1fr;
		gap: 2.375rem;
		padding-block: 4.0625rem;
	}

	/* A una colonna la seconda colonna non esiste: la nota torna in riga. */
	.isf-precauzione {
		grid-column: 1;
		margin-top: 0;
	}

	.isf-cerca-fascia__dentro {
		display: block;
	}

	.isf-cerca-fascia .isf-cerca {
		width: 100%;
		max-width: none;
		margin-top: 1.5rem;
	}

	/* La fascia si impila: il richiamo scende sotto il testo invece di
	   stringerlo a meta' larghezza. */
	.isf-contatto {
		padding-block: 2.5rem;
	}

	.isf-contatto__dentro {
		display: block;
	}

	.isf-contatto__azione {
		margin-top: 1.5rem;
	}

	.isf-news__elenco {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 37.5rem) {
	.isf-home {
		--isf-gutter: 1.125rem;
	}

	.isf-vetrina,
	.isf-vetrina__dentro {
		min-height: 0;
	}

	.isf-vetrina__dentro {
		padding-block: 3rem 2rem;
	}

	.isf-vetrina__velo {
		background: linear-gradient(0deg, #052340f5 0%, #052340cc 55%, #05234066 100%);
	}

	/* I riquadri escono dalla sovrapposizione e diventano una griglia in
	   colonna: a questa larghezza quattro finestre affiancate sono illeggibili. */
	.isf-riquadri {
		position: static;
		width: 100%;
		grid-template-columns: 1fr 1fr;
		margin-top: 1.75rem;
	}

	.isf-riquadro {
		height: 7.5rem;
		border-width: 3px;
	}

	.isf-carte {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		margin-top: 0;
		border: 1px solid var(--wp--preset--color--rule);
	}

	.isf-carta {
		padding: 1.5rem 1.125rem;
		border-top-width: 3px;
		box-shadow: none;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.isf-carta:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--rule);
	}

	.isf-contatto {
		padding-block: 2.5rem;
	}
}