/* ═════════════════════════════════════════════════════════════════════════════
   CASE COSTA TOSCANA — il sistema, terza stesura

   ORIGINE. Il committente ha indicato un modello preciso — la demo immobiliare
   del tema Crafto — e ha chiesto quello, con i colori dell'agenzia. Questo
   foglio e' la traduzione di quell'impianto sui tre colori, verificata contro un
   mockup approvato (`public/mockup/n5-riferimento.html`).

   COSA VIENE DAL MODELLO, ed e' la parte che si riconosce:
     · l'occhiello colorato sopra ogni titolo di sezione
     · IL TITOLO CON LA PAROLA CHE CONTA IN GRASSETTO E SOTTOLINEATA da una
       pennellata di colore (`.mk`). E' la firma: toglila e il sito diventa un
       altro sito
     · la scheda immobile: pastiglia sulla fotografia, titolo, indirizzo, riga di
       tre dati icona-valore-etichetta, filetto, e in fondo bottone a sinistra e
       prezzo grande a destra
     · la striscia delle sezioni divisa da filetti verticali, con la pastiglia
       del conteggio sopra l'icona
     · la carrellata delle localita' che esce dal bordo destro
     · bottoni rettangolari maiuscoletti, e i tondi con la freccia
     · la riga-manifesto centrata, con l'icona e una parte sottolineata

   COSA NON VIENE DAL MODELLO: i colori (verde #06af47 → azzurro #2f6fb0, grigio
   scuro #262b35 → blu #1c3d6e) e i numeri, che qui sono CONTATI e non
   dichiarati. Il modello scrive «258.952+» perche' e' una demo; undici immobili
   e sette localita' sono quello che c'e'.

   IL CARATTERE e' quello del modello — Urbanist, variabile, SIL OFL — servito da
   `public/assets/font/`. Mai da Google: `font-src 'self'`.

   ORDINE DEL FILE
     1  token          colore, tipo, spazio, forme, ombre, tempi
     2  fondamenta     azzeramento, corpo, titoli, la pennellata
     3  impianto       contenitore, bande, testate di sezione, griglie
     4  comandi        bottoni, tondi, collegamenti
     5  componenti     schede, pastiglie, dati, elenchi, fisarmonica
     6  guscio         testata e piede
     7  pagine         apertura, filtri, dossier, galleria, moduli, mappa
     8  infrastruttura banner, avviso lingua, movimento, stampa
   ═════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════ 1. I TOKEN ══ */

:root {
    /* ── colore ──────────────────────────────────────────────────────────────
       TRE VALORI, e la gerarchia la fa il valore, non la tinta.

         --blu      #1c3d6e  su bianco 10,81:1 · col bianco sopra 10,81:1
         --azzurro  #2f6fb0  su bianco  5,22:1 · col bianco sopra  5,22:1
         --pale     #eef4fb  la banda chiara: l'inchiostro ci tiene oltre 13:1

       Misurati, non stimati. `--azzurro` regge il testo in tutti e due i versi,
       ed e' la proprieta' che serve a un colore d'accento che deve comparire sia
       come scritta su bianco sia come fondo pieno con scritte bianche sopra. */
    --blu:       #1c3d6e;   /* bande piene, titoli, riempimenti, il piede      */
    --blu-2:     #2a5490;   /* superfici su fondo blu                          */
    --blu-3:     #16304f;   /* il blu piu' scuro, per i veli                   */

    --azzurro:   #2f6fb0;   /* l'accento: occhielli, pennellata, azioni        */
    --azzurro-2: #8ab6e0;   /* l'azzurro SU FONDO BLU (5,07:1 misurato)        */
    --pale:      #eef4fb;   /* la banda chiara, e i cerchi sotto le icone      */

    --w:         #ffffff;

    --ink:       #1c3d6e;   /* i titoli sono blu, non neri: e' il modello      */
    /*
        I DUE GRIGI SONO CALIBRATI SULLA BANDA CHIARA, non sul bianco.

        La banda `--pale` #eef4fb ha luminanza 0,8984, piu' bassa del bianco:
        perche' un testo ci tenga i 4,5:1 serve luminanza <= 0,1608, ed e' una
        soglia piu' severa di quella del bianco. Calibrare sul bianco e' l'errore
        che si fa sempre, perche' il bianco e' il fondo che si guarda mentre si
        sceglie il colore.

        Misurati, i due valori di partenza non passavano: il corpo #64798a dava
        4,52 sul bianco ma 4,08 sulla banda, e le note #7d91a2 stavano a 3,26 e
        2,94 — cioe' sotto soglia su TUTTI E DUE i fondi chiari. Le note le usano
        i suggerimenti sotto i campi dei moduli e le didascalie dei dati, che sono
        testo piccolo: e' il posto in cui un contrasto basso costa di piu'.

        #54697a tiene 5,71 sul bianco e 5,16 sulla banda; #45596a tiene 7,27 e
        6,56. Passano tutti e due su tutti e due i fondi, con margine.
    */
    --ink-2:     #45596a;   /* il corpo: 7,27 su bianco · 6,56 sulla banda      */
    --ink-3:     #54697a;   /* note e didascalie: 5,71 su bianco · 5,16         */

    --line:      #e2e9f1;   /* filetto decorativo: divisori, bordi di scheda   */
    /*
        IL BORDO DI UN CONTROLLO NON E' UN FILETTO DECORATIVO.

        La WCAG 1.4.11 chiede 3:1 al contorno di un componente interattivo — non
        di una decorazione. #70879f misura 3,71:1 sul bianco e 3,23:1 sulla banda
        chiara: passa su tutti e due i fondi su cui compare un campo.
    */
    --line-2:    #70879f;

    /* ruoli, così i componenti non nominano mai una tinta direttamente */
    --ground:    var(--w);
    --text:      var(--ink-2);
    --heading:   var(--blu);
    --accent:    var(--azzurro);
    --action:    var(--azzurro);
    --focus:     var(--azzurro);
    --card:      var(--w);

    /* ── tipo ────────────────────────────────────────────────────────────────
       UN CARATTERE SOLO, e variabile. Urbanist porta titoli, corpo, etichette e
       cifre: il modello fa cosi' e funziona perche' la faccia ha abbastanza
       escursione di peso da distinguere i registri senza cambiare voce.

       Il corpo e' 17px su 32 di interlinea, come il modello. Non e' un dettaglio:
       32 su 17 e' interlinea 1,88, molto larga, ed e' meta' di quello che fa
       sembrare «respirato» quel tema. */
    --sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --t-xs:  0.75rem;      /* 12 — pastiglie                                   */
    --t-sm:  0.8125rem;    /* 13 — bottoni, maiuscoletto                       */
    --t-md:  0.9375rem;    /* 15 — note, didascalie                            */
    --t-base:1.0625rem;    /* 17 — il corpo, e l'occhiello                     */
    --t-lg:  1.3125rem;    /* 21 — titolo di scheda                            */
    --t-xl:  clamp(1.375rem, 1.1rem + 0.9vw,  1.875rem);   /* 22 → 30 — h3     */
    --t-2xl: clamp(1.75rem, 1.25rem + 1.8vw,  2.5rem);     /* 28 → 40 — h2 min */
    --t-3xl: clamp(2rem,    1.25rem + 2.6vw,  3.125rem);   /* 32 → 50 — h2     */
    --t-4xl: clamp(2.5rem,  1.4rem  + 4.2vw,  4rem);       /* 40 → 64 — h1     */

    /* ── spazio ──────────────────────────────────────────────────────────────
       Base otto. Le bande hanno tre altezze: il modello non respira uguale
       ovunque, e una pagina in cui ogni sezione ha lo stesso passo si legge come
       vuota invece che come agiata. */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;   --s-9: 6rem;

    --band-sm: clamp(2.5rem, 4vw, 4rem);
    --band:    clamp(3.5rem, 7vw, 7rem);
    --band-lg: clamp(5rem, 9vw, 8.5rem);

    --gutter: clamp(1.25rem, 4vw, 4rem);
    --max:    81.25rem;    /* 1300, la misura del contenitore del modello      */

    /* ── forme ── il modello sta su raggi piccoli: 4 sui comandi, 8 sulle
       superfici. La pastiglia e' l'unica cosa completamente tonda. */
    --r-sm: 4px;
    --r:    6px;
    --r-lg: 8px;
    --r-xl: 12px;

    /* ── ombre ── poche e decise. L'inchiostro e' il blu della tavolozza: un
       grigio sopra un fondo azzurrino va in fango. */
    --sh-1: 0 2px 6px rgba(28, 61, 110, .05),
            0 14px 34px -18px rgba(28, 61, 110, .22);
    --sh-2: 0 4px 10px rgba(28, 61, 110, .07),
            0 26px 52px -22px rgba(28, 61, 110, .32);
    --sh-3: 0 18px 44px -20px rgba(28, 61, 110, .40);

    --fast: .25s cubic-bezier(.2, .7, .3, 1);
    --slow: .8s cubic-bezier(.2, .7, .3, 1);
}

/*
    LE BANDE SCURE RIDEFINISCONO I RUOLI, non i colori dei singoli elementi.

    Un bottone, una pastiglia o un titolo dentro `.dark` non sanno di essere su
    fondo scuro: leggono `--text` e `--heading` come sempre, e sono quelli a
    essere cambiati. Senza questo, ogni componente vorrebbe la sua variante.
*/
.dark {
    --ground:  var(--blu);
    --text:    rgba(255, 255, 255, .78);
    --heading: var(--w);
    --card:    var(--blu-2);
    --line:    rgba(255, 255, 255, .16);
    --line-2:  rgba(255, 255, 255, .34);
    --ink-2:   rgba(255, 255, 255, .78);
    --ink-3:   rgba(255, 255, 255, .62);
    /* Sul blu pieno l'azzurro medio scende a 3,04:1 — sotto soglia. L'accento
       passa a quello chiaro, che misura 5,07:1. */
    --accent:  var(--azzurro-2);
    --action:  var(--azzurro-2);
    --focus:   var(--azzurro-2);

    background: var(--ground);
    color: var(--text);
}


