/* ripieghi vh per iOS < 15.4 */
/* =========================================================
   Pagine interne (appartamento, zona, prenota, contatti): componenti condivisi.
   Valori misurati su era-residence.com, pagine Apartments e Contact (docs/riferimento.md §3-4,
   docs/riferimento-dati.md). A 1440px: titolo h1 in colonna 2 a 288px dall'alto (20vw),
   barra filtri 9 colonne alta 72px (5vw), card 396×550 (3 colonne + 2 gap × 38,2vw),
   padding card 29px (2vw), raggio 22,5px (1,5625vw); Contact: titolo centrato, tre colonne
   di dati a 280px (19,4vw), mappa 1440×760 (52,8vw), cerchio CTA 187px (13vw), social 36px.
   Sotto i 992px: una colonna, card 345px di larghezza.
   ========================================================= */

:root {
  --tre-colonne: calc(3 * var(--colonna) + 2 * var(--gap));
  --raggio-card: 5.77vw;
  --ombra-card: 0 224px 63px 0 rgba(0,0,0,0), 0 143px 57px 0 rgba(0,0,0,.01), 0 81px 48px 0 rgba(0,0,0,.04), 0 36px 36px 0 rgba(0,0,0,.07), 0 9px 20px 0 rgba(0,0,0,.08);
  --grigio-foto: #D9D2CB;
}
@media (min-width: 992px) { :root { --raggio-card: 1.5625vw; } }

.reg { font-weight: 400; }
.dentro { grid-column: 1 / -1; }
@media (min-width: 992px) { .dentro { grid-column: 2 / -1; } }

/* ---------- intestazione di pagina (§3.1: titolo h1 a sinistra, numero a destra) ---------- */
.s-intestazione { padding-top: calc(var(--altezza-testata) + 18vw); padding-bottom: 6vw; row-gap: 4vw; align-items: end; }
.int-eyebrow { grid-column: 1 / -1; }
.int-titolo { grid-column: 1 / -1; }
.int-sotto { grid-column: 1 / 4; max-width: 30em; }
.int-cta { grid-column: 3 / 5; justify-self: end; }
@media (min-width: 992px) {
  .s-intestazione { padding-top: 16vw; padding-bottom: 2vw; row-gap: 1.4vw; }
  .int-eyebrow { grid-column: 2 / 6; }
  .int-titolo { grid-column: 2 / 10; }
  .int-sotto { grid-column: 2 / 5; }
  /* a 1024 il cerchio da 8,5vw (87px) non contiene "DISPONIBILITÀ" con la soglia minima di l2 */
  .int-cta { grid-column: 9 / 11; width: max(8.5vw, 120px); height: max(8.5vw, 120px); }
}
.int-numero { grid-column: 1 / -1; justify-self: end; font-variant-numeric: lining-nums; }
.int-riga { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); }

/* ---------- foto larga con parallasse (img −15 → 15) ---------- */
.foto-larga { position: relative; overflow: hidden; height: 125vw; }
.foto-larga-media, .fascia-parallasse { position: absolute; left: 0; right: 0; top: -25%; height: 150%; }
.foto-larga picture, .foto-larga img { width: 100%; height: 100%; }
@media (min-width: 992px) { .foto-larga { height: 52.8vw; } }

