/* ==========================================================================
   ZONA 6 DEL DISEGNO — «annuncio», l'anteprima in home. S-Z6, 6/9/2026.

   Accodato da `templates/cerca.php` (righe 60-70) SOLO se questo file esiste,
   DOPO `radar-cerca` — token e componenti di base (`.pulsante`, `.pillola`,
   `.dati`, `.dato`, `.badge`, `.fiducia`, `.fiducia__*`, `.occhiello`,
   `.titolone`, `.sommario`, `.fascia`, `.fascia--inchiostro`) arrivano già
   vestiti da `radar.css`/`ossatura.css`, caricati su ogni pagina: qui non si
   ridichiara NIENTE di quello. Questo foglio veste solo:

     1) il guscio della vetrina (`.annuncio-vetrina__*`), che è disegno nuovo;
     2) `.chi`/`.chi__*` e `.zona`/`.zona__*` — le classi che stampano
        `radar_fiducia_persona()` e `radar_fiducia_zona()` (inc/fiducia.php),
        riusate tal quali dal template PHP di questa zona. Il loro vestito
        vero sta in `assets/css/scheda.css`, ma quel foglio si accoda solo su
        `is_singular(['immobile','professionista'])` — mai in home — e per
        quando questo pezzo gira (dentro `templates/cerca.php`, dopo
        `get_header()` a riga 461) `wp_head()` ha già stampato i fogli: un
        `wp_enqueue_style()` messo nel template a quel punto arriverebbe
        troppo tardi. Le regole sotto sono percio scoperte apposta, in scala
        ridotta per stare in una colonna di card e non in un pannello intero.
   ========================================================================== */

#annuncio.annuncio-vetrina {
	overflow: hidden;
}

/* ── 1 · La testa: occhiello + titolo a sinistra, paragrafo a destra ────── */

.annuncio-vetrina__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.25rem, 4vw, 3rem);
}

.annuncio-vetrina__voce {
	flex: 1 1 26rem;
	min-width: 0;
}

.annuncio-vetrina__voce .titolone { margin-bottom: 0; }

.annuncio-vetrina__sommario {
	flex: 1 1 20rem;
	min-width: 0;
	margin-bottom: 0;
}

/* ── 2 · Il riquadro: la card bianca sulla fascia scura ──────────────────── */

.annuncio-vetrina__riquadro { margin-top: clamp(1.75rem, 4vh, 3rem); }

.annuncio-vetrina__scheda {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	overflow: hidden;
	box-shadow: var(--ombra);
}

.annuncio-vetrina__foto {
	position: relative;
	min-height: 22rem;
	background: var(--superficie-alt);
}

.annuncio-vetrina__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim leggero solo dietro alla pastiglia: la foto resta protagonista, la
   scritta sopra resta leggibile su qualunque immagine. */
.annuncio-vetrina__sopra-foto {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: 1rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
}

/* `.pillola` (radar.css) non ha un colore testo suo — nella mappa e nelle
   schede eredita il chiaro della pagina. Qui sopra sta sulla foto, dentro
   `.fascia--inchiostro`: senza questa riga il testo erediterebbe il quasi
   bianco della fascia su una pastiglia quasi bianca, illeggibile — stessa
   famiglia di difetto della riga su `.annuncio-vetrina__dettagli` più sopra. */
.annuncio-vetrina__pillola {
	background: var(--superficie);
	color: var(--testo);
	font-weight: 600;
}

/* 🚨 Sfondo bianco fisso + `var(--testo)` era il difetto gemello di quello
   qui sopra, preso al contrario: in tema scuro `--testo` diventa quasi
   bianco, e su un fondo bianco fisso il testo spariva. `var(--superficie)`
   invece cambia insieme al testo — chiaro con chiaro, scuro con scuro — come
   già fa `.annuncio-vetrina__pillola`. Misurato in tema scuro, cattura del
   6/9/2026. */
.annuncio-vetrina__quando {
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--superficie);
	color: var(--testo);
	font-size: var(--t-5);
}