/* ═════════════════════════════════════════════════════ 2. LE FONDAMENTA ══ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--w);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 32px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/*
    LA MISURA DI SICUREZZA DEI SEGNI DISEGNATI.

    Un `<svg viewBox="0 0 24 24">` senza CSS viene reso dal browser alla misura
    predefinita di un elemento rimpiazzato: 300 x 150 pixel, pieno di nero. In
    pagina si vede come una macchia enorme — sull'apertura della scheda immobile
    lo spillo della localita' usciva alto mezza banda e completamente nero.

    Il sito ha decine di segni scritti a mano dentro i template, e quasi tutti la
    misura la prendono dalla regola del componente che li contiene. Quelli che non
    stanno dentro nessun componente — o che la prendevano da una regola caduta in
    una riscrittura — non hanno rete. Questa e' la rete: un'em di lato, nessun
    riempimento, il tratto del colore del testo. Ogni componente la sovrascrive,
    perche' arriva dopo e ha specificita' maggiore.

    Costa tre dichiarazioni e toglie di mezzo un'intera famiglia di difetti che si
    vedono solo guardando la pagina giusta.
*/
svg {
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/*
    I TITOLI SONO GRANDI E DI PESO NORMALE, e il grassetto lo porta solo la parte
    evidenziata.

    E' la scelta del modello e non e' un dettaglio: un titolo tutto in 700 legge
    come un'intestazione di pannello di controllo. A 400, grande, con una sola
    frase in 700 sottolineata, legge come una pagina impaginata — e l'occhio va
    esattamente dove il grassetto lo manda.
*/
h1, h2, h3, h4 {
    margin: 0;
    color: var(--heading);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: var(--t-4xl); line-height: 1.09; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-lg); font-weight: 500; line-height: 1.35; }
h4 { font-size: var(--t-base); font-weight: 600; line-height: 1.45; }

/*
    LA PENNELLATA — `.mk`.

    La parola che conta va in grassetto e ha sotto una barra di colore che le
    passa dietro all'altezza della linea di base. NON e' `text-decoration`: e' una
    sfumatura di fondo alta il 18%, quindi resta DIETRO le aste discendenti (le g,
    le p, le q) invece di tagliarle, e non si sposta quando il titolo va a capo.

    Su fondo scuro la stessa barra si fa bianca: l'azzurro sul blu non si vede.
*/
.mk {
    font-weight: 700;
    color: var(--heading);
    background-image: linear-gradient(to top,
        rgba(47, 111, 176, .32) 0,
        rgba(47, 111, 176, .32) 18%,
        transparent 18%);
    background-repeat: no-repeat;
    padding-inline: .06em;
}

.dark .mk, .on-photo .mk, .hero .mk {
    color: var(--w);
    background-image: linear-gradient(to top,
        rgba(255, 255, 255, .40) 0,
        rgba(255, 255, 255, .40) 18%,
        transparent 18%);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* La riga letta solo dai lettori di schermo. */
.sr, .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Il salto al contenuto compare al fuoco e non un istante prima. */
.sr:focus-visible {
    position: fixed; top: var(--s-4); left: var(--s-4);
    width: auto; height: auto; margin: 0;
    padding: var(--s-3) var(--s-5);
    clip-path: none;
    background: var(--blu); color: var(--w);
    border-radius: var(--r-sm);
    z-index: 999;
}

.measure   { max-width: 62ch; }
.measure-s { max-width: 46ch; }

/*
    IL SOMMARIO LEGGE IL RUOLO, non il grigio.

    `.lead` nominava `--ink-2` direttamente, cioe' il grigio-blu del testo su
    fondo chiaro. Sulle aperture scure — dove `.lead` compare su OGNI pagina
    interna del sito — usciva #45596a sopra #1c3d6e: **1,74:1**, praticamente
    illeggibile. Su «Privacy» il sommario e' l'avviso che il testo e'
    provvisorio, cioe' esattamente la riga che non deve sparire.

    `--text` e' il ruolo, e le aperture scure lo ridefiniscono qui sotto.
*/
.lead { font-size: var(--t-base); color: var(--text); }

/* L'occhiello: la riga colorata sopra ogni titolo di sezione. */
.eyebrow {
    display: block;
    margin-bottom: var(--s-3);
    color: var(--accent);
    font-size: var(--t-base);
    font-weight: 500;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════ 3. L'IMPIANTO ══ */

.wrap {
    width: 100%;
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band        { padding-block: var(--band); background: var(--ground); position: relative; }
.band--pale  { --ground: var(--pale); }
.band--dark  { padding-block: var(--band); }
.band--tight { padding-block: var(--band-sm); }
.band--tall  { padding-block: var(--band-lg); }

/* Due bande che condividono il fondo hanno bisogno di un confine: nel sito ne
   esiste una coppia sola — galleria e descrizione, sulla scheda di un immobile. */
.band + .band:not(.band--pale):not(.band--dark):not(.photoband) {
    border-top: 1px solid var(--line);
}

/*
    LA TESTATA DI SEZIONE: titolo a sinistra, azione a destra, allineati sulla
    linea di base dell'ultima riga del titolo.
*/
.sechead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sechead h2   { max-width: 20ch; }
.sechead .lead { max-width: 54ch; }

.sechead--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.sechead--row > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }

/*
    `--center` NON CENTRA PIU'.

    Due sezioni su otto stavano su un asse e sei sull'altro, e un asse che cambia
    non e' una variazione: e' un impianto che non c'e'. Nel modello e' centrata
    UNA sola testata — quella dei servizi — e la porta `.sechead--mid`, che e'
    esplicita. La classe vecchia resta dichiarata perche' i template la nominano.
*/
.sechead--center { align-items: flex-start; text-align: left; }
.sechead--mid    { align-items: center; text-align: center; }
.sechead--mid h2 { max-width: 24ch; }
.sechead--last   { margin-bottom: 0; }

/*
    LE GRIGLIE DICONO QUANTE COLONNE, e non quanto larga una cella.

    `auto-fit` decide il numero di colonne dividendo lo spazio per un minimo, e
    non sa quanti elementi ci sono: quattro riquadri in una griglia che ne calcola
    tre escono 3 + 1, con l'ultimo orfano e due terzi di banda vuoti accanto.
*/
.grid { display: grid; gap: var(--s-5); }
.grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 40rem) {
    .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La quattro resta elastica: la usano le tessere delle localita', che sono
   cinque, sei o sette a seconda di quante zone ha l'agenzia. */
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* La cella che AVVOLGE un componente lo lascia riempire; la cella che E' il
   componente resta una colonna. `:only-child` legge la differenza. */
.grid > li { display: flex; }
.grid > li > :only-child { width: 100%; }
.grid > li.feat { flex-direction: column; }


/* ═══════════════════════════════════════════════════════ 4. I COMANDI ══ */

/*
    IL BOTTONE DEL MODELLO: rettangolo appena stondato, maiuscoletto spaziato,
    bordo di due pixel che al passaggio diventa il riempimento.
*/
.btn, .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 1rem 1.75rem;
    border: 2px solid var(--blu);
    border-radius: var(--r-sm);
    background: var(--blu);
    color: var(--w);
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
}

.btn:hover, .cta:hover { background: var(--azzurro); border-color: var(--azzurro); color: var(--w); }
.btn svg, .cta svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn--ghost, .cta--ghost { background: transparent; color: var(--heading); }
.btn--ghost:hover, .cta--ghost:hover { background: var(--blu); border-color: var(--blu); color: var(--w); }

.btn--azzurro { background: var(--azzurro); border-color: var(--azzurro); }
.btn--azzurro:hover { background: var(--blu); border-color: var(--blu); }

.btn--sm, .cta--sm { padding: .8rem 1.25rem; font-size: var(--t-xs); }
.btn--lg, .cta--lg { padding: 1.15rem 2.1rem; font-size: var(--t-md); }

/* Su fondo scuro o su fotografia il pieno si inverte: bianco con scritta blu. */
.dark .btn, .dark .cta, .on-photo .btn, .hero .btn {
    background: var(--w); border-color: var(--w); color: var(--blu);
}
.dark .btn:hover, .dark .cta:hover, .on-photo .btn:hover, .hero .btn:hover {
    background: var(--azzurro); border-color: var(--azzurro); color: var(--w);
}
.dark .btn--ghost, .dark .cta--ghost, .on-photo .btn--ghost, .hero .btn--ghost {
    background: transparent; color: var(--w); border-color: rgba(255, 255, 255, .6);
}
.dark .btn--ghost:hover, .dark .cta--ghost:hover, .on-photo .btn--ghost:hover, .hero .btn--ghost:hover {
    background: var(--w); color: var(--blu); border-color: var(--w);
}

/* Il collegamento testuale con la freccia che scorre alla mano. */
.arrow, .tlink {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--heading);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.arrow svg, .tlink svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast); }
.arrow:hover svg, .tlink:hover svg { transform: translateX(5px); }
.arrow:hover, .tlink:hover { color: var(--action); }

/* Il tondo con la freccia: carrellate, impaginazione, «vedi tutti». */
.round {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 2.875rem; height: 2.875rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--heading);
    cursor: pointer;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
}

.round:hover { background: var(--blu); border-color: var(--blu); color: var(--w); }
.round svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.actions--mid { justify-content: center; }


/* ═══════════════════════════════════════════════════ 5. I COMPONENTI ══ */

/* ── 5.1 la pastiglia sulla fotografia ──────────────────────────────────────
   Dice in una parola che cos'e' una scheda, prima che l'occhio arrivi al testo.
   Tre valori, e si distinguono anche in bianco e nero. */

.pill, .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--azzurro);
    color: var(--w);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

.pill--dark,  .tag--rent { background: var(--blu);  color: var(--w); }
.pill--light, .tag--stay { background: var(--w);    color: var(--blu); }
.pill--soft              { background: var(--pale); color: var(--azzurro); }
.tag--sell               { background: var(--azzurro); color: var(--w); }

.pill--on, .pill-on {
    position: absolute;
    top: var(--s-4);
    left: var(--s-4);
    z-index: 2;
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ── 5.2 LA SCHEDA IMMOBILE ─────────────────────────────────────────────────

   La forma del modello, e ogni pezzo fa un mestiere:
     fotografia 16:11 con la pastiglia sopra · titolo · indirizzo · riga di tre
     dati (icona, valore, etichetta) · filetto · piede con bottone a sinistra e
     PREZZO GRANDE a destra.

   `margin-top: auto` sulla riga dei dati e' quello che tiene allineati i piedi
   di tre schede con titoli di lunghezza diversa: senza, il filetto balla. */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: transform var(--fast), box-shadow var(--fast);
}

