/* ==========================================================================
   L'ELENCO DEGLI ANNUNCI — `archive-immobile.php`, e la barra delle categorie
   che sta anche sopra `/professionista-elenco/`.

   18/9/2026, ordine di Gabriele: «la lista degli annunci deve avere le
   immagini, non fare paginate intere di solo testo» e «deve essere la stessa
   cosa della mappa, però al posto della mappa degli elenchi ben organizzati».

   Il linguaggio è quello della mappa, guardato prima di scrivere una riga
   (cattura del 18/9): pastiglie con il pallino del colore di categoria,
   schede bianche con bordo sottile e ombra leggera, angoli tondi, niente
   colore saturo fuori dai pin e dal pulsante primario.

   Eredita i gettoni da `radar.css`/`ossatura.css`: `functions.php` accoda
   questo foglio con `radar-ossatura` come dipendenza. Qui dentro non si
   ridefinisce nessun colore.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · La testata dell'elenco, centrata come le zone della home
   -------------------------------------------------------------------------- */

.elenco__capo--centro {
	margin-inline: auto;
	max-width: 46rem;
	text-align: center;
}

.elenco__capo--centro .elenco__sommario {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2 · La barra delle sei categorie

   Il pallino prende il colore del pin dalla variabile `--pin`, che il PHP
   scrive nell'attributo `style` dopo la guardia `radar_mappa_esadecimale()`.
   Senza `--pin` la pastiglia esce lo stesso, col pallino nel grigio del
   bordo: un filtro senza il suo segno, non una pagina rotta.
   -------------------------------------------------------------------------- */

.elenco-categorie {
	margin-block: clamp(16px, 2.4vh, 28px);
}

.elenco-categorie__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.elenco-categorie__pillola {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;            /* il bersaglio di tocco: Apple HIG, 44pt */
	padding: 8px 16px;
	border: 1px solid var(--bordo);
	border-radius: 999px;
	background: var(--superficie);
	color: var(--testo);
	font-size: var(--t-5);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .16s ease, background-color .16s ease;
}

.elenco-categorie__pillola:hover {
	border-color: var(--testo-2);
}

.elenco-categorie__segno {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--pin, var(--bordo));
}

.elenco-categorie__pillola--accesa {
	background: var(--inchiostro, var(--testo));
	border-color: var(--inchiostro, var(--testo));
	color: var(--su-inchiostro, #fff);
}

/* --------------------------------------------------------------------------
   3 · La griglia e la scheda con la foto
   -------------------------------------------------------------------------- */

.elenco__conto {
	margin: clamp(12px, 1.6vh, 20px) 0;
	text-align: center;
	font-size: var(--t-5);
	color: var(--testo-2);
}

.annunci-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: calc(var(--passo) * 1.25);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `li { max-width: 68ch }` di radar.css strozzerebbe le celle della griglia. */
.annunci-griglia__cella {
	max-width: none;
}

.annuncio-carta {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	box-shadow: var(--ombra);
	color: inherit;
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.annuncio-carta:hover {
	border-color: var(--testo-2);
	box-shadow: var(--elev-3);
}

@media (prefers-reduced-motion: no-preference) {
	.annuncio-carta:hover {
		transform: translateY(-2px);
	}
}

.annuncio-carta:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

.annuncio-carta__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--superficie-alt);
}

.annuncio-carta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Senza copertina: un campo nel colore del pin con l’iniziale della
   categoria. Non `.mn-foto-ripiego`, che vive in `mappa-nuova.css` e qui
   non è accodato — lasciava un riquadro vuoto (misurato il 18/9). */
.annuncio-carta__senza-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: color-mix(in srgb, var(--pin, var(--testo-2)) 14%, var(--superficie-alt));
}

.annuncio-carta__lettera {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--pin, var(--testo-2));
	color: #fff;
	font: 700 1.5rem/1 var(--font-titolo);
}

/* La categoria sulla foto: una pastiglia piccola in basso a sinistra, sul
   velo scuro — è il solo posto dove serve, perché la griglia mescola
   affitto, vendita, terreni e case vacanza. */