/* 🚨 Il riquadro bianco sta DENTRO `.fascia--inchiostro`, che impone
   `color: var(--su-inchiostro)` (quasi bianco) a tutto quello che ha sotto.
   `.dato__valore` (radar.css) non ha un colore suo — lo eredita da chi lo
   contiene — e sul fondo scuro della fascia diventava testo quasi bianco su
   riquadro bianco: invisibile, misurato nella prima cattura del 6/9/2026.
   Si azzera qui, una volta sola, e ogni figlio con un colore suo (le
   etichette `.testo-2`, i badge `--verificato`…) continua a vincere perché
   più specifico. */
.annuncio-vetrina__dettagli {
	padding: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--testo);
}

.annuncio-vetrina__prezzo {
	display: flex;
	align-items: baseline;
	gap: .625rem;
	flex-wrap: wrap;
	margin: 0 0 .25rem;
}

.annuncio-vetrina__prezzo .prezzo {
	font-family: var(--font-titolo);
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--testo);
	font-variant-numeric: tabular-nums;
}

.annuncio-vetrina__prezzo-nota {
	font-size: 1.125rem;
	color: var(--testo-2);
}

.annuncio-vetrina__titolo {
	margin: 0 0 .25rem;
	font-family: var(--font-titolo);
	font-size: clamp(1.35rem, 1.7vw, 1.65rem);
	font-weight: 400;
	line-height: 1.25;
	color: var(--testo);
}

.annuncio-vetrina__luogo {
	margin: 0 0 1.25rem;
	color: var(--testo-2);
}

.annuncio-vetrina__dati { margin-bottom: 1.25rem; }

/* «Chi pubblica» qui non è dentro il pannello sticky `.fiducia` (quello apre
   un contatto vero, con login e modulo — TECNICA di inc/fiducia.php): qui è
   solo testo, badge, il rimando al permalink e l'avviso. `.fiducia__titolo`
   e `.fiducia__azione` restano gli stessi usati da `radar_fiducia_pannello()`,
   fuori dal loro contenitore `.fiducia`. */
.annuncio-vetrina__dettagli > .fiducia__titolo { margin-top: 0; }

.annuncio-vetrina__cta { margin-top: .25rem; }

/* ── 3 · «Chi pubblica»: `.chi` di radar_fiducia_persona(), non vestito in
   home perché sta in scheda.css → vedi la nota di testa del foglio. ────── */

.annuncio-vetrina__dettagli .chi {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: 0 0 .875rem;
}

.annuncio-vetrina__dettagli .chi__iniziali {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--marchio) 12%, var(--superficie));
	color: var(--marchio);
	font-weight: 700;
	font-size: .9375rem;
}

.annuncio-vetrina__dettagli .chi__testo {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
}

.annuncio-vetrina__dettagli .chi__nome {
	position: relative;
	width: fit-content;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
}

.annuncio-vetrina__dettagli .chi__nome[data-intero]::after {
	content: attr(data-intero);
	position: absolute;
	inset-block-end: calc(100% + .375rem);
	inset-inline-start: 0;
	z-index: 2;
	max-width: min(17rem, 90vw);
	padding: .375rem .625rem;
	border-radius: var(--raggio);
	background: var(--testo);
	color: var(--fondo);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	pointer-events: none;
}

.annuncio-vetrina__dettagli .chi__nome[data-intero]:hover::after,
.annuncio-vetrina__dettagli .chi__nome[data-intero]:focus::after {
	opacity: 1;
	visibility: visible;
}

.annuncio-vetrina__dettagli .chi__nome[data-intero]:focus-visible {
	outline: 2px solid var(--azione);
	outline-offset: 3px;
	border-radius: 3px;
}

.annuncio-vetrina__dettagli .chi__ruolo {
	color: var(--testo-2);
	font-size: .8125rem;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.annuncio-vetrina__dettagli .chi__nome[data-intero]::after { transition: none; }
}

/* ── 4 · «La zona, non il civico»: `.zona` di radar_fiducia_zona(), stessa
   ragione — scheda.css non arriva in home. Il raggio scritto nel testo lo
   calcola comunque solo la funzione riusata: qui c'è solo il vestito. ──── */

.annuncio-vetrina__dettagli .zona {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--bordo);
}

.annuncio-vetrina__dettagli .zona__titolo {
	margin: 0;
	font-family: var(--font-titolo);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--testo);
}

