/* Scorrimento delle schede in homepage: va insieme a scorrimento-schede.js.
   Tutto vale solo con le classi che mette lo script («scorre» o «due-righe» sulla lista, «fermo» sulla sezione):
   senza script resta la griglia di stile.css. */

/* il pulsante «Ferma il movimento» / «Riprendi il movimento», sopra le schede a destra */
.scorrimento-comandi { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.scorrimento-comandi[hidden] { display: none; }
.scorrimento-ferma { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--accento); border-radius: 4px; background: var(--superficie); color: var(--inchiostro); font: 500 15px var(--sans); cursor: pointer; }
.scorrimento-ferma:hover { background: #fff; }
.scorrimento-ferma > span:first-child { width: 14px; text-align: center; font-size: 13px; }

/* la riga con le frecce ai lati, a metà dell'immagine (--centro-foto lo calcola lo script) */
.scorrimento-riga { position: relative; }
.scorrimento-freccia:not([hidden]) { position: absolute; z-index: 3; top: var(--centro-foto, 33%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1px solid #ffffffb0; border-radius: 50%; background: #2d2927d9; color: #fff; font: 600 22px/1 var(--sans); cursor: pointer; box-shadow: 0 4px 12px #30251d33; }
.scorrimento-freccia:hover { background: var(--scuro); }
.scorrimento-freccia:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
.scorrimento-freccia.precedente { left: -22px; }
.scorrimento-freccia.successiva { right: -22px; }

/* una riga che scorre in orizzontale: tre schede per volta sul computer, una (e il bordo della successiva) sul telefono.
   L'overflow taglierebbe l'ombra delle schede: un margine interno tutto intorno, ripreso da un margine negativo
   uguale (le schede restano dove sono), e scroll-padding perché l'aggancio tenga conto del margine a sinistra. */
.schede.scorre, .schede.due-righe {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding: 10px 12px 22px; margin: -10px -12px -12px; scroll-padding-inline: 12px;
}
.schede.scorre { display: flex; }
.schede.scorre > .scheda { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }

/* due righe sempre lette per righe (1 2 3 4 sopra, 5 6 7 sotto): --colonne = metà delle schede arrotondata in su,
   scritta dallo script; le due righe scorrono insieme, una colonna alla volta */
.schede.due-righe { display: grid; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--colonne, 3), calc((100% - 32px) / 3)); }
.schede.due-righe > .scheda { scroll-snap-align: start; }

@media (max-width: 760px) {
  .schede.scorre > .scheda { flex-basis: 86%; }
  .schede.due-righe { grid-template-columns: repeat(var(--colonne, 1), 86%); }
  .scorrimento-freccia.precedente { left: -16px; }
  .scorrimento-freccia.successiva { right: -16px; }
}

/* «Ferma» ferma anche il pan e zoom delle copertine della sezione */
.immobili.fermo .scheda img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .schede.scorre, .schede.due-righe { scroll-behavior: auto; }
  .immobili .scheda img { animation: none; }
}