/* ============================================================
   Scheda immobile - immobile.html (e immobile-riservato.html)
   Caricato dopo style.css. I componenti condivisi della scheda
   (.dhead, .keyspecs, .block, .dts, .feats, .apebox, .apescale,
   .map, .vbox, .askbox, .dbar, .rail--grid, .lb, .plans/.plan)
   stanno in style.css e qui non si ridefiniscono. Nessuna regola
   dipende da un immobile preciso.

   Pezzi di questa pagina
   .gcar            carosello delle foto (main.js, blocco GALLERIE)
   .dhead__meta     riga sotto il prezzo (€/mq, data di aggiornamento)
   .ohbox           Open House collegato all'immobile, con countdown
   .dhigh           i punti forti in fondo alla descrizione
   .sheet           scheda tecnica a gruppi, a tabella
   .amen            dotazioni, una voce con la sua icona
   .map__tag        etichetta "zona indicativa" sulla mappa senza pin
   .locnote         indirizzo sotto la mappa, con Mappa e Percorso
   .resv            trattativa riservata al posto del prezzo
   .near            nei dintorni, le distanze del gestionale
   .askbox__agency  contatti dell'agenzia sotto il form
   .askbox.is-flash il box del form evidenziato da "Contattaci"

   Le entrate allo scroll sono quelle comuni (main.js, REVEAL):
   nel markup data-rv="card|photo|up" sui pezzi della scheda.
   ============================================================ */

/* ── carosello foto ──────────────────────────────────────────
   Una fila di foto a tutta larghezza che scorre con scroll-snap:
   lo swipe è quello del browser, frecce e miniature la spostano.
   La foto si vede intera (contain) su un fondo fatto dalla stessa
   foto sfocata, quindi nessun taglio anche per le foto più alte.
   Telefono: a filo schermo, 4:3, e la foto riempie il riquadro.   */
.gcar{margin-block:20px 40px}
.gcar__stage{
  position:relative;height:clamp(380px,64vh,620px);overflow:hidden;
  border-radius:var(--r);background:var(--blu-950);isolation:isolate;
}
.gcar__track{
  position:relative;display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.gcar__track::-webkit-scrollbar{display:none}
.gcar__slide{
  position:relative;flex:0 0 100%;height:100%;overflow:hidden;cursor:zoom-in;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.gcar__slide:focus-visible{outline-offset:-4px}
.gcar__bg{
  position:absolute;inset:-48px;width:calc(100% + 96px);height:calc(100% + 96px);max-width:none;
  object-fit:cover;filter:blur(26px) brightness(.62) saturate(1.1);
}
.gcar__img{position:relative;width:100%;height:100%;object-fit:contain}

.gcar__nav{
  position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;
  border-radius:50%;background:rgba(255,255,255,.94);color:var(--blu-900);
  box-shadow:0 10px 26px -12px rgba(10,16,48,.6);
  transition:background .2s ease,scale .25s var(--ease-out,ease);
}
.gcar__nav .ic{width:20px;height:20px;stroke-width:2}
.gcar__nav--prev{left:18px}
.gcar__nav--prev .ic{transform:rotate(180deg)}
.gcar__nav--next{right:18px}
.gcar__nav:hover{background:#fff;scale:1.08}

.gcar__count,.gcar__btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;
  background:var(--scrim);color:#fff;font-size:.875rem;font-weight:600;line-height:1.4;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.gcar__count{position:absolute;left:16px;bottom:16px;z-index:2;font-variant-numeric:tabular-nums;pointer-events:none}
.gcar__count .ic,.gcar__btn .ic{width:17px;height:17px}
.gcar__acts{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;gap:8px}
.gcar__btn{text-decoration:none;transition:background .18s ease}
.gcar__btn:hover{background:var(--blu-900)}
.gcar__btn:focus-visible,.gcar__nav:focus-visible{outline-color:#fff}

/* miniature: quella attiva piena e con il bordo navy, le altre attenuate */
.gcar__thumbs{
  display:flex;gap:10px;margin:12px -4px 0;padding:4px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);
}
.gcar__thumbs::-webkit-scrollbar{display:none}
.gcar__t{
  flex:0 0 104px;border-radius:var(--r);overflow:hidden;opacity:.5;
  transition:opacity .25s ease,box-shadow .25s ease;
}
.gcar__t img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gcar__t:hover{opacity:.85}
.gcar__t.is-on{opacity:1;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blu-900)}
.gcar__t:focus-visible{outline-offset:3px}

/* foto alte di facciate (gcar--top): sul telefono il taglio tiene il tetto */
@media (min-width:681px) and (max-width:900px){
  .gcar__stage{height:auto;aspect-ratio:3/2}
}
@media (max-width:680px){
  .gcar{margin-bottom:26px;padding-inline:0}
  .gcar__stage{height:auto;aspect-ratio:4/3;border-radius:0}
  .gcar__img{object-fit:cover}
  .gcar--top .gcar__img{object-position:50% 30%}
  .gcar__nav{width:44px;height:44px;margin-top:-22px;background:rgba(255,255,255,.88)}
  .gcar__nav--prev{left:10px}
  .gcar__nav--next{right:10px}
  .gcar__count{left:10px;bottom:10px;padding:8px 12px}
  .gcar__acts{right:10px;bottom:10px;gap:6px}
  .gcar__btn{padding:8px 14px}
  .gcar__thumbs{gap:6px;margin:8px 0 0;padding:4px calc(var(--pad) - 2px)}
  .gcar__t{flex-basis:66px}   /* 66px in 3:2 = 44px di altezza, il bersaglio minimo al tocco */
}
@media (max-width:440px){
  /* telefono: "Schermo intero" resta solo icona (il nome lo legge lo screen reader) */
  .gcar__btn[data-gallery-all]{min-width:44px;justify-content:center;padding-inline:12px}
  .gcar__btn[data-gallery-all] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* movimento: mentre si scorre tra le foto, l'immagine si sposta un po' più piano della fila (profondità). Solo dove il browser ha le
   timeline di scorrimento; spento con prefers-reduced-motion.     */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .gcar__img{animation:gcar-par linear both;animation-timeline:view(inline)}
  }
}
@keyframes gcar-par{from{translate:12% 0}to{translate:-12% 0}}

/* ── intestazione: €/mq e data di aggiornamento ──────────────
   Due dati brevi separati da una hairline verticale.             */
.dhead__meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:6px;font-size:.875rem;color:var(--muted)}
.dhead__meta > span{padding-right:14px}
.dhead__meta > span + span{padding-left:14px;border-left:1px solid var(--line)}