/* ---------- card a tutta larghezza con i dati (card appartamento §3.2) ---------- */
.scheda { position: relative; border: 1px solid var(--antracite-10); border-radius: var(--raggio-card); padding: 6vw 5vw; display: grid; gap: 6vw; text-align: center; background: var(--avorio); }
.scheda::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--ombra-card); opacity: 0; transition: opacity 1.6s var(--ease-out); pointer-events: none; }
@media (hover: hover) and (min-width: 992px) { .scheda:hover { z-index: 10; } .scheda:hover::after { opacity: 1; } }
.scheda-testa { display: grid; gap: .4em; }
.scheda-dati { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--antracite-10); }
.scheda-dati > li { display: block; align-content: center; padding: 5vw 2vw; border-bottom: 1px solid var(--antracite-10); }
.scheda-dati > li:nth-child(odd) { border-right: 1px solid var(--antracite-10); }
.scheda-dati.a-tre { grid-template-columns: 1fr; }
.scheda-dati.a-tre > li { border-right: 0; }
@media (min-width: 992px) {
  .scheda { padding: 2vw; gap: 2.4vw; }
  .scheda-dati, .scheda-dati.a-tre { grid-template-columns: repeat(3, 1fr); }
  .scheda-dati > li, .scheda-dati.a-tre > li { padding: 2.4vw 1.4vw; border-right: 1px solid var(--antracite-10); }
  .scheda-dati > li:nth-child(odd) { border-right: 1px solid var(--antracite-10); }
  .scheda-dati > li:nth-child(3n) { border-right: 0; }
  .scheda-dati > li:nth-last-child(-n+3) { border-bottom: 0; }
}

/* ---------- blocco di testo: titolo h4 a righe + paragrafo ---------- */
.s-testo { padding-block: 24vw; row-gap: 6vw; }
.testo-titolo { grid-column: 1 / -1; }
.testo-corpo { grid-column: 1 / -1; max-width: 34em; }
@media (min-width: 992px) {
  .s-testo { padding-block: 10vw; row-gap: 2.4vw; }
  .testo-titolo { grid-column: 2 / 9; }
  .testo-corpo { grid-column: 6 / 10; }
}

/* ---------- ambienti: foto grande e testo alternati ---------- */
.s-ambienti { padding-block: 6vw 24vw; }
.ambienti-elenco { display: grid; row-gap: 20vw; margin-top: 8vw; }
.ambiente { row-gap: 6vw; align-items: center; }
.ambiente-foto { grid-column: 1 / -1; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.ambiente-foto.verticale { aspect-ratio: 4 / 5; }
.ambiente-lato { grid-column: 1 / -1; display: grid; gap: 4vw; }
/* 4/10: i dettagli escono dalle miniature: fascia propria sotto la stanza, sul telefono striscia da scorrere */
.ambiente-dettagli {
  grid-column: 1 / -1; display: flex; gap: var(--gap);
  margin: 0 calc(var(--margine) * -1); padding-inline: var(--margine);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); scrollbar-width: none;
}
.ambiente-dettagli::-webkit-scrollbar { display: none; }
.ambiente-dettagli figure { flex: 0 0 64vw; aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; }
@media (min-width: 992px) {
  .s-ambienti { padding-block: 2vw 10vw; }
  .ambienti-elenco { row-gap: 10vw; margin-top: 4vw; }
  .ambiente-foto { grid-column: 2 / 7; grid-row: 1; }
  /* testo su 4 colonne con mezza colonna di respiro: le parole lunghe in h4 (MATRIMONIALE) ci stanno */
  .ambiente-lato { grid-column: 7 / 11; grid-row: 1; gap: 1.4vw; padding-left: calc(var(--colonna) / 2); }
  .ambiente:nth-child(even) .ambiente-foto { grid-column: 6 / 11; }
  .ambiente:nth-child(even) .ambiente-lato { grid-column: 2 / 6; padding: 0 calc(var(--colonna) / 2) 0 0; }
  .ambiente-dettagli { grid-column: 2 / 11; grid-row: 2; margin: 3vw 0 0; padding: 0; overflow: visible; }
  .ambiente:nth-child(even) .ambiente-dettagli { justify-content: flex-end; }
  .ambiente-dettagli figure { flex: 0 0 calc(3 * var(--colonna) + 2 * var(--gap)); }
}

