/* ==========================================================================
   L'ELENCO DEI PROFESSIONISTI — `archive-professionista.php`

   Eredita i token da `radar.css` e `ossatura.css`: `functions.php` accoda
   questo foglio con `array( 'radar-ossatura' )` come dipendenza, quindi qui
   dentro non si ridefinisce **nessun** colore e nessuna misura di base. Se un
   valore serve e non c'è, si aggiunge di là — non si inventa qui.

   Regola del cantiere, e vale soprattutto per questa pagina: il colore saturo
   è una risorsa scarsa e si spende in due posti soli, il pin e il pulsante
   primario → `radar.css` §token. Una griglia di 24 schede con 24 tinte è
   rumore, e il rumore su un elenco vuol dire che la persona non sceglie.
   ========================================================================== */

.elenco {
	padding-block: calc(var(--passo) * 2) calc(var(--passo) * 3);
}

/* --- 1. La testa --------------------------------------------------------- */

.elenco__capo {
	margin-bottom: calc(var(--passo) * 1.5);
}

.elenco__titolo {
	margin: 0 0 .35rem;
}

.elenco__sommario {
	margin: 0;
	max-width: var(--colonna-lead, 38em);
	color: var(--testo-2);
	font-size: var(--t-4);
}

/* --- 2. I filtri ---------------------------------------------------------
   ⚠ È un `<form method="get">` vero, e resta un form anche a JavaScript
   spento: la funzione sta nella querystring, il JS aggiunge solo i preferiti
   → l'intestazione di `archive-professionista.php`.

   Sul telefono i tre campi si impilano e il pulsante prende tutta la riga: la
   colonna larga 390px non regge due campi affiancati senza rimpicciolire il
   testo sotto i 16px, che è il limite sotto cui iOS ingrandisce da solo la
   pagina quando si tocca una casella. */
.filtri {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--passo);
	align-items: end;
	padding: calc(var(--passo) * 1.15);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	box-shadow: var(--ombra);
}

@media (min-width: 46em) {
	.filtri {
		grid-template-columns: 2fr 1.2fr 1.2fr auto;
	}
}

.filtri__campo {
	display: grid;
	gap: .3rem;
	min-width: 0;
}

.filtri__etichetta {
	font-size: var(--t-5);
	font-weight: 600;
	color: var(--testo-2);
}

/* ⚠ `font-size: 1rem` non è un vezzo: sotto i 16px Safari su iPhone ingrandisce
   la pagina appena si tocca il campo, e da lì non torna indietro da sola. */
.filtri__casella,
.filtri__scelta {
	width: 100%;
	min-height: var(--tocco, 44px);
	padding: .55rem .8rem;
	font: inherit;
	font-size: 1rem;
	color: var(--testo);
	background: var(--fondo);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	appearance: none;
}

.filtri__scelta {
	/* La freccia disegnata a mano: nessuna immagine da scaricare, e segue la
	   tinta del testo anche col tema scuro. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.05rem center, right .75rem center;
	background-size: .32rem .32rem, .32rem .32rem;
	background-repeat: no-repeat;
	padding-right: 2.1rem;
	/* La tendina delle zone è indentata con spazi: senza questo, il browser li
	   collassa e l'albero regione › provincia › comune si appiattisce. */
	white-space: pre;
}

.filtri__casella:focus-visible,
.filtri__scelta:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

.filtri__azioni {
	display: flex;
}

.filtri__vai {
	width: 100%;
	min-height: var(--tocco, 44px);
	justify-content: center;
}

/* --- 3. I filtri accesi, e come si spengono ------------------------------ */

.elenco__attivi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: var(--passo) 0 0;
}

.elenco__attivi-detto {
	font-size: var(--t-5);
	color: var(--testo-2);
}

/* Il gettone è un collegamento, non un bottone: toglie il filtro cambiando
   indirizzo, quindi funziona anche senza JavaScript e si può tornare indietro
   col tasto del browser. */
.gettone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 32px;
	padding: .25rem .7rem;
	font-size: var(--t-5);
	color: var(--testo);
	text-decoration: none;
	background: var(--superficie-alt);
	border: 1px solid var(--bordo);
	border-radius: 999px;
}

.gettone:hover,
.gettone:focus-visible {
	color: var(--testo);
	border-color: var(--testo-2);
}

.gettone__cosa {
	color: var(--testo-2);
}

.gettone__valore {
	font-weight: 600;
}

.gettone__x {
	font-size: 1.1em;
	line-height: 1;
	color: var(--testo-2);
}

.elenco__pulisci {
	font-size: var(--t-5);
}

