/* =============================================================
   Esplora — ricerca incrociata nell'archivio · versione a pagina
   InfoCollepasso · agosto 2026

   Stesso linguaggio dei componenti editoriali ic-*: nero #1C1C1C,
   arancione #C77800, niente arrotondamenti vistosi.

   Questo foglio si carica SOLO sulla pagina Esplora, quindi puo'
   permettersi selettori semplici senza rischiare di toccare il resto
   del sito.
   ============================================================= */

.ic-esplora-pagina {
	--ic-nero: #1C1C1C;
	--ic-arancio: #C77800;
	--ic-grigio: #6b6b6b;
	--ic-bordo: rgba(0, 0, 0, .14);

	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 16px 60px;
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ic-nero);
}

.ic-esplora-intro h1 {
	margin: 0 0 6px;
	font-size: 28px;
	line-height: 1.2;
}

.ic-esplora-intro p {
	margin: 0 0 18px;
	color: var(--ic-grigio);
	max-width: 62ch;
}

/* -------------------------------------------------------------
   Impianto: filtri a sinistra, risultati a destra.
   Sotto i 900px diventa una colonna sola, con i filtri sopra.
   ------------------------------------------------------------- */
.ic-esplora-griglia {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

@media (max-width: 900px) {
	.ic-esplora-griglia {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Su schermo largo i filtri restano visibili mentre si scorre */
@media (min-width: 901px) {
	.ic-esplora-filtri {
		position: sticky;
		top: 16px;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
		padding-right: 6px;
	}
}

/* -------------------------------------------------------------
   Filtri
   ------------------------------------------------------------- */
.ic-esplora-blocco {
	margin-bottom: 20px;
}

.ic-esplora-blocco h2 {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-grigio);
}

.ic-esplora-nota {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ic-grigio);
}

.ic-esplora-cerca {
	margin-bottom: 20px;
}

.ic-esplora-cerca label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-grigio);
	margin-bottom: 8px;
}

.ic-esplora-cerca input,
.ic-esplora-blocco select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--ic-bordo);
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: inherit;
}

.ic-esplora-cerca input:focus,
.ic-esplora-blocco select:focus {
	outline: 2px solid var(--ic-arancio);
	outline-offset: -2px;
}

.ic-esplora-gettoni {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ic-gettone {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid var(--ic-bordo);
	background: #fff;
	color: var(--ic-nero);
	font: 500 13.5px/1.2 inherit;
	cursor: pointer;
	white-space: nowrap;
}

.ic-gettone small {
	font-size: 11px;
	font-weight: 400;
	color: var(--ic-grigio);
}

.ic-gettone:hover {
	border-color: var(--ic-nero);
}

.ic-gettone[aria-pressed="true"] {
	background: var(--ic-nero);
	border-color: var(--ic-nero);
	color: #fff;
}

.ic-gettone[aria-pressed="true"] small {
	color: rgba(255, 255, 255, .72);
}

/* La natura della fonte cambia il senso di quello che si legge:
   si distingue dagli altri filtri. */
.ic-gettone.ic-natura[aria-pressed="true"] {
	background: var(--ic-arancio);
	border-color: var(--ic-arancio);
}

.ic-esplora-anni {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.ic-esplora-anni input[type="range"] {
	width: 100%;
	accent-color: var(--ic-arancio);
}

.ic-esplora-anni output {
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 600;
	color: var(--ic-nero);
}

.ic-esplora-azzera {
	width: 100%;
	padding: 9px;
	border: 1px solid var(--ic-nero);
	background: #fff;
	font: 600 13px/1 inherit;
	color: var(--ic-nero);
	cursor: pointer;
}

.ic-esplora-azzera:hover {
	background: var(--ic-nero);
	color: #fff;
}

.ic-esplora-azzera[hidden] {
	display: none;
}

/* -------------------------------------------------------------
   La barra delle persone: in cima, a tutta larghezza, orizzontale.

   In colonna centocinquanta nomi mangiavano la pagina. Qui i
   gettoni vanno a capo da soli e, chiusa, la barra non supera
   l'altezza di poche righe: il resto sta dietro al bottone.
   ------------------------------------------------------------- */
.ic-esplora-persone {
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ic-bordo);
}

.ic-esplora-persone-capo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ic-esplora-persone-capo h2 {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ic-grigio);
}

.ic-filtra-persone {
	flex: 0 1 240px;
	min-width: 0;
	box-sizing: border-box;
	padding: 7px 10px;
	border: 1px solid var(--ic-bordo);
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: inherit;
}