.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }

.card__ph {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--pale);
    display: block;
}

.card__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.card:hover .card__ph img { transform: scale(1.05); }

.card__b {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--s-5) var(--s-5) 0;
}

.card__t {
    display: block;
    color: var(--heading);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
}

/* Localita' e riferimento sotto il titolo, non sopra: il modello mette prima il
   nome della casa e poi dov'e', ed e' l'ordine in cui si legge un annuncio. */
.card__meta, .card__loc { display: block; margin-top: .35rem; font-size: var(--t-md); color: var(--ink-2); }
.card__meta svg { display: none; }
.card__ref { color: var(--ink-3); }

/*
    LA RIGA DEI TRE DATI. Ogni gruppo e' icona + valore sulla prima riga,
    etichetta sotto. E' il dispositivo che fa leggere una scheda come una scheda
    tecnica invece che come un riquadro con del testo.
*/
.dataline, .facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin-top: auto;
    padding-block: var(--s-5) var(--s-5);
}

.dataline > *, .facts > * { display: block; min-width: 0; }

.spec, .facts b {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--heading);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spec svg, .facts svg {
    width: 1.3rem; height: 1.3rem;
    fill: none; stroke: currentColor; stroke-width: 1.3;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .85;
}

.facts span { display: block; font-size: var(--t-md); font-weight: 400; color: var(--ink-2); line-height: 1.5; }

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--line);
}

/*
    IL PREZZO E' LA COSA PIU' GRANDE DEL PIEDE, e non compete con nient'altro.

    Nel modello il piede ha un bottone piccolo a sinistra e la cifra grande a
    destra: due pesi diversi, nessuna gara. Il difetto della stesura precedente
    era esattamente questo — «Vedi i dettagli» ripetuto sei volte accanto al
    prezzo, e a perdere era il prezzo.
*/
.price {
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.price small { display: block; font-size: var(--t-md); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price--ask  { font-size: var(--t-base); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

/* La scheda intera e' un'ancora: il titolo non si sottolinea e la catena delle
   altezze arriva fino in fondo, o le schede di una riga restano diverse. */
.property-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__go { display: inline-flex; align-items: center; }

/* ── 5.2-bis IL CAMPO SEGNAPOSTO ────────────────────────────────────────────

   QUANDO LA FOTOGRAFIA NON C'E' ANCORA.

   Non un rettangolo grigio con una macchina fotografica in mezzo: un campo di
   colore calmo con un segno sottile al centro. E' quello che l'agenzia guarda per
   giorni mentre carica le immagini di una casa appena presa, quindi deve essere
   presentabile e non una scusa — e su una scheda in vetrina lo vede anche chi
   passa dal sito.

   Era rimasto senza regole nella riscrittura del foglio, e il risultato si vedeva
   sulla banda di chiusura delle esperienze: un riquadro bianco vuoto con un bordo
   di otto pixel, appoggiato su fondo blu, che sembrava un difetto di caricamento.
   `.ph` non ha contenuto, quindi senza una misura dichiarata e' uno `<span>` alto
   zero.

   Le proporzioni sono le stesse che il partial delle immagini sa chiedere. */

.ph {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: inherit;
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(150deg, var(--pale) 0%, #dce7f4 100%);
    position: relative;
}

/* Il segno: due tratti sottili che incrociano al centro, come la mira di un
   riquadro vuoto in un programma di impaginazione. Niente icone, niente parole. */
.ph::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 2.25rem; height: 2.25rem;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(47, 111, 176, .32);
    border-radius: 3px;
    background:
        linear-gradient(to bottom, transparent 47%, rgba(47, 111, 176, .32) 47%, rgba(47, 111, 176, .32) 53%, transparent 53%),
        linear-gradient(to right,  transparent 47%, rgba(47, 111, 176, .32) 47%, rgba(47, 111, 176, .32) 53%, transparent 53%);
}

.ph--wide { aspect-ratio: 16 / 11; }
.ph--pano { aspect-ratio: 21 / 9; }
.ph--sq   { aspect-ratio: 1 / 1; }
.ph--tall { aspect-ratio: 3 / 4; }

/* Sul fondo scuro il campo si scurisce con lui, o e' una macchia chiara in mezzo
   a una banda blu. */
.ph--d, .dark .ph, .on-photo .ph {
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(150deg, var(--blu-2) 0%, var(--blu-3) 100%);
}

.ph--d::after, .dark .ph::after, .on-photo .ph::after {
    border-color: rgba(255, 255, 255, .34);
    background:
        linear-gradient(to bottom, transparent 47%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .34) 53%, transparent 53%),
        linear-gradient(to right,  transparent 47%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .34) 53%, transparent 53%);
}

/* Dove il segnaposto riempie un riquadro gia' proporzionato — la cella di un
   mosaico, la fotografia di una tessera — deve stirarsi, non imporre la sua
   proporzione. */
.card__ph .ph, .pmosaic__cell .ph, .place .ph, .exp .ph, .split__ph .ph, .photoband__f .ph, .door__ph .ph {
    position: absolute; inset: 0; height: 100%; aspect-ratio: auto;
}

/* ── 5.3 il riquadro con l'icona ────────────────────────────────────────── */

.feat {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform var(--fast), box-shadow var(--fast);
}

.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

/*
    `align-self: flex-start` E NON SI PUO' TOGLIERE.

    `.feat` e' una colonna flex, e in una colonna flex i figli si stirano per
    tutta la larghezza a meno che non si dica il contrario. Senza questa riga il
    cerchio dell'icona, dichiarato 4,25rem, veniva renderizzato largo quanto la
    scheda: un rettangolo pallido con dentro un simbolo di 24 pixel.
*/
.feat__ic {
    display: flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 4.25rem; height: 4.25rem;
    border-radius: 50%;
    background: var(--pale);
    color: var(--azzurro);
}

.dark .feat__ic { background: rgba(138, 182, 224, .18); color: var(--accent); }
.feat__ic svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.feat__ic--n { font-size: var(--t-lg); font-weight: 700; }
.feat p { color: var(--ink-2); font-size: var(--t-md); line-height: 1.7; }

/* ── 5.4 l'elenco con la spunta ─────────────────────────────────────────── */

.checks { display: grid; gap: var(--s-4); }

.checks li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--s-4);
    align-items: center;
    color: var(--heading);
    font-size: var(--t-base);
    font-weight: 500;
    line-height: 1.5;
}

.checks i {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--pale);
    color: var(--azzurro);
}

.dark .checks i { background: rgba(138, 182, 224, .2); color: var(--accent); }
.checks i svg { width: 1.0625rem; height: 1.0625rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.checks b { font-weight: 700; }

/* ── 5.5 la banda a due colonne ─────────────────────────────────────────── */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

@media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split--flip .split__media { order: 2; }
}

/*
    LA FOTOGRAFIA CHE SPORGE DALL'ANGOLO.

    Nel modello accanto all'immagine grande ce n'e' una seconda, piu' piccola,
    con una cornice bianca, appoggiata sull'angolo in basso a destra. E' quella
    che da' profondita' alla banda: due fotografie affiancate sono due
    fotografie; una grande e una che le si appoggia sopra sono una composizione.

    Il riempimento in basso e a destra e' quello che le fa posto: senza, la
    seconda uscirebbe dal contenitore e la banda crescerebbe.
*/
.split__media { position: relative; padding-bottom: 4.5rem; padding-right: 4.5rem; }
.split__ph    { position: relative; display: block; aspect-ratio: 4 / 4.4; border-radius: var(--r-lg); overflow: hidden; background: var(--pale); }
.split__ph img { width: 100%; height: 100%; object-fit: cover; }

.split__f2 {
    position: absolute; right: 0; bottom: 0;
    width: 58%; aspect-ratio: 4 / 3;
    border: 8px solid var(--w);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-3);
}

.split__f2 img { width: 100%; height: 100%; object-fit: cover; }
.dark .split__f2 { border-color: var(--blu); }

/* Il blocco pieno con la cifra, al posto della seconda fotografia. */
.split__badge {
    position: absolute; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: var(--s-1);
    min-width: 11rem;
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-lg);
    background: var(--azzurro);
    color: var(--w);
    box-shadow: var(--sh-3);
}

.split__badge-n { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.split__badge-c { font-size: var(--t-md); font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .92); }