/* ── descrizione: i punti forti, ognuno con la sua icona ─────── */
.dhigh{gap:14px 24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.dhigh li{gap:12px;color:var(--blu-900);font-weight:500;line-height:1.4}
.dhigh .ic{box-sizing:content-box;width:20px;height:20px;padding:10px;border-radius:50%;background:var(--blu-050)}

/* ── video: riga sotto il riquadro ─────────────────────────── */

/* ── caratteristiche: scheda tecnica a tabelle ───────────────
   Ogni gruppo è una tabellina: titolo su fascia navy con la sua
   icona, righe a fondo alternato (come la tabella delle unità di
   un cantiere). I gruppi si dispongono da soli su due colonne
   bilanciate; sul telefono una. Si scrivono solo i campi
   valorizzati nel gestionale.                                     */
.sheet{columns:2 290px;column-gap:20px;margin-top:22px}
.sheet__g{
  break-inside:avoid;margin-bottom:20px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.sheet__h{font-size:1rem;font-weight:600;line-height:1.4;color:var(--blu-900)}
.sheet .sheet__h{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--blu-900);color:#fff;font-size:.9375rem;
}
.sheet .sheet__h .ic{width:18px;height:18px;color:var(--blu-300)}
.sheet .dts{display:block;margin:0}
.sheet .dt{padding:11px 16px;border-bottom:0;line-height:1.45}
.sheet .dt:nth-child(even){background:var(--blu-050)}
.sheet .dt dd{text-align:right}
/* una voce lunga (es. pavimenti): etichetta sopra, valore sotto */
.sheet .dt--wide{flex-direction:column;gap:2px}
.sheet .dt--wide dd{text-align:left}

/* ── dotazioni: una voce, un'icona ───────────────────────────
   Riquadri bianchi con l'icona in un cerchio tinto; al passaggio
   il cerchio diventa navy.                                        */
.amen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.amen li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  font-size:.9375rem;font-weight:500;line-height:1.3;color:var(--ink);
}
.amen__ic{
  display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--blu-050);color:var(--blu-900);transition:background .25s ease,color .25s ease;
}
.amen__ic .ic{width:21px;height:21px}
@media (hover:hover){
  .amen li:hover .amen__ic{background:var(--blu-900);color:#fff}
}
@media (min-width:901px) and (max-width:1080px){
  .amen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .amen{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .amen li{gap:10px;padding:10px;font-size:.875rem}
  .amen__ic{width:36px;height:36px}
  .amen__ic .ic{width:18px;height:18px}
}

/* ── classe energetica (solo con una classe vera: con VA/NC il
   blocco non si stampa). .apebox e .apescale sono in style.css. ─ */
.apebox .apescale{margin-top:16px}
.apebox .apescale__ends{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin-top:8px;max-width:none;
  font-size:.75rem;color:var(--muted);
}
/* il gestionale riporta solo "A": si accende tutta la fascia A
   (le quattro colonne A4-A1 della scala a 10 classi)              */
.apescale li.apescale__band{grid-column:span 4}
@media (max-width:680px){
  .apescale:has(> .apescale__band){grid-template-columns:repeat(7,minmax(0,1fr))}
  .apescale li.apescale__band{grid-column:auto}
}

/* ── posizione ───────────────────────────────────────────────
   Mappa di zona senza pin (.map--zone, in style.css): il
   cartellino si appoggia sul bordo alto del cerchio.
   .map--city: annuncio senza coordinate nel feed, mappa del comune
   (dal campo Comune) senza cerchio, cartellino in alto a sinistra.  */
.map__tag{
  position:absolute;left:50%;top:calc(50% - 90px);z-index:1;transform:translate(-50%,-50%);
  padding:4px 10px;border-radius:3px;background:var(--surface);color:var(--blu-900);
  font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--blu-100);pointer-events:none;
}
.map--city .map__tag{left:12px;top:12px;transform:none}
/* con l'indirizzo pubblicato: riga sotto la mappa con Mappa e Percorso */
.locnote{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  margin-top:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.locnote > .ic{align-self:start;width:20px;height:20px;margin-top:2px;color:var(--blu-900)}
.locnote__t b{display:block;font-size:.9375rem;color:var(--blu-900)}
.block .locnote__t p{margin-top:2px;font-size:.875rem}
.locnote__acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:1080px) and (min-width:901px){
  .locnote{grid-template-columns:auto minmax(0,1fr)}
  .locnote__acts{grid-column:2;margin-top:10px}
}
@media (max-width:680px){
  .locnote{grid-template-columns:auto minmax(0,1fr)}
  .locnote__acts{grid-column:1/-1;margin-top:10px}
  .locnote__acts .btn{flex:1 1 0;padding-inline:12px}
}

/* ── trattativa riservata: al posto del prezzo ───────────────
   Stesso peso visivo del prezzo, con "Contattaci" accanto: porta
   al form (main.js, blocco SALTI: scorre, evidenzia, mette il
   cursore nel primo campo).                                       */
.resv{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;
  margin-top:20px;padding:16px 18px;background:var(--blu-050);border:1px solid var(--line);border-radius:var(--r);
}
.resv__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r);background:var(--blu-900);color:#fff}
.resv__ic .ic{width:20px;height:20px}
.resv .resv__t{display:block;font-size:1.5rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--blu-900)}
.resv__x{margin-top:4px;font-size:.9375rem;line-height:1.5;color:var(--muted);max-width:50ch}
.resv + .dhead__meta{margin-top:12px}
@media (max-width:1080px) and (min-width:901px){
  .resv{grid-template-columns:auto minmax(0,1fr)}
  .resv__go{grid-column:2;justify-self:start;margin-top:8px}
}
@media (max-width:680px){
  .resv{grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px}
  .resv__ic{width:44px;height:44px;align-self:start}
  .resv .resv__t{font-size:1.3125rem}
  .resv__go{grid-column:2;justify-self:start;margin-top:8px;padding:10px 22px}
}

