/* =============================================================================
   ARCHIVIO IMMOBILI  —  archive-immobile.php
   Prefisso classi: ai-

   Qui c'è SOLO ciò che sv-base.css non aveva già. La barra filtri (.filterbar,
   .field, .chips, .chip), la barra risultati (.result-bar), la griglia
   (.grid-cards), la card (.pcard) e l'intestazione (.pagehead, .breadcrumb)
   sono il design system della consegna e stanno lì.
   ========================================================================== */

/* I chip stanno sopra la barra filtri, non dentro: nella consegna erano una
   riga a sé (flex:1 1 100%) dentro il form. Qui sono link, quindi vivono fuori
   dal form e hanno bisogno del proprio margine. */
.ai-chips{ margin-bottom:.8rem; }

/* .chip è nato come <button>: da <a> serve ridichiarare ciò che il browser
   dà per scontato solo sui controlli di form. */
.ai-chips .chip{
  display:inline-flex; align-items:center;
  text-decoration:none; cursor:pointer;
}

/* "Solo immobili disponibili": una spunta, non un campo.
   Non usa la classe .field apposta — lì `input{width:100%}` stirerebbe la
   casella su tutta la colonna. Allineata in basso come gli altri controlli,
   perché .filterbar è align-items:flex-end e i .field hanno la label sopra. */
.ai-disponibili{
  display:flex; align-items:center; gap:.5rem;
  flex:none; padding-bottom:.7em;
}
.ai-disponibili input[type="checkbox"]{
  width:18px; height:18px; margin:0; flex:none;
  accent-color:var(--navy); cursor:pointer;
}
.ai-disponibili label{
  font-size:.92rem; color:var(--ink-soft); cursor:pointer;
  user-select:none; line-height:1.2;
}
.ai-disponibili input:focus-visible{
  outline:2px solid var(--navy-soft); outline-offset:2px;
}

/* Il gruppo "Filtra / Azzera" non è un campo: non deve allargarsi come i
   .field (flex:1) né restringersi sotto la propria larghezza naturale. */
.ai-filtri-azioni{
  display:flex; align-items:center; gap:.9rem;
  flex:none;
}
.ai-azzera{
  font-size:.88rem; color:var(--muted); text-decoration:underline;
  text-underline-offset:3px;
}
.ai-azzera:hover{ color:var(--navy); }

/* ---- Pannello filtri pieghevole -----------------------------------------
   Sopra i 760px NON ESISTE: display:contents toglie di mezzo il contenitore
   come scatola e i .field tornano figli diretti del flex .filterbar — cioè la
   barra di sempre, senza una riga di layout che cambi. La testata e la sua
   casella non si vedono, e la casella con display:none non è nemmeno una tappa
   del Tab: da desktop non c'è niente da aprire, quindi non deve esserci niente
   da mettere a fuoco.

   Il collasso vero sta nel blocco responsive in fondo al file. */
.ai-piega-tgl,
.ai-piega-testa{ display:none; }
.ai-piega-corpo{ display:contents; }

/* Ordinamento: un form a sé, quindi label + select + bottone su una riga. */
.ai-ordina{
  display:flex; align-items:center; gap:.6rem;
  margin:0; flex-wrap:wrap;
}
.ai-ordina label{
  font-size:.85rem; color:var(--muted);
}
/* Stessa freccia disegnata a mano delle tendine dei filtri (sv-base.css, .field
   select) e per lo stesso motivo: quella nativa sta attaccata al bordo. Qui il
   controllo è più piccolo, quindi lo sono anche padding e distanza. */
.ai-sort-sel{
  font-family:var(--body); font-size:.92rem; color:var(--ink);
  padding:.5em .8em; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.3em;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%2379828d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8em center;
  background-size:11px 7px;
}
.ai-sort-sel:focus{
  outline:none; border-color:var(--navy-soft);
  box-shadow:0 0 0 3px rgba(44,81,128,.12);
}

/* ---- Filtri istantanei ---------------------------------------------------
   assets/js/tools/archivio-immobili.js aggiunge .ai-live al contenitore e
   `hidden` ai bottoni di invio. Il markup NON cambia: senza JavaScript niente
   di quanto segue si attiva e la barra resta il form GET col bottone "Filtra".

   La regola su [hidden] serve perché .btn dichiara display:inline-flex, che
   batte il display:none del foglio di stile del browser: senza, un bottone
   marcato hidden resterebbe visibilissimo. */