.split__b { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.split__b .checks, .split__b .actions { width: 100%; }

@media (max-width: 47.99rem) {
    .split__media { padding-bottom: 3rem; padding-right: 2.5rem; }
    .split__badge { min-width: 9rem; padding: var(--s-4) var(--s-5); }
    .split__badge-n { font-size: 2rem; }
}

/* ── 5.6 la striscia delle sezioni, divisa da filetti verticali ─────────── */

.doors { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .doors { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .doors { grid-template-columns: 1.3fr repeat(3, 1fr); } }

.doors__t { display: flex; align-items: center; grid-column: 1 / -1; padding: clamp(1.75rem, 3vw, 2.75rem) 0; }
@media (min-width: 64rem) { .doors__t { grid-column: auto; padding-right: var(--s-6); } }
.doors__t h2 { font-size: var(--t-xl); max-width: 14ch; }

.door {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-2);
    padding: clamp(1.75rem, 3vw, 2.75rem) var(--s-4);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    text-align: center;
    transition: background var(--fast);
}

@media (min-width: 64rem) { .door { border-top: 0; } }
.door:hover { background: var(--pale); }

.door__c { padding: .15rem .6rem; border-radius: 999px; background: var(--pale); color: var(--azzurro); font-size: var(--t-sm); font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.door__ph { display: flex; align-items: center; justify-content: center; margin-block: .35rem; }
.door__ph svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--heading); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.door__n { color: var(--heading); font-size: var(--t-md); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.door__b { display: contents; }
.door__go { display: none; }

/* ── 5.7 la tessera localita', e la carrellata che esce dal bordo ───────── */

.places { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 64rem) { .places { grid-template-columns: minmax(0, .78fr) minmax(0, 2fr); gap: var(--s-7); } }

.rail {
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-width: 100%;
    overscroll-behavior-x: contain;
    padding-bottom: var(--s-2);
}

.rail::-webkit-scrollbar { display: none; }

/*
    LA MISURA FISSA STA SULLA CARRELLATA, non sulla tessera.

    `.place` compare in due posti: dentro `.rail`, dove scorre in orizzontale e
    deve avere una larghezza propria, e dentro `.grid--4`, dove la larghezza la
    decide la griglia. Con `flex: 0 0 15rem` dichiarato sulla tessera, la seconda
    perdeva: 240 pixel fissi dentro una colonna da 182, e a 430 di finestra il
    documento sforava di 37 — su home, catalogo e affitti brevi.

    Misurato a otto larghezze: l'unica che sbordava era 430, cioe' un telefono
    grande. Sotto non c'erano abbastanza colonne perche' si vedesse, sopra c'era
    spazio di avanzo.
*/
.place {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4.15;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--blu);
}

.rail > .place, .rail > li > .place {
    flex: 0 0 clamp(15rem, 24vw, 19.5rem);
    scroll-snap-align: start;
}

.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.place:hover img { transform: scale(1.06); }

/*
    IL VELO NON SCENDE SOTTO 0,90 DOVE C'E' DEL TESTO, e il numero e' risolto.

    Il testo e' bianco e sta sopra una fotografia che carica l'agenzia: il caso
    peggiore e' una fotografia BIANCA. Il velo e' #16304f, luminanza 0,0285;
    composto con alfa `a` sopra il bianco da' L = a*0,0285 + (1-a). Perche' il
    bianco tenga i 4,5:1 che si chiedono a questo corpo serve L ≤ 0,1833, cioe'
    **a ≥ 0,841**. Sotto il 22% dell'altezza il velo sta a 0,90; sopra si apre in
    fretta, perche' una fotografia interamente coperta non e' una fotografia.
*/
.place::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(22, 48, 79, .94) 0%,
        rgba(22, 48, 79, .90) 22%,
        rgba(22, 48, 79, .28) 56%,
        rgba(22, 48, 79, .06) 100%);
}

.place__b { position: absolute; z-index: 2; inset: auto 0 0; padding: var(--s-5); }
.place__n { display: block; color: var(--w); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.place__c { display: block; color: rgba(255, 255, 255, .82); font-size: var(--t-md); line-height: 1.6; font-variant-numeric: tabular-nums; }

/* la pastiglia in alto a destra della tessera */
.place__k {
    position: absolute; z-index: 2; top: var(--s-4); right: var(--s-4);
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 999px;
    background: var(--w); color: var(--blu);
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.place__k svg { width: .85rem; height: .85rem; fill: none; stroke: var(--azzurro); stroke-width: 2.4; }

/* ── 5.8 le esperienze: stessa forma della tessera localita' ────────────── */

.exp { position: relative; display: block; aspect-ratio: 4 / 4.6; border-radius: var(--r-lg); overflow: hidden; background: var(--blu); }
.exp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.exp:hover img { transform: scale(1.06); }

.exp__b {
    position: absolute; z-index: 1; inset: auto 0 0;
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-7) var(--s-5) var(--s-5);
    background: linear-gradient(to top,
        rgba(22, 48, 79, .94) 0%,
        rgba(22, 48, 79, .90) 84%,
        rgba(22, 48, 79, 0) 100%);
    color: var(--w);
}

/* Sopra una fotografia l'etichetta e' BIANCA, mai azzurra: sul composito col
   velo l'azzurro chiaro scende a 2,80:1 e nessuna opacita' ragionevole lo salva.
   Il bianco sullo stesso fondo tiene 5,98:1. */
.exp__z { display: block; color: rgba(255, 255, 255, .88); font-size: var(--t-md); font-weight: 500; }
.exp__n { display: block; color: var(--w); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.exp__x { display: block; color: rgba(255, 255, 255, .8); font-size: var(--t-md); line-height: 1.6; }

/* ── 5.9 la fisarmonica ─────────────────────────────────────────────────── */

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }

.acc summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5) 0;
    cursor: pointer; list-style: none;
    color: var(--heading); font-size: var(--t-lg); font-weight: 500; line-height: 1.4;
}

.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--pale); transition: background var(--fast); }
.acc summary i::before, .acc summary i::after { content: ''; position: absolute; inset-inline: .6rem; top: 50%; height: 2px; background: var(--azzurro); border-radius: 2px; transition: transform var(--fast); }
.acc summary i::after { transform: rotate(90deg); }
.acc details[open] summary i { background: var(--azzurro); }
.acc details[open] summary i::before, .acc details[open] summary i::after { background: var(--w); }
.acc details[open] summary i::after { transform: rotate(0deg); }
.acc__a { padding-bottom: var(--s-5); max-width: 66ch; color: var(--ink-2); }

/* ── 5.10 le pastiglie di filtro sopra una griglia ──────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }

.chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-size: var(--t-md); font-weight: 600;
    transition: border-color var(--fast), color var(--fast), background var(--fast);
}

.chip:hover, .chip.is-on { border-color: var(--azzurro); color: var(--azzurro); background: var(--pale); }
.chip b { color: var(--azzurro); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip--off { border-style: dashed; }
.chip__x { font-weight: 700; color: var(--azzurro); }

/* ── 5.11 la banda fotografica ──────────────────────────────────────────── */

.photoband { position: relative; isolation: isolate; overflow: hidden; }
.photoband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* Calibrato sul caso peggiore — una fotografia bianca: sotto lo 0,84 il testo
   piccolo di questa banda scende sotto il 4,5:1. */
.photoband::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(22, 48, 79, .95) 0%, rgba(22, 48, 79, .90) 52%, rgba(22, 48, 79, .86) 100%);
}

/*
    `.photoband__f` E' LO SFONDO DELLA BANDA, non una fotografia che sporge.

    L'avevo letto al contrario e l'avevo vestito da riquadro sovrapposto con la
    cornice bianca: in pagina usciva un rettangolo bianco vuoto di 320 per 240
    appoggiato sul blu, che sembrava un caricamento fallito. Il partial invece
    chiede il file da 2560 con `sizes="100vw"` — cioe' dichiara di essere
    l'immagine a tutta larghezza, e lo era anche nel foglio vecchio.

    `z-index: -2` la manda sotto il velo dichiarato da `.photoband::before`, che
    sta a -1: e' l'ordine che rende leggibile il testo sopra.
*/
.photoband__f {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.photoband__f img { width: 100%; height: 100%; object-fit: cover; }

/* I ruoli su fotografia: il velo e' gia' dichiarato da `.photoband`, qui servono
   soltanto i colori del testo. */
.on-photo {
    --text: rgba(255, 255, 255, .84);
    --heading: var(--w);
    --ink-2: rgba(255, 255, 255, .82);
    --ink-3: rgba(255, 255, 255, .68);
    --line-2: rgba(255, 255, 255, .45);
    color: var(--text);
}

/* Sul composito col velo l'azzurro chiaro tiene 3,82:1 contro il 4,5 che un
   occhiello di questo corpo chiede: qui e' bianco. */
.on-photo .eyebrow { color: rgba(255, 255, 255, .92); }

/* ── 5.12 la riga-manifesto ─────────────────────────────────────────────── */

.line { padding-block: clamp(2rem, 4vw, 3rem); }

.line__in {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--s-3);
    color: var(--heading);
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: 500;
    text-align: center; line-height: 1.5;
}

.line svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--azzurro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.line u { text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--azzurro); padding-bottom: 1px; }

/* ── 5.13 la cifra, e la scheda in vetrina dell'apertura ────────────────── */

.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat__n { color: var(--heading); font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat__c { color: var(--ink-2); font-size: var(--t-md); max-width: 18ch; }

.showcase { display: block; padding: var(--s-5); background: var(--w); border-radius: var(--r-lg); box-shadow: var(--sh-3); color: var(--ink-2); transition: transform var(--fast); }
.showcase:hover { transform: translateY(-4px); }
.showcase__top { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.showcase__t { display: block; margin-bottom: var(--s-3); color: var(--blu); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }
.showcase__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }

.kind { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-3); background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1); text-align: center; }
.kind__n { color: var(--blu); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kind__t { color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kind__ic { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--pale); color: var(--azzurro); }
.kind__ic svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.kinds { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.ticker { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }


/* ══════════════════════════════════════════════════════════ 6. IL GUSCIO ══ */

/* ── 6.1 la testata ─────────────────────────────────────────────────────────
   Una fila sola, appiccicata in cima, con il filetto sotto. Niente sfocatura:
   `backdrop-filter` obbliga il browser a ridisegnare e sfocare tutto quello che
   scorre sotto, a ogni fotogramma, e su una home di settemila pixel e' il
   singolo effetto piu' caro della pagina. */

.top {
    position: sticky; top: 0; z-index: 50;
    background: var(--w);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--fast);
}

.top.is-stuck { box-shadow: 0 6px 24px rgba(28, 61, 110, .07); }
.top__in { display: flex; align-items: center; gap: var(--s-5); min-height: 5.25rem; }

.brand { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.brand__m { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 7px; background: var(--blu); flex: 0 0 auto; }
.brand__m svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--w); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand__n { color: var(--blu); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; max-width: 9ch; }
.dark .brand__n { color: var(--w); }
.dark .brand__m { background: var(--w); }
.dark .brand__m svg { stroke: var(--blu); }

/*
    LA SOGLIA DELLA NAVIGAZIONE E' 80rem, e il numero e' misurato.

    Otto voci piu' il numero e il bottone: sotto i 1280 pixel la fila andava a
    capo — tre righe a 1024, due fino a 1280 — cioe' su quasi tutti i portatili.
    Misurato riga per riga prima di spostarla, e rimisurato dopo su ogni
    larghezza da 320 a 1920 a passi di sedici.
*/
.nav { display: none; }

@media (min-width: 79rem) {
    .nav { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.75rem); margin-left: var(--s-6); }
    .nav__l { color: var(--blu); font-size: var(--t-base); font-weight: 600; opacity: .75; white-space: nowrap; transition: opacity var(--fast), color var(--fast); }
    .nav__l:hover { opacity: 1; color: var(--azzurro); }
    .nav__l.is-on { opacity: 1; color: var(--azzurro); }
}