.ic-filtra-persone:focus {
	outline: 2px solid var(--ic-arancio);
	outline-offset: -2px;
}

/* Il bottone che apre i nomi minori. Sta in fondo ai gettoni, non
   e' largo tutta la riga come "azzera": qui e' un'aggiunta, non
   un'azione principale. */
.ic-esplora-piu {
	margin-top: 8px;
	padding: 6px 12px;
	border: 1px dashed var(--ic-bordo);
	background: #fff;
	font: 500 13px/1.2 inherit;
	color: var(--ic-arancio);
	cursor: pointer;
}

.ic-esplora-piu:hover {
	border-style: solid;
	border-color: var(--ic-arancio);
}

.ic-esplora-piu[hidden] {
	display: none;
}

/* Aperta, la barra non cresce all'infinito: scorre da sola */
.ic-esplora-persone .ic-esplora-gettoni {
	max-height: 42vh;
	overflow-y: auto;
}

@media (max-width: 700px) {
	.ic-esplora-persone .ic-esplora-gettoni {
		max-height: 34vh;
	}
	.ic-filtra-persone {
		flex: 1 1 100%;
	}
}

/* I temi: stessa barra delle persone, ma i gettoni si distinguono —
   un tema non e' una persona, e mescolarli confonde. */
.ic-esplora-temi .ic-gettone[aria-pressed="true"] {
	background: var(--ic-arancio);
	border-color: var(--ic-arancio);
	color: #fff;
}

.ic-esplora-temi .ic-gettone[aria-pressed="true"] small {
	color: rgba(255, 255, 255, .75);
}

.ic-esplora-temi .ic-esplora-nota {
	margin: 0;
}

.ic-esplora-temi .ic-esplora-gettoni {
	max-height: 34vh;
}

/* -------------------------------------------------------------
   Risultati
   ------------------------------------------------------------- */
.ic-esplora-conta {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ic-nero);
	font-size: 14px;
	color: var(--ic-grigio);
}

.ic-esplora-conta b {
	font-size: 20px;
	color: var(--ic-nero);
	font-variant-numeric: tabular-nums;
}

.ic-esplora-ads-wrap {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid var(--ic-bordo);
	border-radius: 4px;
	background: #fafafa;
}

.ic-esplora-ads-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ic-grigio);
	margin-bottom: 4px;
}

.ic-esito {
	padding: 14px 0;
	border-bottom: 1px solid var(--ic-bordo);
}

.ic-esito-capo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--ic-grigio);
}

.ic-esito-data {
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	white-space: nowrap;
}

.ic-esito-filone {
	color: var(--ic-arancio);
	font-weight: 700;
}

a.ic-esito-titolo {
	display: block;
	color: var(--ic-nero);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

a.ic-esito-titolo:hover,
a.ic-esito-titolo:focus {
	color: var(--ic-arancio);
	text-decoration: underline;
}

.ic-esito-pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
}

.ic-bollo {
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 3px 7px;
	border: 1px solid var(--ic-bordo);
	color: var(--ic-grigio);
}

.ic-bollo-opinione {
	border-color: var(--ic-arancio);
	color: var(--ic-arancio);
}

.ic-esito-dettaglio {
	margin-left: auto;
	border: 0;
	background: none;
	padding: 0;
	font: 500 13px/1 inherit;
	color: var(--ic-arancio);
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

.ic-esito-fatto {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--ic-arancio);
	background: #fafafa;
	font-size: 14.5px;
	line-height: 1.55;
	color: #333;
}

.ic-esito-fatto[hidden] {
	display: none;
}

.ic-esplora-altri {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 12px;
	border: 1px solid var(--ic-nero);
	background: #fff;
	font: 600 14px/1 inherit;
	color: var(--ic-nero);
	cursor: pointer;
}

.ic-esplora-altri small {
	font-weight: 400;
	color: var(--ic-grigio);
}

.ic-esplora-altri:hover {
	background: var(--ic-nero);
	color: #fff;
}

.ic-esplora-altri:hover small {
	color: rgba(255, 255, 255, .72);
}

.ic-esplora-avviso {
	padding: 30px 4px;
	color: var(--ic-grigio);
	font-size: 15px;
}

.ic-esplora-avviso b {
	display: block;
	color: var(--ic-nero);
	margin-bottom: 4px;
}

@media print {
	.ic-esplora-filtri,
	.ic-esplora-altri,
	.ic-esito-dettaglio {
		display: none !important;
	}
	.ic-esplora-griglia {
		grid-template-columns: 1fr;
	}
}