.ai-filtri-invia[hidden],
.ai-ordina-invia[hidden],
.ai-filtri-azioni[hidden]{ display:none; }

/* "Azzera" sta in uno slot che il JS svuota e riempie. display:contents lo
   toglie di mezzo come scatola: il link resta figlio del flex .ai-filtri-azioni
   com'era prima, e uno slot vuoto non lascia un gap in giro. */
.ai-azzera-slot{ display:contents; }

/* Il contenitore dei risultati prende il fuoco dopo un cambio pagina: è un
   bersaglio programmatico, non una tappa del Tab, quindi non deve disegnare un
   anello di fuoco che nessuno ha chiesto. */
.ai-lista:focus{ outline:none; }

/* Senza il bottone "Filtra" il gruppo azioni si riduce al solo "Azzera": va
   allineato alla riga della spunta, non al fondo della barra (.filterbar è
   align-items:flex-end e il bottone era più alto del link). */
.ai-live .ai-filtri-azioni{ padding-bottom:.7em; }

/* Attesa: i risultati vecchi restano leggibili ma smorzati e non cliccabili —
   sostituirli con uno scheletro vuoto farebbe saltare la pagina a ogni tendina
   toccata. L'unica cosa che si muove è la barretta sopra la griglia.

   Si anima background-position e non una translate: una barra che scorre per
   davvero uscirebbe dal contenitore, e su un elemento largo quanto la pagina
   basta a far comparire la barra di scorrimento orizzontale. Uno sfondo non
   sborda mai dalla propria scatola. */
.ai-lista{ position:relative; transition:opacity .18s; }
.ai-lista.is-attesa{ opacity:.45; pointer-events:none; }
.ai-lista.is-attesa::after{
  content:""; position:absolute; inset:-14px 0 auto 0; height:3px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg, var(--navy) 0 18px, var(--line) 18px 44px);
  background-size:44px 100%;
  animation:ai-scorre .9s linear infinite;
}
/* Un periodo esatto del motivo: il giro si chiude senza scatto. */
@keyframes ai-scorre{
  from{ background-position:0 0; }
  to{ background-position:44px 0; }
}
@media (prefers-reduced-motion:reduce){
  .ai-lista.is-attesa::after{
    animation:none; background:var(--navy); opacity:.35;
  }
}

/* ---- Nessun risultato ---------------------------------------------------- */
.ai-vuoto{
  color:var(--muted); padding:2.5rem 0;
}
.ai-vuoto a{
  color:var(--orange-600); font-weight:600; text-decoration:underline;
  text-underline-offset:3px;
}

/* ---- Paginazione ---------------------------------------------------------
   paginate_links( type=list ) produce <ul class="page-numbers"> con dentro
   <li> e <a|span class="page-numbers">: si stila quella struttura, non una
   nostra inventata. */
/* Caricamento progressivo: la paginazione vera resta nel documento — link
   veri, che funzionano senza JavaScript e che i crawler percorrono — e si
   nasconde solo a chi lo script ce l'ha. Stessa scelta del blog, stesso
   codice (sv-app.js, svCaricamentoProgressivo). Riappare in un caso solo: se
   una richiesta fallisce, perché lì è l'unico modo per andare avanti. */
.ai-paginazione--js{ display:none; }
.ai-altri{ display:block; margin:2.2rem auto 0; }
.ai-altri[disabled]{ opacity:.6; cursor:default; }

