/* ============================================================
   Archivio immobili (immobili.html) - solo regole di pagina.
   Card, ricerca, barra risultati, paginazione, form e testate
   stanno in style.css: qui non si ridefiniscono.
   Si carica subito dopo style.css.

   Stato "contratto = Affitto": lo dice il pulsante segmentato
   del modulo di ricerca (.seg[data-contract="affitto"]), a cui
   main.js scrive aria-pressed="true".
   ============================================================ */

/* ── card: ritagli delle copertine del feed ─────────────────
   La foto è la prima dell'annuncio (720px, 4:3 o verticale): il
   3:2 della card ne taglia sopra e sotto. Dove il soggetto non sta
   al centro si sposta il taglio, annuncio per annuncio.          */
.card__ph--low img{object-position:50% 62%}
.card[data-ref="VP01"] .card__ph img{object-position:50% 18%}   /* facciata, non la ghiaia */

/* ── ?rif=CODICE: l'annuncio cercato, evidenziato nei risultati ── */
.card.is-hl{border-color:var(--blu-900);box-shadow:0 0 0 2px var(--blu-900),var(--shadow-card)}
.card.is-hl .rif{background:var(--blu-900);color:#fff}

/* ── barra risultati: su telefono "Ordina per" occupa tutta la riga,
   allineato a destra con le card e con i campi della ricerca ── */
@media (max-width:680px){
  .resbar__r{align-self:stretch}
  .resbar__r .selectish{flex:1 1 auto;min-width:0}
}

/* ── paginazione: "Indietro" con la freccia girata; su telefono solo frecce ── */
.pager__b--prev .ic{transform:rotate(180deg)}
@media (max-width:680px){
  .pager{gap:6px}
  .pager__b--prev,.pager__b--next{padding:0 12px}
  .pager__lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ── riquadro "Nuove costruzioni" in fondo ai risultati ──────
   Navy come la fascia dei cantieri in home: foto a sinistra,
   testo e azioni a destra. Non è una .card, quindi filtri e
   conteggi lo ignorano. In affitto non ci sono nuove costruzioni. */
.cantband{
  --focus:var(--blu-300);--btn-bg:#fff;--btn-fg:var(--blu-900);--btn-bg-h:var(--blu-075);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:64px;background:var(--blu-900);color:#fff;
  border-radius:var(--r);overflow:hidden;
}
#risultati[data-contratto="affitto"] .cantband{display:none}   /* il JS scrive il contratto attivo */

.cantband__ph{margin:0;position:relative;min-height:300px;overflow:hidden}
.cantband__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* il render scorre un po' più piano della pagina (solo con le timeline di scorrimento) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cantband__ph img{
      inset:-9% 0;height:118%;
      animation:cb-par linear both;animation-timeline:view();
    }
  }
}
@keyframes cb-par{from{translate:0 -7%}to{translate:0 7%}}

.cantband__b{display:flex;flex-direction:column;justify-content:center;padding:52px 56px}
.cantband__t{font-size:clamp(1.5rem,1rem + 2vw,2.25rem)}
.cantband__x{margin-top:16px;max-width:46ch;color:var(--on-navy-2)}
.cantband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}

@media (max-width:1080px){
  .cantband__b{padding:40px 36px}
}
/* tablet: foto in fascia sopra, testo sotto */
@media (max-width:900px){
  .cantband{grid-template-columns:1fr}
  .cantband__ph{min-height:0;aspect-ratio:2/1}
}
@media (max-width:680px){
  .cantband{margin-top:48px}
  .cantband__ph{aspect-ratio:3/2}
  .cantband__b{padding:28px 20px 30px}
  .cantband__cta{flex-direction:column;align-items:stretch;gap:6px}
  .cantband__cta .linkish{justify-content:center}
}

/* ── "Non trovi quello che cerchi?" con il form sul posto ────
   Modificatore di .helpbox (la versione base resta quella di
   contatti.html): foto verticale a sinistra, testo e form a destra. */
.helpbox--form{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:64px;align-items:center;
}
.helpbox__ph{margin:0;overflow:hidden;border-radius:var(--r)}
.helpbox__ph img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
  background:var(--blu-100);
}

.helpbox__b{max-width:620px}
.helpbox__form{margin-top:28px}
.helpbox__form > .btn{align-self:flex-start;margin-top:4px}
.helpbox__or{margin-top:18px;font-size:.9375rem;color:var(--muted)}
.helpbox__or a{color:var(--blu-900);font-weight:600;white-space:nowrap;text-underline-offset:3px}
.helpbox__or a:hover{text-decoration-thickness:2px}
/* la conferma dopo l'invio prende il posto del form */
.helpbox__b .form__ok{margin-top:28px;background:var(--surface)}

@media (max-width:1080px){
  .helpbox--form{gap:44px}
}
/* tablet: la foto resta verticale ma più stretta, allineata in alto */
@media (max-width:900px){
  .helpbox--form{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px;align-items:start}
}
/* telefono: foto in orizzontale sopra, testo e form sotto */
@media (max-width:680px){
  .helpbox--form{grid-template-columns:1fr;gap:24px}
  .helpbox__ph img{aspect-ratio:3/2;object-position:50% 36%}
  .helpbox__form > .btn{align-self:stretch}
}
@media (max-width:680px),(pointer:coarse){
  /* link telefonico in linea: bersaglio più alto senza cambiare la riga */
  .helpbox__or a{display:inline-block;padding-block:12px;margin-block:-12px}
}