/* ---------- elenco a due colonne con + (dotazioni) ---------- */
.s-elenco { padding-block: 24vw; row-gap: 8vw; }
.elenco-due { grid-column: 1 / -1; display: grid; column-gap: var(--gap); }
.elenco-due > li { display: flex; align-items: center; gap: .9em; padding: .8em 0; border-top: 1px solid var(--antracite-10); }
/* icone delle dotazioni: tratto sottile come la mappa */
.ico { flex: none; width: max(22px, 1.8em); height: max(22px, 1.8em); color: currentColor; }
@media (min-width: 992px) {
  .s-elenco { padding-block: 8vw; row-gap: 3vw; }
  .elenco-due { grid-column: 2 / -1; grid-template-columns: 1fr 1fr; }
}

/* ---------- galleria filtrabile (§3.1 filtri, §3.2 cambio filtro) ---------- */
.s-galleria { padding-block: 24vw; }
.s-galleria .int-riga { grid-column: 1 / -1; }
.filtri { grid-column: 1 / -1; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 14vw; margin-block: 6vw 4vw; padding-inline: 5vw; border: 1px solid var(--antracite-10); border-radius: var(--raggio-card); }
.filtro { position: relative; }
.filtro-btn { display: inline-flex; align-items: center; gap: .9em; min-height: 44px; }
.filtro-freccia { width: .9em; height: .9em; transition: transform var(--dur-m) var(--ease-out); }
.filtro.is-aperto .filtro-freccia { transform: rotate(180deg); }
.filtro-lista {
  position: absolute; left: -2vw; top: calc(100% + 1vw); width: 60vw; padding: 1.2vw;
  background: var(--avorio); border-radius: 1vw; box-shadow: var(--ombra-card);
  opacity: 0; visibility: hidden; transform: translateY(8.2vw) scale(1.1); transform-origin: 50% 0;
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.filtro.is-aperto .filtro-lista { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.filtro-lista button { display: flex; align-items: center; width: 100%; min-height: 44px; padding-inline: 3vw; border-radius: .6vw; text-align: left; transition: background-color var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out); }
.filtro-lista button:hover { background: var(--antracite-10); }
.filtro-lista button[aria-pressed="true"] { background: var(--antracite); color: var(--avorio); }
.filtri-reset { min-height: 44px; transition: opacity var(--dur-s) var(--ease-out); }
.filtri-reset:disabled { opacity: .3; cursor: default; }
.galleria-lista { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.galleria-voce { position: relative; }
.galleria-voce figure { margin: 0; height: 100%; overflow: hidden; }
.galleria-voce.larga { grid-column: 1 / -1; }
.galleria-voce.larga figure { aspect-ratio: 3 / 2; }
.galleria-voce.verticale figure { aspect-ratio: 4 / 5; }
/* verticale spaiata nel filtro scelto: si centra da sola (js/appartamento.js) */
.galleria-voce.sola { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap) / 2); }
.galleria-voce img { width: 100%; height: 100%; object-fit: cover; }
.galleria-voce::after { content: ""; position: absolute; inset: 0; box-shadow: var(--ombra-card); opacity: 0; transition: opacity 1.6s var(--ease-out); pointer-events: none; }
.galleria-sfoglia { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 10vw; }
@media (hover: hover) and (min-width: 992px) { .galleria-voce:hover { z-index: 10; } .galleria-voce:hover::after { opacity: 1; } }
@media (min-width: 992px) {
  .s-galleria { padding-block: 8vw; }
  .s-galleria .int-riga { grid-column: 2 / -1; }
  .filtri { grid-column: 2 / -1; min-height: 5vw; margin-block: 2vw 1vw; padding-inline: 2vw; }
  .filtro-lista { left: -1vw; top: calc(100% + 1.3vw); width: 15.4vw; padding: .3vw; border-radius: .25vw; transform: translateY(2.22vw) scale(1.1); }
  .filtro-lista button { min-height: 2.78vw; padding-inline: 1vw; border-radius: .25vw; }
  .galleria-lista { grid-column: 2 / -1; }
  .galleria-voce.larga figure { aspect-ratio: 16 / 9; }
  .galleria-sfoglia { grid-column: 2 / -1; margin-top: 4vw; }
}