.annuncio-carta__categoria {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--inchiostro, #17110e) 78%, transparent);
	color: var(--su-inchiostro, #fff);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.annuncio-carta__corpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 16px;
}

.annuncio-carta__prezzo {
	font-family: var(--font-titolo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--testo);
}

.annuncio-carta__prezzo-nota {
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 500;
	color: var(--testo-2);
}

.annuncio-carta__titolo {
	font-weight: 600;
	line-height: 1.3;
	color: var(--testo);

	/* Due righe, poi si taglia: in una griglia i titoli lunghi fanno saltare
	   l'altezza delle schede e la fila si slabbra. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.annuncio-carta__sotto {
	font-size: .875rem;
	color: var(--testo-2);
}

/* --------------------------------------------------------------------------
   4 · Elenco vuoto e pagine
   -------------------------------------------------------------------------- */

.elenco--annunci .elenco__vuoto {
	margin-inline: auto;
	max-width: 40rem;
	padding-block: clamp(32px, 6vh, 64px);
	text-align: center;
}

.elenco--annunci .elenco__vuoto-azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.elenco--annunci .elenco__pagine {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 4vh, 40px);
}

.elenco--annunci .elenco__pagine .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--bordo);
	border-radius: 999px;
	margin: 0 4px;
	background: var(--superficie);
	color: var(--testo);
	text-decoration: none;
	font-weight: 600;
}

.elenco--annunci .elenco__pagine .page-numbers.current {
	background: var(--inchiostro, var(--testo));
	border-color: var(--inchiostro, var(--testo));
	color: var(--su-inchiostro, #fff);
}


/* --------------------------------------------------------------------------
   5 . La testata dei professionisti si centra come quella degli annunci

   Le due pagine sono la stessa superficie (la barra delle categorie sta su
   tutte e due): se una ha il titolo a bandiera e l altra al centro, passando
   da una pastiglia all altra la pagina sembra saltare. Il foglio proprio dei
   professionisti (elenco.css) non si tocca: e di quella pagina, e queste due
   righe valgono solo dentro il suo archivio.
   -------------------------------------------------------------------------- */

.post-type-archive-professionista .elenco__capo {
	margin-inline: auto;
	max-width: 46rem;
	text-align: center;
}

.post-type-archive-professionista .elenco__sommario {
	margin-inline: auto;
}


/* La targa dell’annuncio dimostrativo, in alto a destra sulla foto: sta
   dalla parte opposta della categoria e non ne prende il posto. Stesso
   registro della targa grande sulla scheda (`.annuncio__esempio-targa`
   in `annuncio.css`), in piccolo. */
.annuncio-carta__esempio {
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	color: var(--testo-2);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* Le due promesse sopra le schede: una riga sola, centrata, col segno di
   spunta davanti. Non sono pastiglie — non si cliccano — e non sono un
   avviso: sono due fatti, e si leggono come tali. */
.elenco-promesse {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 0 auto clamp(16px, 2.4vh, 28px);
	padding: 0;
	max-width: 60rem;
	list-style: none;
}

.elenco-promessa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: none;
	color: var(--testo-2);
	font-size: var(--t-5);
}

.elenco-promessa::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 999px;
	background: var(--verificato, var(--azione));
	-webkit-mask: none;
	mask: none;
	box-shadow: inset 0 0 0 4px var(--superficie-alt, #fff);
}


/* --------------------------------------------------------------------------
   6 · I blocchi dell’archivio di un comune, e la carta dell’impresa

   20/9/2026. Un comune risponde a «cosa c’è qui?», e la risposta ha due
   nature: le case e le imprese. Due blocchi con il loro titolo, non una
   griglia mescolata — che è la cosa che Gabriele ha bocciato.
   -------------------------------------------------------------------------- */

.elenco-blocco + .elenco-blocco {
	margin-block-start: clamp(36px, 6vh, 64px);
}

.elenco-blocco__titolo {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 0 0 clamp(14px, 2vh, 20px);
	font-family: var(--font-titolo);
	font-size: var(--t-3);
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: center;
}

.elenco-blocco__quanti {
	font-family: var(--font);
	font-size: var(--t-5);
	font-weight: 500;
	color: var(--testo-2);
}

.elenco-blocco__tutti {
	margin: clamp(16px, 2.4vh, 24px) 0 0;
	max-width: none;
	text-align: center;
}

/* La carta dell’impresa: compatta, senza il riquadro della foto (→
   `inc/elenco-carte.php`). Resta la stessa superficie delle altre. */
.annuncio-carta--impresa .annuncio-carta__corpo {
	gap: 6px;
	padding: 16px;
}

.annuncio-carta__mestiere {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--bordo);
	border-radius: 999px;
	background: var(--superficie-alt);
	font-size: .75rem;
	font-weight: 600;
	color: var(--testo-2);
}

.annuncio-carta__pallino {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--pin, #D4A017);
}