/* ── nei dintorni: le quattro distanze del gestionale ────────
   Celle bianche separate da hairline, come .keyspecs: icona,
   luogo, chilometri.                                              */
.near__h{margin-top:30px}
.near{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:12px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.near__i{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:18px 16px;background:var(--surface)}
.near__i dt{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:.9375rem;line-height:1.35;color:var(--ink)}
.near__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blu-050);color:var(--blu-900)}
.near__ic .ic{width:20px;height:20px}
.near__i dd{margin:0;font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--blu-900);font-variant-numeric:tabular-nums}
.near__i dd small{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--muted)}
@media (max-width:1080px){
  .near{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .near__i{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .near__i dt{flex-direction:row;align-items:center;gap:10px;font-size:.875rem}
  .near__ic{width:34px;height:34px}
  .near__ic .ic{width:17px;height:17px}
  .near__i dd{font-size:1.25rem;white-space:nowrap}
}
@media (max-width:400px){
  .near{grid-template-columns:1fr}
}

/* ── planimetrie: etichetta generica con icona ─────────────── */
.plan__l{align-items:center}
.plan__l .ic{width:16px;height:16px;color:var(--blu-900);opacity:.7}

/* ── box del form: contatti dell'agenzia al posto dell'agente ── */
.askbox__agency{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.askbox__logo{width:112px;height:auto}
.askbox__agency .askbox__c{flex-direction:column;align-items:flex-start;gap:2px;margin:0}
.askbox__agency a{
  display:inline-flex;align-items:center;gap:8px;color:var(--blu-900);
  font-size:.875rem;font-weight:600;text-decoration:none;
}
.askbox__agency a .ic{width:15px;height:15px}
.askbox__agency a:hover{text-decoration:underline;text-underline-offset:3px}
/* colonna stretta: niente "(MO)" o "riservata" da soli sull'ultima riga del riepilogo,
   e il link dell'informativa non si spezza a metà */
.detail__side .askbox__ref b,
.detail__side .askbox__ref > div > span{text-wrap:pretty}
.detail__side .check a{white-space:nowrap}
@media (max-width:680px),(pointer:coarse){
  .askbox__agency .askbox__c{gap:0}
  .askbox__agency a{min-height:44px}
}
@media (min-width:681px) and (max-width:900px){
  .askbox__agency .askbox__c{flex-direction:row;gap:0 24px}
}
/* finestre basse (es. 1440×900, 1440×800): la riga dei contatti si stringe come
   .askbox__agent nel box compatto di style.css, così il form sta nello schermo
   senza scorrere e il logo non finisce sotto la sfumatura */
@media (min-width:901px) and (max-height:960px){
  .detail__side .askbox__agency{margin-top:14px;padding-top:12px}
}
@media (min-width:901px) and (max-height:800px){
  .detail__side .askbox__agency{margin-top:12px;padding-top:10px}
  .detail__side .askbox__agency .askbox__c{gap:0}
}
/* colonna da 320px (901-1080) e finestra bassa: il textarea compatto è di due righe e
   il messaggio precompilato di VP01 ne occupa tre (la terza restava tagliata a metà).
   Dove il browser lo permette il campo segue il testo, da due a tre righe. */
@media (min-width:901px) and (max-width:1080px) and (max-height:960px){
  @supports (field-sizing:content){
    .detail__side .field textarea{field-sizing:content;height:auto;min-height:69px;max-height:92px}
  }
}

/* "Contattaci": il box del form si accende per un attimo */
.askbox.is-flash{animation:ask-flash 2s var(--ease-out,ease-out)}
@keyframes ask-flash{
  0%{border-color:var(--line);box-shadow:0 0 0 0 rgba(19,29,88,0)}
  15%,65%{border-color:var(--blu-900);box-shadow:0 0 0 5px rgba(19,29,88,.16)}
  100%{border-color:var(--line);box-shadow:0 0 0 0 rgba(19,29,88,0)}
}

/* ── posizione: schede Mappa / Street View ─────────────────────
   Solo negli annunci con indirizzo. Usa le pillole .tab di style.css
   ma non il contenitore .tabs (quello filtra le card in main.js).
   Street View si carica al primo clic (main.js, blocco STREET VIEW). */
.maptabs{display:flex;gap:8px;margin-top:16px}
.maptabs + .map,.maptabs ~ .map{margin-top:12px}
.map--sv iframe{height:380px}
@media (max-width:680px){ .map--sv iframe{height:280px} }