/* ---------- card foto (benefit-card §3.2): foto a tutta card, titolo h5 e p1 in basso ---------- */
.schede { grid-column: 1 / -1; display: grid; gap: var(--gap); }
.scheda-foto { position: relative; overflow: hidden; height: 120vw; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: 5vw; color: var(--avorio); isolation: isolate; }
.scheda-foto-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scheda-foto-media > div { position: absolute; left: 0; right: 0; top: -25%; height: 150%; }
.scheda-foto-media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(29,32,31,.55), rgba(29,32,31,0)); }
.scheda-foto.senza-foto { color: var(--antracite); }
.scheda-foto.senza-foto .scheda-foto-media::after { display: none; }
.scheda-foto-testo { max-width: 26em; }
.scheda-foto-tempo { position: absolute; top: 5vw; left: 5vw; }
/* segnaposto grigio per le foto che non abbiamo (copy pagine §2: niente immagini dal web) */
.foto-da-procurare { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grigio-foto); }
@media (min-width: 992px) {
  .schede { grid-column: 2 / -1; grid-template-columns: repeat(3, 1fr); }
  .scheda-foto { height: 38.2vw; padding: 2vw; }
  .scheda-foto-tempo { top: 2vw; left: 2vw; }
}

/* ---------- righe con titolo e testo (gite, come arrivare) ---------- */
.s-righe { padding-block: 24vw; row-gap: 8vw; }
.righe-titolo { grid-column: 1 / -1; }
.righe { grid-column: 1 / -1; }
.righe > li { display: grid; gap: .6em; padding: 5vw 0; border-top: 1px solid var(--antracite-10); }
.righe > li:last-child { border-bottom: 1px solid var(--antracite-10); }
@media (min-width: 992px) {
  .s-righe { padding-block: 8vw; row-gap: 0; align-items: start; }
  .righe-titolo { grid-column: 2 / 5; position: sticky; top: 8vw; }
  .righe { grid-column: 5 / -1; }
  .righe > li { grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); padding: 1.8vw 0; align-items: baseline; }
  .righe > li > :only-child { grid-column: 1 / -1; }
}

/* ---------- intestazione centrata (Contact §4.1) e fascia con foto o mappa ---------- */
.s-centrata { position: relative; overflow: hidden; padding-top: calc(var(--altezza-testata) + 14vw); }
.centrata-testa { display: grid; justify-items: center; text-align: center; gap: 4vw; padding-inline: var(--margine); }
.centrata-sotto { max-width: 30em; }
.fascia { position: relative; margin-top: 14vw; }
.fascia-finestra { position: relative; overflow: hidden; height: 120.5vw; }
.fascia-finestra img { width: 100%; height: 100%; }
.fascia-cta { position: absolute; right: var(--margine); bottom: 8vw; z-index: 3; }
.fascia-social { display: flex; justify-content: center; gap: 4vw; margin-top: 6vw; padding-bottom: 10vw; }
@media (min-width: 992px) {
  .s-centrata { padding-top: calc(var(--altezza-testata) + 2vw); } /* 17/10: il marchio ora sta al centro della testata */
  .centrata-testa { gap: 1.2vw; }
  .fascia { margin-top: 5vw; }
  .fascia-finestra { height: 52.8vw; }
  .fascia-cta { width: 13vw; height: 13vw; right: auto; left: 72vw; bottom: auto; top: 19.9vw; }
  .fascia-social { position: absolute; left: 20.3vw; top: 22.4vw; z-index: 3; flex-direction: column; align-items: center; gap: 0; margin: 0; padding: 0; border: 1px solid currentColor; }
}
.social-btn { display: grid; place-items: center; width: 44px; height: 44px; transition: transform var(--dur-m) var(--ease-out); }
.social-btn svg { width: 16px; height: 16px; }
@media (min-width: 992px) {
  .social-btn { width: max(36px, 2.5vw); height: max(36px, 2.5vw); }
  .social-btn + .social-btn { border-top: 1px solid currentColor; }
  .social-btn:hover { transform: scale(1.25); }
}