/* --- 4. Il conto e i preferiti ------------------------------------------- */

.elenco__conto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: calc(var(--passo) * 1.25) 0 var(--passo);
	color: var(--testo-2);
	font-size: var(--t-4);
}

.elenco__conto strong {
	color: var(--testo);
}

/* ⚠ `[hidden]` da solo perde contro `display:flex`. La regola esplicita evita
   che il collegamento ai preferiti compaia a JavaScript spento, dove non
   avrebbe niente da mostrare. */
.elenco__miei[hidden] {
	display: none;
}

.elenco__miei {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-left: auto;
	font-size: var(--t-5);
	text-decoration: none;
	color: var(--testo);
	border-bottom: 1px solid var(--bordo);
}

.elenco__miei:hover,
.elenco__miei:focus-visible {
	color: var(--testo);
	border-bottom-color: var(--oro, currentColor);
}

.elenco__miei-stella {
	color: var(--oro, #C9A227);
}

/* --- 5. La griglia -------------------------------------------------------
   `minmax(18rem, 1fr)`: a 1440px fanno tre colonne piene, a 390px una sola.
   Non c'è un `grid-template-columns` per larghezza perché non serve: la
   scheda dice quanto è larga da sé. */
.elenco__griglia {
	display: grid;
	gap: calc(var(--passo) * 1.25);
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

/* --- 6. La scheda dell'elenco --------------------------------------------
   ⛔ Niente foto, niente riassunto, niente recapiti: le tre cose che quasi
   nessuna scheda ha o che non possono uscire → intestazione del modello. Qui
   c'è quello che c'è: mestiere, nome, comune, e quali canali esistono.

   Tutta la scheda è cliccabile perché il collegamento del nome si allarga con
   uno pseudo-elemento (`.professionista__nome a::after`). È il bersaglio più
   grande possibile sul telefono, ed è il motivo per cui dentro non ci sono
   altri collegamenti: due bersagli sovrapposti sarebbero una trappola. */
.professionista {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: calc(var(--passo) * 1.15);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	box-shadow: var(--ombra);
	transition: border-color .16s ease, transform .16s ease;
}

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

/* Il fuoco della tastiera si vede sulla scheda intera, non sul solo titolo:
   chi naviga col tabulatore deve vedere *dove* è, non *cosa* ha toccato. */
.professionista:focus-within {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

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

.professionista__mestiere {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding-right: 2.4rem;   /* il posto della stellina */
}

.professionista__nome {
	margin: 0;
	font-size: var(--t-3);
	line-height: 1.25;
}

.professionista__nome a {
	color: var(--testo);
	text-decoration: none;
}

.professionista__nome a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.professionista__nome a:hover {
	color: var(--testo);
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* Il fuoco lo disegna la scheda (`:focus-within` qui sopra): un secondo
   contorno dentro il primo si legge come due elementi invece che uno. */
.professionista__nome a:focus-visible {
	outline: none;
}

.professionista__dove {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	font-size: var(--t-5);
	color: var(--testo);
}

/* Il segno del luogo: una goccia, la stessa forma del pin sulla mappa. Non è
   un'immagine e non è un carattere icona — è un quadratino ritagliato, quindi
   non aggiunge niente da scaricare e non salta se un font manca. */
/* 🚨 **E NON è della tinta del pin, che pure sarebbe stata la scelta ovvia.**
   Guardando la griglia il 19/8: la pastiglia del mestiere porta già un pallino
   `--pin-servizi`, e con la goccia della stessa tinta a due centimetri di
   distanza la scheda mostrava **due segni arancioni che dicono due cose
   diverse** — «categoria Servizi» e «comune». Il colore saturo qui dentro
   significa una cosa sola → `radar.css` §token: il luogo resta della tinta del
   testo attenuato e si distingue per la forma, non per la tinta. */
.professionista__dove-segno {
	flex: none;
	width: .55rem;
	height: .55rem;
	background: var(--testo-2);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.professionista__canali {
	margin: 0;
	font-size: var(--t-5);
	color: var(--testo-2);
}

.professionista__canali--nessuno {
	font-style: italic;
}

.professionista__apri {
	margin: auto 0 0;
	padding-top: .35rem;
	font-size: var(--t-5);
	font-weight: 600;
	color: var(--azione);
}

/* --- 7. La stellina dei preferiti ----------------------------------------
   🚨 Nasce **invisibile** e la accende `elenco.js` scrivendo `data-js`
   sull'elenco. A JavaScript spento i preferiti non esistono — sono in
   `localStorage`, non c'è area utente — e un bottone che non risponde è
   peggio di un bottone che non c'è.

   ⚠ E si nasconde col `display`, non con l'opacità: un bottone trasparente
   resta nell'ordine di tabulazione e chi naviga con la tastiera ci finisce
   dentro senza vederlo. */
.professionista__stella {
	display: none;
}

[data-elenco][data-js] .professionista__stella {
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 2;              /* sopra il collegamento allargato del nome */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tocco, 44px);
	height: var(--tocco, 44px);
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	color: var(--testo-2);
	transition: color .14s ease, background .14s ease;
}

[data-elenco][data-js] .professionista__stella:hover {
	background: var(--superficie-alt);
	color: var(--oro, #C9A227);
}

[data-elenco][data-js] .professionista__stella:focus-visible {
	outline: 3px solid var(--azione);
	outline-offset: 2px;
}

.professionista__stella-segno {
	font-size: 1.35rem;
	line-height: 1;
}

/* Accesa: la stellina è piena e dorata. ⚠ Il colore da solo non basterebbe —
   WCAG 1.4.1 — ma qui cambia anche la forma del segno, da contorno a pieno,
   che `elenco.js` scrive nel testo del segno stesso. */
[data-elenco][data-js] .professionista__stella[aria-pressed="true"] {
	color: var(--oro, #C9A227);
}

[data-elenco][data-js] .professionista__stella[aria-pressed="true"] .professionista__stella-segno {
	text-shadow: 0 0 1px currentColor;
}

/* --- 8. Il vuoto ---------------------------------------------------------- */

.elenco__vuoto {
	padding: calc(var(--passo) * 2.5) calc(var(--passo) * 1.5);
	text-align: center;
	background: var(--superficie);
	border: 1px dashed var(--bordo);
	border-radius: var(--raggio-grande);
}

.elenco__vuoto-detto {
	margin: 0 auto var(--passo);
	max-width: var(--colonna-stretta, 27em);
	font-size: var(--t-3);
}

/* ⚠ `margin-inline: auto`, e non è pignoleria: `radar.css` mette un
   `max-width` su TUTTI i `<p>` — misurato 665,86px a 1440 — quindi senza
   questa riga il paragrafo resta un blocco stretto ancorato a sinistra e il
   pulsante si centra dentro di lui, non dentro il riquadro. Si vedeva a occhio
   il 19/8: il bottone stava a 220px dal centro. È la stessa riga che
   `radar.css` usa su `.smarrito p`, e per la stessa ragione. */
.elenco__vuoto-azioni {
	margin: 0;
	margin-inline: auto;
	max-width: max-content;
}

/* --- 9. Le pagine --------------------------------------------------------- */

.elenco__pagine {
	margin-top: calc(var(--passo) * 2);
}

.elenco__pagine ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

.elenco__pagine a,
.elenco__pagine span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tocco, 44px);
	min-height: var(--tocco, 44px);
	padding-inline: .6rem;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	text-decoration: none;
	color: var(--testo);
	background: var(--superficie);
}

.elenco__pagine .current {
	border-color: var(--testo);
	font-weight: 600;
}

.elenco__pagine .dots {
	border-color: transparent;
	background: transparent;
	color: var(--testo-2);
}

/* --- 10. Da dove vengono i dati ------------------------------------------
   ⚖ Obbligo di licenza `CDLA-Permissive-2.0`, non galateo → OBBLIGHI-LEGGE.md
   §5-quater. Quindi **non** un asterisco da 10px in fondo: corpo leggibile,
   contrasto pieno, un filetto sopra che la stacca dalla griglia. Chi la deve
   trovare la trova senza cercarla. */
.elenco__fonte {
	margin-top: calc(var(--passo) * 3);
	padding-top: calc(var(--passo) * 1.25);
	border-top: 1px solid var(--bordo);
	font-size: var(--t-5);
	color: var(--testo-2);
}

.elenco__fonte-titolo {
	margin: 0 0 .4rem;
	font-family: var(--font);
	font-size: var(--t-5);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--testo);
}

.elenco__fonte-elenco {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .2rem;
}

.elenco__fonte-elenco strong {
	color: var(--testo);
}

.elenco__fonte-nota {
	margin: .5rem 0 0;
}

/* --- 11. Il telefono ------------------------------------------------------ */

@media (max-width: 32em) {
	.elenco {
		padding-block: var(--passo) calc(var(--passo) * 2);
	}

	.elenco__conto {
		gap: .5rem;
	}

	.elenco__miei {
		margin-left: 0;
	}
}