/* ISF — la pagina delle notizie.
   Stesso impianto della pagina di materia: titolo, filtro in testa, elenco
   sotto. La scheda di notizia non si veste qui: vive in sito.css, perché è la
   stessa componente che compare anche in pagina iniziale. */

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

.isf-notizie__dentro {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

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

.isf-notizie-testa h1 {
	margin: 0;
}

.isf-notizie-testa__riga {
	max-width: 44rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--foreground-alt);
}

.isf-notizie-testa__conto {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ── Filtro ──────────────────────────────────────────────────────────── */
/* Il riquadro porta `hidden` finché lo script non lo accende: un comando che
   non filtra sarebbe peggio di nessun comando. */

.isf-notizie-filtro {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border-block-start: 3px solid var(--wp--preset--color--primary);
}

.isf-notizie-filtro[hidden] {
	display: none;
}

.isf-notizie-filtro__titolo {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--tertiary);
}

/* Un comando senza istruzioni viene usato male o non viene usato. */
.isf-notizie-filtro__come {
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
}

.isf-notizie-filtro__cerca {
	margin-block-start: var(--wp--preset--spacing--40);
}

.isf-notizie-filtro__cerca input {
	width: 100%;
	max-width: 30rem;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	border: 1px solid #c3d0d9;
	border-radius: 3px;
	background: #fff;
}

.isf-notizie-filtro__assi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Con due assi le voci non bastano a dire su che cosa si sta scegliendo:
   «Approfondimento» e «Formazione» sono parole dello stesso registro. Il nome
   dell'asse e' aria-hidden perche' il gruppo lo porta gia' nel proprio
   aria-label, e chi legge con la voce lo sentirebbe due volte. */
.isf-notizie-filtro__asse-nome {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-mute);
	margin-inline-end: 0.125rem;
}

.isf-filtro-voce {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border: 1px solid #c3d0d9;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.isf-filtro-voce:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Lo stato scelto si vede senza affidarsi al solo colore: cambia anche il
   peso del bordo, che resta leggibile a chi distingue male i colori. */
.isf-filtro-voce[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.isf-notizie-filtro__esito {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground-mute);
	min-height: 1.4em;
}

/* ── Elenco ──────────────────────────────────────────────────────────── */

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

.isf-notizie-elenco > li[hidden] {
	display: none;
}

.isf-notizie-vuoto {
	margin-block-start: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--foreground-mute);
}

@media (max-width: 37.5rem) {
	.isf-notizie-filtro__assi {
		gap: 0.4rem;
	}
}