/* tre colonne di dati (Contact §4.1): etichetta l1 regolare, valori l1 */
.canali { row-gap: 8vw; margin-top: 14vw; text-align: center; }
.canale { grid-column: 1 / -1; display: grid; gap: 1vw; justify-items: center; }
.canale + .canale-sotto { margin-top: 4vw; }
.canale a { min-height: 24px; display: inline-flex; align-items: center; }
@media (min-width: 992px) {
  .canali { margin-top: 3.4vw; row-gap: 0; align-items: start; }
  .canali > div { display: grid; gap: 3.4vw; align-content: start; }
  .canali > div:nth-child(1) { grid-column: 2 / 4; }
  .canali > div:nth-child(2) { grid-column: 4 / 8; }
  .canali > div:nth-child(3) { grid-column: 8 / 10; }
  .canale { gap: .26vw; }
}

/* mappa ingrandita sulla casa (Contact: mappa line-art con pin ed etichetta scura) */
.mappa-zoom { height: 100%; margin: 0; cursor: grab; }
.mappa-zoom .mappa-tela { top: 38.7%; height: auto; width: 300vw; translate: 0 calc(-1 * var(--cy, 50%)); }
.mappa-zoom .punto .l2 { font-size: max(8px, 1.9vw); }
@media (min-width: 992px) { .mappa-zoom .punto .l2 { font-size: var(--fs-l2); } }
.punto-fumetto { flex-direction: column !important; gap: 0; transform: translate(calc(-100% + 2.2em), calc(-100% + 6px)) !important; align-items: flex-end; }
.punto-fumetto::after { margin-right: calc(2.2em - 6px); }
.punto-etichetta {
  display: flex; align-items: center; gap: 1.2em; padding: 1em 1.4em 1.6em;
  background: var(--antracite); color: var(--avorio); text-align: right;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .6em), calc(100% - 1.6em) calc(100% - .6em), calc(100% - 2.2em) 100%, calc(100% - 2.8em) calc(100% - .6em), 0 calc(100% - .6em));
  margin-bottom: .5em;
}
.punto-etichetta .lunetta-piccola { width: 2.6em; height: 1.3em; color: var(--avorio); display: block !important; }
.punto-etichetta span { display: block; }
.punto-etichetta .reg { opacity: .8; margin-top: .3em; }

/* ---------- mappa della zona: a tutta larghezza, punti cliccabili con scheda ---------- */
.s-mappa-zona { padding-block: 10vw 24vw; }
.mappa-intera { margin-top: 6vw; }
@media (min-width: 992px) {
  .s-mappa-zona { padding-block: 4vw 8vw; }
  .mappa-intera { height: auto; aspect-ratio: 2070 / 2178; margin-top: 3vw; }
  .mappa-intera .mappa-tela { width: 100%; height: auto; }
}
.punto-btn { display: contents; }
.punto-btn .punto-testo { cursor: pointer; }
.punto.is-cliccabile .punto-testo > .l2:first-child { border-bottom: 1px solid currentColor; }
.punto.is-scelto::after { background: var(--terracotta); }
/* scheda del punto (floating-tip: scale .75 → 1, opacity, 0,8s Out) */
.punto-scheda {
  position: absolute; z-index: 20; width: min(80vw, 22em); padding: 5vw; display: grid; gap: .6em;
  background: var(--avorio); color: var(--antracite); box-shadow: var(--ombra-card); text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: scale(.75); transform-origin: var(--origine, 0 0);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.punto-scheda.is-aperta { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.punto-scheda-chiudi { justify-self: end; min-height: 44px; margin: -1em -.5em -.5em 0; }
@media (min-width: 992px) { .punto-scheda { padding: 1.6vw; width: 22vw; } }

/* ---------- Google Maps solo dopo il consenso ---------- */
.mappa-google { grid-column: 1 / -1; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raggio-card); background: var(--sabbia); }
.mappa-google iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa-google-attesa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4vw; padding: 8vw; text-align: center; }
@media (min-width: 992px) {
  .mappa-google { grid-column: 2 / -1; aspect-ratio: 16 / 7; }
  .mappa-google-attesa { gap: 1.4vw; padding: 3vw; }
}

