/* ISF — l'articolo di news.
   Prosa, quindi la misura di riga e' quella della scheda: il contentSize del
   tema, 44rem, con il corpo a 18px che D-224 ha fissato. Niente colonna di
   fianco: una notizia si legge di seguito. */

.isf-articolo {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* Testa, figura, impianto e coda condividono un solo contenitore: senza questo
   il titolo resta centrato sulla pagina mentre il corpo, dentro la griglia a
   due colonne, parte piu' a sinistra — e l'occhio trova l'inizio della riga in
   due punti diversi. Lo stesso schema della scheda, e per la stessa ragione. */
.isf-articolo__testa,
.isf-articolo__figura,
.isf-articolo__impianto,
.isf-articolo__coda {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Il layout del nucleo centra ogni figlio piu' stretto del contenitore. Qui
   non lo vogliamo: il !important non e' una preferenza, risponde a quello che
   il nucleo mette sugli stessi margini. */
.isf-articolo__testa > *,
.isf-articolo__figura > * {
	margin-inline: 0 !important;
}

.isf-articolo__testa,
.isf-articolo__testa > *,
.isf-articolo .wp-block-post-title,
.isf-articolo__sommario {
	text-align: left;
}

/* ── Testa ───────────────────────────────────────────────────────────── */

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

/* Le briciole stanno in sito.css: sono di tre sedi, non di questa. */

/* La data non e' un dettaglio di corredo: per una notizia, sapere quando e'
   stata scritta e' meta' dell'informazione. */
.isf-articolo-data {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* Date and signature each stay whole; on a narrow screen the signature goes
   to the next line instead of breaking inside. */
.isf-articolo-data time,
.isf-articolo-firma {
	white-space: nowrap;
}

/* The signature of the organisation (D-505): beside the date, quieter than it. */
.isf-articolo-firma {
	font-weight: 400;
}

/* On a phone the signature takes its own line, without the separator that
   would otherwise open it. */
@media (max-width: 40rem) {
	.isf-articolo-firma {
		display: block;
	}
	.isf-articolo-firma .isf-sep {
		display: none;
	}
}

.isf-articolo__testa .wp-block-post-title {
	margin-block-start: var(--wp--preset--spacing--40);
}

.isf-articolo__sommario {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--foreground-alt);
	margin-block-start: var(--wp--preset--spacing--30);
	text-align: left;
}

/* ── L'avviso di stato: solo su un articolo superato (D-078) ─────────── */

.isf-articolo-superato {
	background: var(--wp--preset--color--surface-warm);
	border: 1px solid var(--wp--preset--color--secondary);
	border-left-width: 4px;
	border-radius: 4px;
	padding: 1rem 1.2rem;
	margin-block-end: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.isf-articolo-superato__titolo {
	margin: 0 0 0.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--tertiary);
}

.isf-articolo-superato p {
	margin: 0;
}

.isf-articolo-superato a {
	font-weight: 600;
}

/* ── La figura dell'articolo ─────────────────────────────────────────── */
/* Sta dopo il sommario e prima del corpo: e' lo schema editoriale abituale, e
   sopra il titolo ruberebbe la scena a cio' che la notizia dice. Porta lo
   stesso trattamento delle altre fotografie del sito (D-241), perche' una
   fotografia trattata e una no, nella stessa pagina, si vedono. */

.isf-articolo__figura {
	margin-block-start: var(--wp--preset--spacing--50);
	position: relative;
}

/* Il marchio del genere sull'immagine in evidenza, nella stessa posizione che
   ha sulla scheda in pagina iniziale. Lo scostamento in linea somma il padding
   del contenitore, perche' l'immagine comincia dove quel padding finisce e non
   al bordo del gruppo. */
.isf-genere--su-figura {
	position: absolute;
	z-index: 1;
	inset-block-start: 0.625rem;
	inset-inline-start: calc(var(--wp--preset--spacing--40) + 0.625rem);
}

.isf-articolo__figura .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.isf-articolo__figura img {
	filter: saturate(0.72) contrast(1.08) brightness(1.02);
	display: block;
}

.isf-articolo__figura .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	opacity: 0.14;
	mix-blend-mode: color;
	pointer-events: none;
}

/* ── Impianto: corpo e colonna laterale ──────────────────────────────── */
/* Stesso schema della scheda, di proposito: il sito ha un impianto a due
   colonne e non due. Sotto la soglia la griglia torna a una colonna sola e la
   colonna laterale scende in fondo, dove l'articolo l'ha gia' finito. */

.isf-articolo__impianto {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-block-start: var(--wp--preset--spacing--50);
}

.isf-articolo__lato {
	min-width: 0;
	max-width: var(--wp--style--global--content-size);
}

@media (min-width: 71.25rem) {
	.isf-articolo__impianto {
		grid-template-columns: 44rem 22rem;
	}

	/* Il richiamo resta in vista mentre si legge: in fondo sarebbe nascosto,
	   perche' lo vede solo chi e' arrivato in fondo. */
	.isf-articolo__lato {
		max-width: none;
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/* ── Corpo ───────────────────────────────────────────────────────────── */

/* Il gruppo vincolato riceve dal nucleo il padding di radice del tema, che qui
   sposta il corpo di una ventina di pixel rispetto a titolo e figura: il
   contenitore lo porta gia', e portarlo due volte si vede. */
.isf-articolo__corpo {
	min-width: 0;
	padding-inline: 0;
}

.isf-articolo__corpo h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.isf-articolo__corpo h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.isf-articolo__corpo ul,
.isf-articolo__corpo ol {
	padding-inline-start: 1.35rem;
}

.isf-articolo__corpo li + li {
	margin-block-start: 0.4rem;
}

/* Una citazione di norma non e' una citazione letteraria: si stacca con il
   segno del progetto, non con le virgolette grandi del tema padre. */
.isf-articolo__corpo blockquote {
	border-inline-start: 3px solid var(--wp--preset--color--secondary);
	padding-inline-start: 1.1rem;
	margin-inline: 0;
	font-style: normal;
	color: var(--wp--preset--color--foreground-alt);
}

/* ── Fonti ───────────────────────────────────────────────────────────── */
/* Sobrie di proposito: servono a chi vuole verificare, non a chi legge di
   seguito. Corpo piccolo, filetto sopra, nessun colore che le faccia
   competere col testo. */

.isf-articolo-fonti {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.isf-articolo-fonti h2 {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--wp--preset--color--foreground-mute);
	margin: 0 0 0.75rem;
}

.isf-fonti-gruppo + .isf-fonti-gruppo {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Le due famiglie hanno statuto diverso e il titoletto lo dice. Quello degli
   approfondimenti e' piu' tenue: sono utili, non sono la fonte. */
.isf-fonti-gruppo__titolo {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
}

.isf-fonti-gruppo--secondarie .isf-fonti-gruppo__titolo {
	color: var(--wp--preset--color--foreground-mute);
}

.isf-fonti-gruppo__nota {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--foreground-mute);
	font-style: italic;
}

.isf-articolo-fonti ul {
	margin: 0;
	padding-inline-start: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--foreground-mute);
}

.isf-articolo-fonti li + li {
	margin-block-start: 0.4rem;
}

.isf-articolo-fonti a {
	color: var(--wp--preset--color--primary);
}

/* ── Il richiamo, quando la notizia ne ha uno ────────────────────────── */
/* Sta in coda al corpo e non a lato: un articolo si legge fino in fondo, e
   l'invito arriva quando il lettore ha finito, non mentre legge. Facoltativo
   per costruzione (D-229): senza titolo la pagina non lo stampa affatto. */

/* Stesso aspetto del richiamo della scheda: due richiami diversi sullo stesso
   sito sono due cose da tenere in riga. */
.isf-articolo-richiamo {
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
	padding: 1.375rem 1.5rem;
	color: #fff;
}

.isf-articolo-richiamo__titolo {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.isf-articolo-richiamo__testo {
	margin: 0.625rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: #dcebf5;
}

.isf-articolo-richiamo__azione {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Il paragrafo «che cosa fa ISG Formazione» dentro una notizia: evidenziato
   come la nota della scheda (fondo chiaro, filetto blu), ma in tondo e a
   grandezza piena, perche' e' il punto in cui l'articolo parla di noi. */
.isf-articolo__corpo .isf-con-isg {
	background: var(--wp--preset--color--surface);
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	padding: 0.9rem 1.1rem;
	line-height: 1.6;
}

/* Il richiamo dentro il corpo, dopo «Che cosa fare adesso». Su schermo largo
   resta quello a lato, sempre in vista, e la copia nel corpo non si mostra; su
   schermo stretto e' il contrario, cosi' l'invito arriva subito e non in fondo.
   Un articolo senza richiamo nel corpo resta com'era. */
.isf-articolo-richiamo--corpo {
	margin-block: var(--wp--preset--spacing--50);
}

@media (min-width: 71.25rem) {
	.isf-articolo-richiamo--corpo {
		display: none;
	}
}

@media (max-width: 71.2rem) {
	.isf-articolo__impianto:has(.isf-articolo-richiamo--corpo) .isf-articolo__lato {
		display: none;
	}
}

@media print {
	.isf-articolo-richiamo {
		display: none;
	}
}

/* ── Coda: le altre notizie ──────────────────────────────────────────── */

.isf-articolo__coda {
	margin-block-start: var(--wp--preset--spacing--70);
}

.isf-altre-news h2 {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--tertiary);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

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

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

@media (max-width: 37.5rem) {
	.isf-articolo-testa {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}

@media print {
	.isf-articolo__coda {
		display: none;
	}
}