.top__end { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }

.top__tel { display: none; align-items: center; gap: .7rem; color: var(--blu); font-size: var(--t-base); font-weight: 700; white-space: nowrap; }
.top__tel i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--pale); flex: 0 0 auto; }
.top__tel svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--azzurro); stroke-width: 1.8; }

/* Il numero non sta piu' nella testata (vedi il commento nel partial): la regola
   resta perche' `.top__tel` potrebbe tornare, ma non la usa nessuno. */

.top__cta { display: none; }
@media (min-width: 30rem) { .top__cta { display: inline-flex; } }

/* Il pannello del telefono e' un `<details>`: funziona prima di ogni script. */
.burger { position: relative; }
@media (min-width: 79rem) { .burger { display: none; } }

.burger summary {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.875rem; height: 2.875rem; padding: 0 .6rem;
    border: 1px solid var(--line-2); border-radius: var(--r);
    list-style: none; cursor: pointer;
}

.burger summary::-webkit-details-marker { display: none; }
.burger summary span { display: block; height: 2px; background: var(--blu); border-radius: 2px; transition: transform var(--fast); }
.burger[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[open] summary span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.burger__panel {
    position: absolute; right: 0; top: calc(100% + var(--s-3));
    min-width: 16rem;
    display: flex; flex-direction: column;
    padding: var(--s-4);
    background: var(--w); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}

.burger__panel nav { display: flex; flex-direction: column; }
.burger__panel a { padding: var(--s-3) var(--s-2); color: var(--blu); font-size: var(--t-base); font-weight: 600; border-radius: var(--r-sm); }
.burger__panel a:hover { background: var(--pale); }
.burger__tel { margin-top: var(--s-2); padding-top: var(--s-4) !important; border-top: 1px solid var(--line); color: var(--azzurro) !important; }

/* ── 6.2 il piede ───────────────────────────────────────────────────────── */

.foot { background: var(--blu); color: rgba(255, 255, 255, .72); padding-block: clamp(3.5rem, 6vw, 5rem) var(--s-6); font-size: var(--t-md); line-height: 1.9; }
.foot__top { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .foot__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); } }
.foot__brand { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.foot__lead { color: rgba(255, 255, 255, .72); max-width: 34ch; }
.foot__reach { display: flex; flex-direction: column; }
.foot__reach a { color: var(--w); font-size: var(--t-base); font-weight: 700; }
.foot__reach a:hover { color: var(--azzurro-2); }
.foot__cols { display: contents; }
.foot__col { display: flex; flex-direction: column; }
.foot__col h3 { margin-bottom: var(--s-3); color: var(--w); font-size: var(--t-base); font-weight: 700; }
.foot__col a, .foot__prefs { color: rgba(255, 255, 255, .72); font-size: var(--t-md); transition: color var(--fast); }
.foot__col a:hover, .foot__prefs:hover { color: var(--w); }
.foot__prefs { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.foot__base { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--t-md); color: rgba(255, 255, 255, .55); }


/* ══════════════════════════════════════════════ 7. LE PAGINE ══════════════ */

/* ── 7.1 l'apertura della home: la casa in vetrina, a tutto schermo ─────── */

.hero {
    position: relative; isolation: isolate;
    min-height: min(44rem, 84svh);
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: var(--blu);
    padding: 0;
    --text: rgba(255, 255, 255, .88);
    --heading: var(--w);
    --ink-2: rgba(255, 255, 255, .88);
    --ink-3: rgba(255, 255, 255, .7);
    --line-2: rgba(255, 255, 255, .45);
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/*
    IL VELO E' FORTE DOVE CADE IL TESTO, e il resto della fotografia respira.

    La fotografia la carica l'agenzia e puo' essere qualunque cosa: una spiaggia
    a mezzogiorno e' quasi bianca. Nella fascia bassa, dove stanno occhiello,
    titolo, bottoni e dati, l'opacita' non scende sotto 0,84 — la soglia
    calcolata perche' il bianco tenga 4,5:1 sul caso peggiore.
*/
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top,
        rgba(28, 61, 110, .93) 0%,
        rgba(28, 61, 110, .86) 34%,
        rgba(28, 61, 110, .32) 72%,
        rgba(28, 61, 110, .45) 100%);
}

.hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: var(--s-6); }
.hero__say { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); color: var(--w); }
.hero__say h1 { color: var(--w); max-width: 15ch; }
.hero__say p { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.hero .eyebrow { color: rgba(255, 255, 255, .9); }

@media (min-width: 62rem) {
    .hero__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: var(--s-8); }
}

/* ── 7.2 l'apertura delle pagine interne ────────────────────────────────── */

.phero {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--blu);
    padding-block: clamp(3rem, 6vw, 5.5rem);
    /* I ruoli chiari: tutto quello che sta qui dentro — sommari, briciole,
       pastiglie, bottoni — si veste da solo senza una regola per componente. */
    --text: rgba(255, 255, 255, .88);
    --heading: var(--w);
    --ink-2: rgba(255, 255, 255, .88);
    --ink-3: rgba(255, 255, 255, .7);
    --line-2: rgba(255, 255, 255, .45);
    color: var(--text);
}
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.phero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(28, 61, 110, .95) 0%, rgba(28, 61, 110, .88) 55%, rgba(28, 61, 110, .8) 100%); }
.phero--shot::before { background: linear-gradient(95deg, rgba(28, 61, 110, .95) 0%, rgba(28, 61, 110, .88) 55%, rgba(28, 61, 110, .8) 100%); }
.phero__in { display: grid; gap: var(--s-5); }
@media (min-width: 62rem) { .phero__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--s-7); align-items: end; } }
.phero__say { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.phero__say h1 { color: var(--w); max-width: 20ch; font-size: var(--t-3xl); }
/* .92 e non .85: il testo sta sopra una fotografia che l'agenzia sceglie, e su
   una busy si legge a fatica anche quando il contrasto misurato passa. */
.phero__sub { color: rgba(255, 255, 255, .92); max-width: 58ch; }
.phero .eyebrow { color: rgba(255, 255, 255, .9); }
.phero__aside { display: flex; flex-direction: column; gap: var(--s-2); }
.phero__ref { color: rgba(255, 255, 255, .7); font-size: var(--t-md); }
.phero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.phero .price { color: var(--w); font-size: clamp(1.75rem, 3vw, 2.375rem); }
.phero .price small { color: rgba(255, 255, 255, .75); }

/* le briciole */
.crumbs, .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-md); margin-bottom: var(--s-4); }
.crumbs a { color: rgba(255, 255, 255, .8); }
.crumbs a:hover { color: var(--w); }
.crumbs span { color: rgba(255, 255, 255, .6); }
.crumbs i { color: rgba(255, 255, 255, .4); font-style: normal; }

/* ── 7.3 la barra dei filtri ────────────────────────────────────────────── */

.filters { margin-bottom: var(--s-6); }
.filters__details { display: block; }

.filters__sum {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    background: var(--w);
    color: var(--heading); font-size: var(--t-base); font-weight: 600;
    list-style: none; cursor: pointer;
}

.filters__sum::-webkit-details-marker { display: none; }
.filters__sum svg { flex: 0 0 auto; }
.filters__n { margin-left: auto; padding: .1rem .55rem; border-radius: 999px; background: var(--azzurro); color: var(--w); font-size: var(--t-xs); font-weight: 700; }

/* Il contenitore non e' piu' una scheda: la scheda e' LA BARRA. Qui resta solo
   l'impilamento delle due righe. */
.filters__box { display: grid; gap: var(--s-4); margin-top: var(--s-3); }

/* ── 7.3-bis LA BARRA DI RICERCA ────────────────────────────────────────────

   Quattro segmenti divisi da filetti verticali dentro un solo riquadro, e il
   bottone pieno che chiude la barra a destra riempiendo la sua cella dal bordo
   in su. E' la forma di una barra di ricerca, non di un modulo: si legge come
   UNA riga — «dove, che cosa, quanto» — invece che come quattro caselle da
   compilare.

   L'etichetta sta dentro il segmento, sopra il valore, e non ha un bordo suo: il
   bordo ce l'ha la barra. Quattro campi contornati uno accanto all'altro sono
   quattro oggetti; quattro segmenti dentro un contorno sono un oggetto solo.
   -------------------------------------------------------------------------- */

.fbar {
    display: grid;
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

/* Sul telefono i segmenti si impilano e il filetto passa da verticale a
   orizzontale; il bottone chiude la colonna a tutta larghezza. */
.fbar__f { display: block; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); min-width: 0; }
.fbar__f:first-child { border-top: 0; }

/*
    TRE DISPOSIZIONI, E LA VIA DI MEZZO SERVE.

    Con una sola soglia — impilata sotto, tutta in riga sopra — a 900 pixel la
    riga aveva quattro segmenti piu' il bottone in ottocento: 145 pixel per
    segmento, e «Una settimana» usciva «Una settima», la data «gg/mm/aac».
    Misurato disegnando il testo su una tela e confrontandolo con lo spazio
    disponibile, perche' un `<select>` troncato NON ha `scrollWidth` maggiore di
    `clientWidth`: il browser taglia l'etichetta e non se ne lamenta. Il primo
    controllo che avevo scritto non lo vedeva.

      < 56rem   una colonna, filetti orizzontali, bottone in fondo
      56-75rem  due colonne, bottone a tutta larghezza sotto
      ≥ 75rem   una riga sola: quattro segmenti e il bottone
*/
@media (min-width: 56rem) {
    .fbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fbar__f { border-top: 0; border-left: 1px solid var(--line); }
    .fbar__f:nth-child(odd) { border-left: 0; }
    .fbar__f:nth-child(n+3) { border-top: 1px solid var(--line); }
    .fbar__go { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}

@media (min-width: 75rem) {
    .fbar { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
    .fbar__f { border-top: 0; border-left: 1px solid var(--line); }
    .fbar__f:first-child { border-left: 0; }
    .fbar__f:nth-child(n+3) { border-top: 0; }
    .fbar__go { grid-column: auto; border-top: 0; }
}

.fbar__l { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: var(--t-md); line-height: 1.4; }

/*
    I CONTROLLI DENTRO LA BARRA NON HANNO UN CONTORNO LORO.

    `!important` non serve e non si usa: queste regole hanno specificita'
    maggiore di `.f input, .form input, …`, che e' un elenco di selettori di
    classe singoli, perche' nominano DUE classi.
*/
.fbar__f input, .fbar__f select {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--heading);
    font: inherit;
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.5;
}

.fbar__f select {
    appearance: none;
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1rem;
}

/* Il fuoco si vede sul SEGMENTO, non sul campo: il campo non ha un bordo su cui
   posarsi, e un contorno intorno al testo nudo sembrerebbe un errore. */
.fbar__f input:focus-visible, .fbar__f select:focus-visible { outline: 0; }
.fbar__f:focus-within { background: var(--pale); }
.fbar__f:focus-within .fbar__l { color: var(--azzurro); }

.fbar__go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-6);
    border: 0;
    background: var(--blu);
    color: var(--w);
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fast);
}