/* ---------- modulo in pagina (stessi campi della modale) ---------- */
.s-modulo { padding-block: 24vw; row-gap: 6vw; }
.modulo-testa { grid-column: 1 / -1; display: grid; gap: 3vw; align-content: start; }
.modulo { grid-column: 1 / -1; }
.modulo form { margin-top: 0; }
@media (min-width: 992px) {
  .s-modulo { padding-block: 8vw; row-gap: 3vw; }
  .modulo-testa { grid-column: 2 / 5; gap: 1vw; }
  .modulo { grid-column: 6 / -1; }
}

/* ---------- widget di prenotazione ---------- */
.widget-prenota { min-height: 110vw; place-content: center; justify-items: center; }
.widget-attesa { display: grid; justify-items: center; gap: 5vw; max-width: 32em; }
@media (min-width: 992px) {
  .widget-prenota { min-height: 30vw; }
  .widget-attesa { gap: 1.6vw; }
}
.s-widget { padding-bottom: 20vw; row-gap: var(--gap); }
@media (min-width: 992px) { .s-widget { padding-bottom: 6vw; } }

/* ---------- aggiunte per la zona: card sotto un titolo, scheda del punto accanto al marker ---------- */
.int-riga + .schede { margin-top: 8vw; }
.s-testo .schede { margin-top: 4vw; }
.scheda-foto.senza-foto .l2.ph { color: var(--antracite-60); background: none; border-bottom-color: currentColor; }
.mappa-punti .punto-testo { font: inherit; text-align: inherit; }
@media (min-width: 992px) {
  .int-riga + .schede { margin-top: 3vw; }
  .s-testo .schede { margin-top: 3vw; }
  .mappa-intera + .mappa-istruzione { display: none; }
  /* a sinistra del punto: i marker di Ortigia hanno l'etichetta a destra */
  .punto-scheda { left: var(--x); top: var(--y); translate: calc(-100% - 1.6vw) -50%; --origine: 100% 50%; }
}
@media (max-width: 991px) {
  .punto-scheda { left: var(--margine); right: var(--margine); bottom: var(--margine); width: auto; --origine: 50% 100%; }
}

/* ---------- aggiunte per contatti ---------- */
.canali > div { grid-column: 1 / -1; display: grid; gap: 8vw; }
@media (max-width: 991px) { .canali > div:nth-child(3) { order: -1; } .canali > div:nth-child(1) { order: -2; } }
.s-google { padding-bottom: 24vw; }
@media (min-width: 992px) { .s-google { padding-bottom: 8vw; } }
.fascia-finestra .mappa-finestra { position: absolute; inset: 0; }
.fascia-cta.su-foto { color: var(--avorio); }

/* titoli di una sola parola lunga (SCRIVETECI, COMPLETA): sul telefono la h1 da 23vw non ci sta in 88vw */
@media (max-width: 991px) {
  .s-intestazione .h1, .s-centrata .h1, .s-galleria .h1, .finale-lungo { font-size: 15vw; }
}
.host-testo { max-width: 36em; }
/* sulla mappa il cerchio cade sulle etichette dei punti: fondo pieno per leggerlo */
.fascia-cta:not(.su-foto) { background: var(--sabbia); }
/* Prenota: i tre punti con titolo h5 e testo p1 */
.scheda-dati > li.perche { display: grid; gap: .8em; align-content: start; }

