/*
 * Psyche - Carosello foto stile "Instagram" per le pagine Spettacoli
 * ---------------------------------------------------------------------
 * Si applica SOLO ai blocchi galleria che hanno anche la classe
 * "psy-swipe-gallery" (aggiunta a mano nei due modelli spettacolo,
 * Spezzano e Filadelfia). Le altre gallerie del sito (home, pagina
 * Galleria, ecc.) restano come sono.
 */
/*
 * Il contenitore originale (".gal-app.psy-swipe-gallery") è pensato dal
 * tema per una griglia di miniature: lo script nativo del sito gli
 * assegna talvolta, soprattutto da cellulare, una larghezza o un
 * margine inline pensati per quella griglia (es. per centrare colonne
 * strette). Il nostro script sostituisce solo il CONTENUTO del blocco,
 * non i suoi stili: senza queste regole quel margine/larghezza residuo
 * rimpicciolisce il carosello. Con "!important" ripristiniamo sempre
 * la larghezza piena, uguale su PC e cellulare.
 *
 * NOTA: qui si azzerano solo i lati (sinistra/destra). Il padding
 * sopra/sotto NON va toccato: è quello che dà il normale distacco tra
 * il testo della pagina e il carosello. Azzerarlo del tutto (come
 * capitava prima) fa "attaccare" il carosello al testo sulle pagine
 * create con lo strumento "Tipo evento" dell'editor (es. Cosenza,
 * Rende), mentre le pagine modello Filadelfia/Spezzano - che non
 * caricano nemmeno questo foglio di stile - restano con lo spazio
 * naturale del tema.
 */
.gal-app.psy-swipe-gallery{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
.psy-carousel{
  position:relative;
  width:100%;
  margin:0 auto;
  max-width:640px;
  box-sizing:border-box;
}
.psy-carousel-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:6px;
}
.psy-carousel-track::-webkit-scrollbar{display:none}
.psy-carousel-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a;
}
.psy-carousel-slide img{
  width:100%;
  height:auto;
  max-height:78vh;
  object-fit:contain;
  display:block;
  pointer-events:none;
  user-select:none;
}
.psy-carousel-counter{
  position:absolute;
  right:10px;
  bottom:10px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1;
  padding:7px 13px;
  border-radius:999px;
  pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.02em;
  backdrop-filter:blur(2px);
  z-index:2;
}
/*
   Le frecce sono zone di tocco GRANDI (un terzo largo della foto,
   alte quanto la foto intera), non piccoli pulsantini: bastano un
   colpetto impreciso a sinistra o a destra per cambiare foto,
   proprio come nelle Storie di Instagram. Il cerchietto con la
   freccia è solo l'indicazione visiva, ma tutta la zona intorno
   risponde al tocco. Sempre visibili (non solo al passaggio del
   mouse): chi non ha dimestichezza con lo scorrimento a dito deve
   poterle vedere e usare subito, anche da cellulare.
*/
.psy-carousel-arrow{
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  max-width:120px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  padding:0 4%;
  z-index:2;
  transition:background .15s ease;
}
.psy-carousel-prev{left:0;justify-content:flex-start}
.psy-carousel-next{right:0;justify-content:flex-end}
.psy-carousel-arrow:hover,
.psy-carousel-arrow:active{background:rgba(0,0,0,.14)}
.psy-carousel-arrow-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.psy-carousel-single .psy-carousel-arrow,
.psy-carousel-single .psy-carousel-counter{
  display:none;
}