.fbar__go:hover { background: var(--azzurro); }
.fbar__go svg { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

/* ── 7.3-ter la riga sotto: «altri filtri» a sinistra, «ordina» a destra ──── */

/*
    LA RIGA E' UNA GRIGLIA DI DUE COLONNE E DUE FILE, e il `<details>` non e' un
    riquadro: e' `display: contents`.

    Il pannello «altri filtri» sta DENTRO il `<details>`, e il `<details>` stava
    nella colonna di sinistra: aperto, il pannello si fermava dove finiva quella
    colonna — centottanta pixel prima del bordo della barra sopra, con «Ordina»
    che gli galleggiava accanto. Due oggetti larghi diversi, incolonnati male.

    `display: contents` toglie il riquadro del `<details>` dall'impaginazione e
    promuove i suoi due figli — il riassunto e il pannello — a celle della
    griglia: il riassunto va in alto a sinistra, «Ordina» in alto a destra, e il
    pannello prende la riga sotto per intero.

    NON ROMPE L'APRI E CHIUDI: il browser nasconde il contenuto di un `<details>`
    chiuso agendo sul suo contenuto interno, non sul riquadro esterno — provato
    prima di adottarlo.
*/
.frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-4); }

.fmore { display: contents; }

/*
    ANCHE `::details-content` DEVE SPARIRE DALL'IMPAGINAZIONE, o il trucco si
    ferma a meta'.

    `display: contents` sul `<details>` promuove i figli a celle della griglia —
    ma i figli DIVERSI DAL RIASSUNTO non sono figli diretti: il browser li
    avvolge in un riquadro anonimo, `::details-content`, ed e' QUELLO a finire
    nella cella. Il pannello ereditava quindi la larghezza della colonna di
    sinistra: misurato 1050 contro i 1300 della barra sopra, con `grid-column:
    1 / -1` applicato e ignorato perche' applicato all'elemento sbagliato.

    Reso trasparente anche lui, il pannello arriva davvero in griglia e la sua
    collocazione vale.

    SOLO CON `[open]`, ed e' il punto delicato: quel riquadro anonimo e' anche
    quello che PORTA `content-visibility: hidden` quando il `<details>` e'
    chiuso. Renderlo trasparente sempre toglie il riquadro e con lui la regola
    che nasconde: il pannello restava dipinto anche da chiuso — verificato con
    `elementFromPoint`, non a occhio. Da chiuso vale il comportamento
    predefinito; da aperto il riquadro sparisce e il pannello va in griglia.
*/
.fmore[open]::details-content { display: contents; }
.fmore__s { grid-column: 1; grid-row: 1; justify-self: start; }
.fsort    { grid-column: 2; grid-row: 1; }
.fmore__grid { grid-column: 1 / -1; grid-row: 2; }

.fmore__s {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--w);
    color: var(--heading);
    font-size: var(--t-md); font-weight: 600;
    list-style: none; cursor: pointer;
    transition: border-color var(--fast), color var(--fast);
}

.fmore__s::-webkit-details-marker { display: none; }
.fmore__s:hover { border-color: var(--azzurro); color: var(--azzurro); }
.fmore__s svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 1.8; }
.fmore__n { padding: 0 .45rem; border-radius: 999px; background: var(--azzurro); color: var(--w); font-size: var(--t-xs); font-weight: 700; }

/* La freccetta che gira all'apertura: e' l'unico segnale che dice se il pannello
   e' aperto, e senza di esso il riassunto sembra un bottone che non fa niente. */
.fmore__s i { width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--fast); }
.fmore[open] .fmore__s i { transform: rotate(-135deg) translate(-2px, -2px); }

.fmore__grid {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    padding: var(--s-5);
    background: var(--w);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}

.fmore__grid .f--wide { grid-column: 1 / -1; }
.fmore__act { grid-column: 1 / -1; }

/* `.f` dentro il pannello e' una `<label>`: l'etichetta e' il primo `<span>`. */
.fmore__grid .f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.fmore__grid .f > span { color: var(--ink-2); font-size: var(--t-md); }

.fsort { display: inline-flex; align-items: center; gap: var(--s-3); }
.fsort > span { color: var(--ink-2); font-size: var(--t-md); white-space: nowrap; }

.fsort select {
    min-height: 2.5rem;
    padding: 0 var(--s-6) 0 var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--w);
    color: var(--heading);
    font: inherit; font-size: var(--t-md); font-weight: 600;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    background-size: 1.0625rem;
}
.filters__top { display: grid; gap: var(--s-3); align-items: end; }
@media (min-width: 40rem) { .filters__top { grid-template-columns: minmax(0, 1fr) auto; } }
/* 10rem e non 9: «Una settimana» dentro un menu a tendina da 9rem usciva
   tagliato a «Una settima». */
.filters__fields { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.filters__go { justify-self: stretch; }
@media (min-width: 40rem) { .filters__go { justify-self: start; } }

/*
    SOPRA LE 56rem IL PANNELLO E' SEMPLICEMENTE APERTO.

    `display: grid` non e' decorazione: `.filters__box` sta dentro un `<details>`
    senza `open`, e il browser nasconde il contenuto di un `<details>` chiuso. Se
    qui si dichiara solo il margine, sul desktop la barra dei filtri SPARISCE e
    resta una banda bianca vuota alta duecento pixel — che e' esattamente quello
    che era appena successo, visto in fotografia.

    Un filtro che si deve aprire per essere visto, su uno schermo che ha lo spazio
    per mostrarlo, e' un clic chiesto senza ragione: il riassunto sparisce e il
    pannello resta aperto.
*/
@media (min-width: 56rem) {
    .filters__details > .filters__sum { display: none; }

    /*
        DUE RIGHE PER APRIRE UN `<details>`, e servono tutte e due.

        I browser recenti nascondono il contenuto di un `<details>` chiuso con
        `content-visibility: hidden` applicato al suo contenuto interno, non con
        `display: none` sui figli: un `display: grid` dichiarato sul figlio NON lo
        sovrascrive, e il pannello resta nel layout — misurato 1300 x 238 con sette
        campi dentro — ma non viene dipinto. In pagina si vedeva una banda bianca
        vuota dove doveva esserci la barra dei filtri, e `elementFromPoint` al
        centro del pannello restituiva la pagina sotto.

        `::details-content` e' l'unico selettore che arriva a quel contenuto ed e'
        recente: Chrome 131, Safari 18.4. Dove non esiste — Firefox mentre scrivo —
        il pseudo-elemento viene ignorato e a tenere aperto il pannello resta il
        `display: grid` sul figlio, che li' funziona ancora. Una regola sola non
        copre tutti e due i casi.

        Provato nel browser prima di scriverlo: senza `::details-content` il
        pannello non si dipinge, con `display: contents` sul `<details>` nemmeno.
    */
    .filters__details::details-content { content-visibility: visible; }
    .filters__details > .filters__box { display: grid; margin-top: 0; }
}

.f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.f > label { color: var(--ink-2); font-size: var(--t-md); font-weight: 600; }

.f input, .f select,
.form input, .form textarea, .form select,
.finder__f input, .finder__f select {
    width: 100%;
    min-height: 3.125rem;
    padding: 0 var(--s-4);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--w);
    color: var(--ink);
    font: inherit;
    font-size: var(--t-md);
    transition: border-color var(--fast), box-shadow var(--fast);
}

.form textarea { min-height: 10rem; padding-block: var(--s-3); resize: vertical; line-height: 1.7; }

.f input:focus-visible, .f select:focus-visible,
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}

/*
    LA FRECCIA DEL MENU A TENDINA E' DISEGNATA, e non quella del sistema.

    Il `<select>` con l'aspetto predefinito e' l'elemento che fa assomigliare di
    piu' una pagina a un modulo amministrativo, e su macOS e' anche alto
    diversamente da un `<input>` dichiarato accanto: nella barra dei filtri si
    vedeva, i campi finivano disallineati.
*/
.f select, .form select, .finder__f select {
    appearance: none;
    padding-right: var(--s-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    background-size: 1.125rem;
}

.f input[type="search"] { appearance: none; }
.f input[type="search"]::-webkit-search-decoration,
.f input[type="search"]::-webkit-search-cancel-button { appearance: none; }

.onfilters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.onfilter { display: inline-flex; align-items: center; gap: var(--s-2); padding: .4rem .9rem; border-radius: 999px; background: var(--pale); color: var(--ink-2); font-size: var(--t-md); }
.onfilter a { color: var(--azzurro); font-weight: 700; }
.onfilter--off { background: transparent; border: 1px dashed var(--line-2); }

.count { display: block; margin-bottom: var(--s-5); color: var(--ink-2); font-size: var(--t-base); }
.count b { color: var(--heading); font-weight: 700; }

/* la ricerca a cavallo dell'apertura */
.finder { position: relative; z-index: 5; margin-top: -3.5rem; }
.finder__box { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--w); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
@media (min-width: 56rem) { .finder__box { grid-template-columns: 1fr 1fr 7rem 7rem auto; align-items: end; } }
@media (max-width: 55.99rem) { .finder__box { grid-template-columns: 1fr 1fr; } .finder__f--wide, .finder__box .btn { grid-column: 1 / -1; } .finder { margin-top: var(--s-5); } }
.finder__f { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.finder__f label { color: var(--ink-2); font-size: var(--t-md); font-weight: 600; }

/* ── 7.4 l'impaginazione ────────────────────────────────────────────────── */

.pages, .pagination__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2); margin-top: var(--s-8); }
.pages a, .pages span, .pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.875rem; height: 2.875rem; padding-inline: var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--heading); font-size: var(--t-md); font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.pages a:hover, .pagination__link:hover { border-color: var(--azzurro); color: var(--azzurro); }
.pages [aria-current], .pagination__link--current { background: var(--blu); border-color: var(--blu); color: var(--w); }
.pages .is-gap, .pagination__gap { border-color: transparent; }