/* ---------- pagine legali, 404, grazie (layout di Prenota) ---------- */
.legale-testo { display: grid; gap: 1em; max-width: 40em; }
.legale-pulsante { justify-self: start; margin-top: .6em; }
.s-legale .righe > li { align-items: start; }
.s-breve { min-height: 100vh; min-height: 100svh; align-content: center; }
.int-azione { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 992px) { .int-azione { grid-column: 2 / 6; } }

/* RIPIEGO SENZA MOVIMENTO (29/09): la fascia di Zona e Contatti tiene foto o mappa da sola, cerchio e social sotto (vedi home.css) */
html:not(.movimento) .righe-titolo { position: static; }
html:not(.movimento) .fascia { display: grid; justify-items: center; }
html:not(.movimento) .fascia-finestra { width: 100%; }
html:not(.movimento) .fascia-cta { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 8vw; }
html:not(.movimento) .fascia-social { position: static; flex-direction: row; gap: 4vw; margin-top: 6vw; padding-bottom: 10vw; border: 0; }
@media (min-width: 992px) {
  html:not(.movimento) .fascia-cta { margin-top: 3vw; }
  html:not(.movimento) .fascia-social { gap: 1vw; margin-top: 2vw; padding-bottom: 4vw; }
  html:not(.movimento) .social-btn + .social-btn { border-top: 0; }
}

/* ---------- ingrandimento foto (4/10, js/ingrandimento.js) ---------- */
.ingrandibile { cursor: zoom-in; }
html.ingrandimento-aperto, html.ingrandimento-aperto body { overflow: hidden; }
.ingrandimento {
  position: fixed; inset: 0; z-index: 250; color: var(--avorio);
  background: rgba(29, 32, 31, .97); opacity: 0; transition: opacity var(--dur-s) var(--ease-out);
  overscroll-behavior: contain; touch-action: pinch-zoom;
}
.ingrandimento.is-aperto { opacity: 1; }
.ingr-scena { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 64px var(--margine) 18px; }
.ingr-foto { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s var(--ease-out), transform .7s var(--ease-out); }
.ingrandimento.is-cambio .ingr-foto { opacity: 0; transform: scale(.985); }
.ingr-piede { display: flex; justify-content: space-between; align-items: baseline; gap: 2em; }
.ingr-didascalia { max-width: 46em; opacity: .85; }
.ingr-numero { flex: none; letter-spacing: .14em; opacity: .7; font-variant-numeric: tabular-nums; }
.ingr-chiudi { position: absolute; top: 12px; right: var(--margine); min-height: 44px; padding: 0 .2em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.ingr-freccia { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; opacity: .75; transition: opacity var(--dur-s) var(--ease-out); }
.ingr-freccia:hover, .ingr-freccia:focus-visible { opacity: 1; }
.ingr-freccia svg { width: 30px; height: 30px; }
.ingr-prec { left: 2px; }
.ingr-succ { right: 2px; }
.ingrandimento.una-sola .ingr-freccia { display: none; }
@media (min-width: 992px) {
  .ingr-scena { padding: 4.4vw 7vw 1.8vw; gap: 1vw; }
  .ingr-chiudi { top: 1.2vw; right: 2vw; }
  .ingr-freccia { width: 4.4vw; height: 4.4vw; margin-top: -2.2vw; }
  .ingr-freccia svg { width: max(28px, 2.2vw); height: max(28px, 2.2vw); }
  .ingr-prec { left: 1.4vw; }
  .ingr-succ { right: 1.4vw; }
}
@media (prefers-reduced-motion: reduce) { .ingrandimento.is-cambio .ingr-foto { transform: none; } }

/* =========================================================
   22/10 — L'appartamento
   ========================================================= */
/* galleria: le foto verticali si accoppiano da sole anche quando un filtro ne lascia alcune separate */
.galleria-lista { grid-auto-flow: row dense; }
/* Posizione (22/10): l'intestazione resta senza foto, la mappa arriva subito sotto */
.s-centrata-sola { padding-bottom: 10vw; text-align: center; }
@media (min-width: 992px) { .s-centrata-sola { padding-bottom: 4vw; } }