.annuncio-vetrina__dettagli .zona__campo {
	position: relative;
	max-width: 16rem;
	border-radius: var(--raggio);
	overflow: hidden;
	background: var(--superficie-alt);
	aspect-ratio: 16 / 10;
}

.annuncio-vetrina__dettagli .zona__disegno {
	display: block;
	width: 100%;
	height: 100%;
}

.annuncio-vetrina__dettagli .zona__cerchio {
	fill: color-mix(in srgb, var(--pin-affitto) 13%, transparent);
	stroke: var(--pin-affitto);
	stroke-width: .8;
	stroke-dasharray: 3 2.5;
	vector-effect: non-scaling-stroke;
}

.annuncio-vetrina__dettagli .zona__punto {
	fill: var(--pin-affitto);
	stroke: var(--superficie);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

.annuncio-vetrina__dettagli .zona__nota {
	margin: 0;
	color: var(--testo-2);
	font-size: .8125rem;
	line-height: 1.5;
}

.annuncio-vetrina__dettagli .zona__nota strong { color: var(--testo); }

/* ── 5 · Lo stato vuoto: una riga, non una cornice vuota ─────────────────── */

.annuncio-vetrina__vuoto {
	margin-top: clamp(1.75rem, 4vh, 3rem);
	color: var(--su-inchiostro-soft);
}

.annuncio-vetrina__vuoto p { margin: 0; }

.annuncio-vetrina__vuoto a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/* ── 6 · Sotto i 900px: una colonna sola, foto sopra, dettagli sotto ─────── */

@media (max-width: 56.25rem) {
	.annuncio-vetrina__scheda { grid-template-columns: 1fr; }
	.annuncio-vetrina__foto { min-height: 16rem; }
}

/* --------------------------------------------------------------------------
   SENZA COPERTINA — RADAR-4, 6/9/2026.

   I due annunci veri del sito dichiarano una foto che **non esiste sul
   disco** (404 sul banco e sul vivo, misurato). Il PHP se ne accorge e non
   stampa il riquadro fotografico: qui la scheda smette di essere a due
   colonne, e la pastiglia della categoria con la data — che sulla foto stava
   sopra l'immagine — torna in linea, in cima ai dettagli, dove le serve.
   -------------------------------------------------------------------------- */

.annuncio-vetrina__scheda--senza-foto {
	grid-template-columns: minmax(0, 1fr);
	max-width: 46rem;
	margin-inline: auto;
}

.annuncio-vetrina__sopra-foto--in-linea {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	inset: auto;
}

/* --------------------------------------------------------------------------
   LO STATO VUOTO — 7/9/2026, ordine di Gabriele («solo dati reali, e degli
   hook per invogliare»). Sul vivo oggi gli annunci trovabili sono zero, quindi
   questo NON è il ramo raro: è quello che si vede. Si veste come una fascia
   d'invito, non come un messaggio d'errore.
   -------------------------------------------------------------------------- */

.annuncio-vetrina__vuoto {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

/* 🚨 IL COLORE NON SI EREDITA QUI, ED È UNA MISURA.
   La fascia scura passa ai figli `--su-inchiostro-soft` (il grigio del testo
   secondario). Sul titolo dell'invito è sbagliato — un titolo non è testo
   secondario — e sul bottone era **3,07:1**, sotto il minimo di 4,5, perché il
   grigio finiva sul verde `--azione`. Misurato campionando i pixel veri del
   bottone, non dedotto dal CSS. */
.annuncio-vetrina__vuoto-titolo {
	color: var(--su-inchiostro);
	margin: 0 0 12px;
	font: 400 clamp(1.5rem, 2.6vw, 2.125rem)/1.15 var(--font-titolo);
	letter-spacing: -.01em;
}

.annuncio-vetrina__vuoto-testo {
	margin: 0 0 clamp(18px, 2.6vh, 26px);
	font-size: 1rem;
	line-height: 1.6;
	opacity: .88;
}

.annuncio-vetrina__vuoto-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	margin: 0;
}

.annuncio-vetrina__vuoto-altro {
	font: 600 .9375rem/1.4 var(--font);
	color: inherit;
}

.annuncio-vetrina__vuoto .pulsante {
	color: var(--azione-testo);
}

.annuncio-vetrina__vuoto-altro {
	color: var(--su-inchiostro);
}