/* ── 7.5 la prosa lunga ─────────────────────────────────────────────────── */

.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--s-4); line-height: 1.85; }
.prose p:last-child { margin-bottom: 0; }
.prose--legal { max-width: 76ch; font-size: var(--t-md); }
.prose--intro { max-width: 46ch; }
.prose--intro p { font-size: var(--t-xl); line-height: 1.45; letter-spacing: -.015em; color: var(--ink-2); margin-bottom: var(--s-5); }
.prose--intro p:first-child { color: var(--heading); font-weight: 500; }

@media (min-width: 62rem) {
    .prose--intro { max-width: 62rem; columns: 2; column-gap: var(--s-8); }
    .prose--intro p { break-inside: avoid; }
}

/* ── 7.6 la scheda di un immobile: due colonne ──────────────────────────── */

.pcols { display: grid; gap: var(--s-6); }
@media (min-width: 64rem) { .pcols { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s-7); align-items: start; } }
.pcols__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-7); }
.pcols__side { min-width: 0; }
@media (min-width: 64rem) { .pcols__side { position: sticky; top: calc(5.25rem + var(--s-5)); } }
.pblock { display: flex; flex-direction: column; gap: var(--s-4); }
.pblock > h2 { font-size: var(--t-xl); }

.pbox { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: var(--w); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pbox__p { font-size: 2rem; font-weight: 700; color: var(--heading); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pbox__t { color: var(--ink-2); font-size: var(--t-md); }
.pbox__go, .pbox__tel { width: 100%; }

/* il dossier: griglia coi filetti, disegnati col trucco del fondo */
.specs, .sheet, .dossier { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

@media (min-width: 40rem) {
    .specs, .sheet, .dossier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /*
        LA CELLA VUOTA IN FONDO, e perche' c'era.

        La griglia disegna i propri filetti col fondo: lo sfondo del contenitore
        e' il colore della riga, le celle hanno il fondo della scheda, e un `gap`
        di un pixel lascia vedere quello di sotto. Con un numero DISPARI di dati
        l'ultima mezza riga non ha nessuna cella che la copra, e si vedeva un
        rettangolo grigio in fondo alla scheda. L'appartamento di Quercianella ne
        ha nove.
    */
    .specs > .sp:last-child:nth-child(odd),
    .sheet > .sheet__r:last-child:nth-child(odd),
    .dossier > .dossier__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/*
    LA RIGA DEL DOSSIER E' ICONA + TESTO, AFFIANCATI.

    Il markup e' `<div class="sp dossier__row"><svg><div><dt><dd></div></div>`:
    due figli, quindi due colonne — 1,5rem per il segno e il resto per la coppia
    etichetta/valore. `dt` e `dd` stanno DENTRO il secondo figlio e non sono celle
    di questa griglia, quindi non hanno bisogno di collocazione.

    Una riga piu' sotto rimetteva `grid-template-columns: 1fr` su
    `.dossier__row` — che e' lo STESSO elemento di `.sp` — per via del blocco che
    doveva servire a `.sheet__r`. Risultato: una colonna sola, l'icona impilata
    sopra il testo e la riga alta il doppio. Sulla scheda di un affitto breve, che
    ha otto dati, la banda cresceva di quattrocento pixel di niente.
*/
/*
    `.sp` HA DUE FORME, e il foglio le deve distinguere da solo.

      · il dossier di un immobile:  <svg> + <div><dt><dd></div>   → due colonne
      · la scheda del soggiorno:    <dt> + <dd> diretti           → una colonna

    Le stampa lo stesso partial con la stessa classe. Con due colonne fisse la
    seconda forma metteva l'etichetta dentro una colonna da 1,5rem: «Notti
    minime» usciva spezzato in «Notti / minime» con il 2 in mezzo, e
    «Check-in / check-out» in quattro righe. Visto in fotografia sulla scheda di
    un affitto breve.

    `:has(> svg)` legge la differenza dal contenuto invece di chiedere al
    template una classe in piu'. Il caso senza icona e' il DEFAULT — una colonna
    sola, che e' anche il ripiego giusto dove `:has()` non arrivasse.
*/
.sp, .dossier__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    padding: var(--s-4) var(--s-5);
    background: var(--card);
}

.sp:has(> svg), .dossier__row:has(> svg) {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--s-3);
}

/* `.sheet__r` invece NON ha l'icona — e' la coppia etichetta/valore della pagina
   contatti — quindi una colonna sola e i due pezzi incolonnati. */
.sheet__r { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s-4) var(--s-5); background: var(--card); }
.sp svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--azzurro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sp dt, .dossier__label, .sheet__k { color: var(--ink-2); font-size: var(--t-md); line-height: 1.5; }
.sp dd, .dossier__value, .sheet__v { margin: 0; color: var(--heading); font-size: var(--t-base); font-weight: 600; line-height: 1.5; }
.dossier__value--mono { font-variant-numeric: tabular-nums; }

.ebar { display: flex; gap: 2px; margin-top: var(--s-2); }
.ebar span { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--line); }
.ebar .on { background: var(--azzurro); }
.eclass { font-weight: 700; }

/* ── 7.7 la galleria: il mosaico ────────────────────────────────────────── */

.pmosaic { position: relative; }
.pmosaic__grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 2.4 / 1; border-radius: var(--r-lg); overflow: hidden; }
.pmosaic__cell { position: relative; display: block; overflow: hidden; background: var(--pale); min-width: 0; }
.pmosaic__cell:first-child { grid-column: span 2; grid-row: span 2; }
.pmosaic__tile { position: relative; display: block; width: 100%; height: 100%; }
.pmosaic__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.pmosaic__cell:hover img { transform: scale(1.04); }
.pmosaic__all { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pmosaic__veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(28, 61, 110, .72); color: var(--w); font-size: var(--t-base); font-weight: 700; }

/* La griglia di base ha otto posti e il partial ne mostra al massimo quattro:
   chi si allarga a prendere quelli che restano lo dicono queste regole, che
   leggono quante celle ci sono con `:nth-last-child` invece di farselo dire. */
.pmosaic__cell:nth-child(2):last-child { grid-column: span 2; grid-row: span 2; }
.pmosaic__cell:nth-child(2):nth-last-child(2),
.pmosaic__cell:nth-child(3):last-child { grid-column: span 2; }
.pmosaic__cell:nth-child(4):last-child { grid-column: span 2; }
.pmosaic__cell:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }

@media (max-width: 47.99rem) { .pmosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.3 / 1; } }

/* ── 7.8 i moduli ───────────────────────────────────────────────────────── */

.pform { max-width: 52rem; margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--w); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pform > .form__title { margin-bottom: var(--s-2); }
.pform > .lead { margin-bottom: var(--s-6); }
.pform > .prefill { display: block; margin-bottom: var(--s-2); }