.ai-paginazione{
  margin-top:clamp(28px,4vw,44px);
}
.ai-paginazione .page-numbers{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
}
.ai-paginazione li{ display:flex; }
.ai-paginazione a.page-numbers,
.ai-paginazione span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 .9em;
  font-family:var(--head); font-weight:600; font-size:.95rem;
  color:var(--ink-soft); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:.15s;
}
.ai-paginazione a.page-numbers:hover{
  border-color:var(--navy-soft); color:var(--navy);
}
.ai-paginazione .page-numbers.current{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
.ai-paginazione .page-numbers.dots{
  border-color:transparent; background:transparent;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:760px){

  /* ── Il pannello si chiude ──────────────────────────────────────────────
     Qui i quattro campi si impilano: aperta, la barra è mezzo schermo di
     tendine prima del primo immobile. Chiusa, resta una riga.

     Ad aprirla e chiuderla è una casella nascosta, non del JavaScript: con
     `delay_js` di WP Rocket nessuno script parte prima della prima
     interazione, quindi un pannello chiuso da JS sarebbe arrivato aperto per
     poi richiudersi di scatto sotto il dito. Il perché per esteso sta nel
     commento in archive-immobile.php, sopra la casella.

     Aperto, il pannello ridichiara le stesse regole flex di .filterbar: i
     campi si dispongono ESATTAMENTE come oggi, perché l'unica cosa che cambia
     è che ora hanno un contenitore in mezzo. Chi apre i filtri deve ritrovare
     la barra che conosceva, non un secondo layout. */
  .ai-piega-corpo{
    display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end;
    flex:1 1 100%; width:100%;
  }
  .ai-piega-tgl:not(:checked) ~ .ai-piega-corpo{ display:none; }

  /* La casella resta nell'albero — nascosta alla vista ma NON al Tab: è lei a
     ricevere il fuoco, ed è da lì che si apre il pannello con la barra
     spaziatrice. Non si riusa .screen-reader-text: quella si mostra a fuoco
     (giusto per i "salta al contenuto"), e qui farebbe spuntare una casella
     grigia in mezzo alla barra. Il fuoco lo disegna la testata, qui sotto. */
  .ai-piega-tgl{
    display:block; position:absolute;
    width:1px; height:1px; margin:-1px; padding:0; border:0;
    clip-path:inset(50%); overflow:hidden; white-space:nowrap;
  }

  .ai-piega-testa{
    display:flex; align-items:center; gap:.6rem;
    flex:1 1 100%; width:100%;
    padding:.15rem 0;
    font-family:var(--head); font-weight:700; font-size:1rem;
    color:var(--navy); cursor:pointer; user-select:none;
  }
  /* Il conteggio spinge la freccia a destra: `margin-right:auto` sta su di lui
     e non sul nome, così lo spazio vuoto resta fra numero e freccia anche
     quando il numero non c'è. */
  .ai-piega-conta{ display:flex; align-items:center; margin-right:auto; }
  .ai-piega-pallino{
    display:inline-grid; place-items:center;
    min-width:21px; height:21px; padding:0 .45em;
    border-radius:var(--pill);
    background:var(--orange); color:#fff;
    font-size:.76rem; font-weight:700; line-height:1;
  }
  .ai-piega-freccia{ flex:none; color:var(--muted); transition:transform .2s; }
  .ai-piega-tgl:checked ~ .ai-piega-testa .ai-piega-freccia{ transform:rotate(180deg); }

  /* L'anello di fuoco della casella, disegnato attorno alla testata: è lì che
     l'occhio guarda, non sul pixel nascosto che ha davvero il fuoco. */
  .ai-piega-tgl:focus-visible ~ .ai-piega-testa{
    outline:2px solid var(--navy-soft); outline-offset:3px;
    border-radius:var(--r-sm);
  }

  @media (prefers-reduced-motion:reduce){
    .ai-piega-freccia{ transition:none; }
  }

  /* Sotto i 760px la barra filtri della consegna impila già i .field; qui si
     evita solo che il bottone resti orfano su una riga tutta sua. */
  .ai-filtri-azioni{ width:100%; justify-content:space-between; }
  .ai-filtri-azioni .btn{ flex:1; }

  /* Su mobile la spunta prende la riga sua, sopra il bottone Filtra. */
  .ai-disponibili{ width:100%; padding-bottom:0; padding-top:.2rem; }

  /* Qui i controlli sono impilati, non allineati in fondo a una riga: lo
     scarto che serve sul desktop diventa uno spazio vuoto di troppo. */
  .ai-live .ai-filtri-azioni{ padding-bottom:0; }

  .ai-ordina{ width:100%; }
  .ai-ordina .ai-sort-sel{ flex:1; }
}