.form { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.form__title { grid-column: 1 / -1; }
.form__full, .form__wide, .form__actions, .form__consent, .form__errors, .form__stay { grid-column: 1 / -1; }
.form label, .form__label { display: block; margin-bottom: var(--s-2); color: var(--heading); font-size: var(--t-md); font-weight: 600; }
.form__required { color: var(--azzurro); }
.form .hint, .form__hint { display: block; margin-top: var(--s-1); color: var(--ink-3); font-size: var(--t-md); font-weight: 400; line-height: 1.5; }
.form__error, .form .errmsg { margin-top: var(--s-1); color: #8c1d18; font-size: var(--t-md); }
.form__errors { padding: var(--s-4); border: 1px solid #e3b7b3; border-radius: var(--r); background: #fdf3f2; color: #8c1d18; }
.form__errors-title { font-weight: 700; margin-bottom: var(--s-2); }

/*
    `.form .form__consent` E NON `.form__consent`, e la differenza e' UNA CASELLA
    LARGA 736 PIXEL.

    Le righe con la spunta sono `<label>` dentro `.form`, e `.form label` ha
    specificita' (0,1,1) contro (0,1,0): vinceva la prima, `display: grid` non
    arrivava mai e la casella — che eredita `width: 100%` da `.form input` — si
    stirava per tutta la larghezza del modulo con l'etichetta sotto.
*/
.form .form__consent, .form .form__callback, .form .form__check, .form__check {
    display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); align-items: start;
    margin-bottom: 0; color: var(--ink-2); font-size: var(--t-md); font-weight: 400;
}

.form .form__consent input, .form .form__callback input, .form .form__check input, .form__check input {
    width: 1.25rem; min-width: 0; min-height: 0; margin: .3rem 0 0; padding: 0; accent-color: var(--azzurro);
}

.form__field--invalid, .form input.form__field--invalid, .form textarea.form__field--invalid { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form__stay { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--pale); }
.form__stay-title { margin-bottom: var(--s-3); color: var(--heading); font-size: var(--t-md); font-weight: 700; }
.form__stay-fields { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.prefill { color: var(--ink-2); font-size: var(--t-md); }
.formbox { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.notice { padding: var(--s-4); border-radius: var(--r); background: var(--pale); color: var(--blu); font-size: var(--t-md); }
.notice--quiet { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); }

/* ── 7.9 la copertina della mappa ───────────────────────────────────────── */

/*
    DEVE SEMBRARE UNA MAPPA SPENTA, non un errore.

    Non puo' mostrare la mappa vera: le tessere arrivano da OpenStreetMap e
    chiederle manderebbe l'IP di chi guarda a un terzo prima del consenso — che e'
    la ragione per cui questa copertina esiste. Quindi si disegna: due reticoli in
    `repeating-linear-gradient`, uno fitto e uno rado. Zero richieste.
*/
.mapstage {
    position: relative;
    height: clamp(17rem, 34vh, 24rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background-color: var(--pale);
    background-image:
        repeating-linear-gradient(0deg,  rgba(47, 111, 176, .10) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(90deg, rgba(47, 111, 176, .10) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(0deg,  rgba(47, 111, 176, .05) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(47, 111, 176, .05) 0 1px, transparent 1px 22px);
    overflow: hidden;
}

.mapstage:has(.mapcanvas) { background-image: none; }
.mapface { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--s-3); height: 100%; padding: clamp(1.25rem, 3vw, 2rem); text-align: left; }
.mapface__n { color: var(--heading); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; }
.mapface__g { color: var(--ink-2); font-size: var(--t-md); max-width: 34rem; }
.mapface__p { color: var(--ink-3); font-size: var(--t-md); line-height: 1.55; max-width: 48ch; }
.mapcanvas { width: 100%; height: 100%; }
.mapstage--ko { display: flex; align-items: center; justify-content: center; padding: var(--s-6); text-align: center; color: var(--ink-2); }
.pin-d { display: block; width: 1.75rem; height: 1.75rem; border-radius: 50% 50% 50% 0; background: var(--azzurro); transform: rotate(-45deg); box-shadow: var(--sh-1); }
.pin span { display: block; transform: rotate(45deg); color: var(--w); font-size: var(--t-xs); font-weight: 700; text-align: center; line-height: 1.75rem; }
.pin--n .pin-d { background: var(--blu); }
.pop { display: flex; flex-direction: column; min-width: 11rem; max-width: 15rem; }
.pop .pop__i { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 0; color: var(--ink); }
.pop .pop__i + .pop__i { border-top: 1px solid var(--line); }
.pop .pop__t { color: var(--heading); font-size: var(--t-md); font-weight: 700; }
.pop .pop__l { color: var(--ink-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; }
.pop .pop__p { color: var(--azzurro); font-size: var(--t-md); font-weight: 700; }

/* ── 7.10 i servizi, e le altre pagine ──────────────────────────────────── */

.svc { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 64rem) { .svc { grid-template-columns: repeat(4, 1fr); } }
.sv { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-6) var(--s-5); border-left: 1px solid var(--line); }
.sv:first-child { border-left: 0; }
@media (max-width: 63.99rem) { .sv:nth-child(odd) { border-left: 0; } .sv:nth-child(n+3) { border-top: 1px solid var(--line); } }
.sv i { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; margin-bottom: var(--s-1); }
.sv i::before { content: ''; position: absolute; inset: 0; border-radius: 50% 50% 50% 8px; background: var(--pale); }
.sv svg { position: relative; width: 2.1rem; height: 2.1rem; fill: none; stroke: var(--heading); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sv h3 { font-size: var(--t-base); font-weight: 600; }
.sv p { color: var(--ink-2); font-size: var(--t-md); line-height: 1.65; max-width: 26ch; }

.ways { display: grid; gap: var(--s-5); }
.tools, .tcon, .fcon, .sbox__f { min-width: 0; }
.experience-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; }


/* ═════════════════════════════════════ 8. L'INFRASTRUTTURA ══════════════ */

/* ── 8.1 il banner dei cookie ───────────────────────────────────────────────
   Rifiutare costa esattamente quanto accettare: stessa misura, stesso peso,
   stessa riga, stesso numero di clic. E' una clausola del contratto prima che
   una scelta di stile. */

.consent { position: fixed; inset: auto 0 0; z-index: 200; background: var(--w); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(28, 61, 110, .06), 0 -18px 44px -20px rgba(28, 61, 110, .28); font-size: var(--t-md); }
.consent[hidden], .language-notice[hidden] { display: none; }
.consent__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); }

@media (min-width: 56rem) {
    .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-7); }
    .consent__panel:not([hidden]) { grid-column: 1 / -1; }
}

.consent__title { margin-bottom: var(--s-1); color: var(--azzurro); font-size: var(--t-md); font-weight: 700; }
.consent__text { color: var(--ink-2); max-width: 64ch; line-height: 1.7; }
.consent__text a { color: var(--azzurro); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/*
    `:not([hidden])` E NON `.consent__panel`.

    Il browser nasconde un elemento con `hidden` tramite `[hidden]{display:none}`
    del suo foglio predefinito, che ha la specificita' di UN selettore di
    attributo. Un `display:grid` su una CLASSE ha la stessa specificita' ma
    arriva dopo, quindi vince: il pannello delle preferenze nasceva aperto su
    ogni pagina e `consent.js` continuava a scrivere `hidden` senza effetto.
*/
.consent__panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (min-width: 48rem) { .consent__panel:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.consent__group-title { display: block; color: var(--heading); font-weight: 600; }
.consent__group-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-md); line-height: 1.5; }

/* ── 8.2 l'avviso della lingua ──────────────────────────────────────────── */

.language-notice { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 201; max-width: min(26rem, calc(100vw - var(--gutter) * 2)); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--blu); color: rgba(255, 255, 255, .84); box-shadow: var(--sh-3); font-size: var(--t-md); }
.language-notice__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: 0; }
.language-notice__text { flex: 1 1 100%; line-height: 1.55; }
.language-notice__action, .language-notice__dismiss { font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.language-notice__action { color: var(--azzurro-2); }
.language-notice__action:hover { text-decoration: underline; }
.language-notice__dismiss { border: 0; background: none; padding: 0; font-family: inherit; color: rgba(255, 255, 255, .6); }
.language-notice__dismiss:hover { color: var(--w); }

/* ── 8.3 il movimento ───────────────────────────────────────────────────────
   Niente e' nascosto senza JavaScript: le bande nascono visibili e lo script le
   rende invisibili PRIMA di rivelarle. Il contrario e' il modo in cui un sito
   diventa una pagina bianca il giorno in cui un file non si scarica. */

.up { opacity: 0; transform: translateY(10px); transition: opacity .38s ease-out, transform .38s cubic-bezier(.2,.7,.3,1); }
.up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .up { opacity: 1; transform: none; }
}

/* ── 8.4 la stampa: via tutto quello che non e' contenuto ───────────────── */

@media print {
    .top, .foot, .consent, .language-notice, .burger, .sr, .round, .arrow, .tlink { display: none; }
    body { color: #000; background: #fff; font-size: 11pt; line-height: 1.5; }
    .band, .phero, .hero { padding-block: 1rem; background: #fff; color: #000; }
    .card, .pbox, .pform, .formbox { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; }
}


/* ═══════════════════ 9. I PEZZI CHE LA RISCRITTURA AVEVA SALTATO ══════════

   Trovati con una scansione: per ogni tipo di pagina del sito, quali classi il
   DOM emette e questo foglio non dichiara. Sono componenti che stanno su UNA
   pagina sola — la scheda di un'esperienza, la pagina non trovata — quindi non si
   vedono finche' non si apre proprio quella.

   Restano fuori di proposito: `consent__body` e `consent__group`, che sono
   contenitori senza aspetto; `form__field`, che e' la classe sull'`<input>` e la
   veste `.form input`; `image`, che la veste `img`; `pmosaic__grid--N`, che e' un
   aggancio per i test — la forma del mosaico la decidono le regole `:nth-child`
   del §7.7, e due sistemi per lo stesso lavoro perdono tutti e due.
   -------------------------------------------------------------------------- */

/* ── 9.1 il dossier di un'esperienza ────────────────────────────────────────
   E' una `<dl>` e usciva con l'aspetto predefinito del browser: l'etichetta a
   sinistra e il valore rientrato di quaranta pixel, come un glossario del 1996.
   Qui e' la stessa griglia a filetti del dossier di un immobile, in una colonna. */

.experience-dossier__list { display: grid; gap: 0; }

.experience-dossier__label {
    color: var(--ink-2);
    font-size: var(--t-md);
    line-height: 1.5;
}

.experience-dossier__value {
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    color: var(--heading);
    font-size: var(--t-base);
    font-weight: 600;
    line-height: 1.5;
}

/* L'ultimo non porta il filetto: sarebbe una riga sospesa sopra il nulla. */
.experience-dossier__list > .experience-dossier__value:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* «3 h», «Da maggio a ottobre»: sono dati, e le cifre si incolonnano. */
.experience-dossier__value--data { font-variant-numeric: tabular-nums; }
.experience-dossier__link { color: var(--action); font-weight: 600; overflow-wrap: anywhere; }
.experience-dossier__link:hover { text-decoration: underline; }

/* ── 9.2 gli immobili collegati a un'esperienza ─────────────────────────── */

/* Le schede collegate stanno in una griglia, non in un elenco impilato: il
   filetto e il margine che avevo messo le disallineavano verticalmente. Lo
   spazio lo fa gia' il `gap` della griglia. */
.experience-properties__item { display: flex; min-width: 0; }
.experience-properties__item > * { width: 100%; }

/* ── 9.3 la pastiglia di uno stato «chiuso» ─────────────────────────────────
   Una stagionalita' finita, un luogo chiuso: si legge come un'informazione e non
   come un'azione, quindi e' contornata invece che piena. */

.pill--closed {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--ink-2);
}

.dark .pill--closed, .on-photo .pill--closed, .phero .pill--closed {
    border-color: rgba(255, 255, 255, .45);
    color: rgba(255, 255, 255, .88);
}

/* ── 9.4 la ricerca della pagina non trovata ────────────────────────────────
   Chi arriva su un indirizzo morto sta cercando qualcosa: la prima cosa che
   trova e' un campo per cercarlo, non un elenco di scuse. Campo e bottone sulla
   stessa riga, come una barra di ricerca vera. */

.search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    max-width: 34rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.search input {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 3.125rem;
    padding: 0 var(--s-4);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--w);
    color: var(--ink);
    font: inherit;
    font-size: var(--t-md);
    appearance: none;
}

.search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button { appearance: none; }

/* ── 9.5 il tasto «a tutto schermo» della galleria ─────────────────────── */

.vfull {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--blu);
    cursor: pointer;
    box-shadow: var(--sh-1);
}

.vfull:hover { background: var(--w); }