/* ═══════════════════════════════════════════════════════════════════════════
   Carosello (custom) — multi-istanza, slide visibili configurabili

   Attributi data- su .carosello:
     data-visible="N"         slide mostrate su desktop (>1024px)
     data-tablet-visible="N"  override opzionale per 768–1024px
     data-autoplay="ms"       0 / assente = niente autoplay
     data-arrows="false"      nasconde le frecce prec/succ
     data-dots="false"        nasconde la navigazione a punti
     data-spazio="30.5px"     spazio (in px, anche float) tra le slide visibili
     data-anteprima="20"      anteprima slide prec/succ ai bordi: true=20% o 0<n<100
                              (% mostrata per lato). Disattivata sotto i 768px.
     data-anteprima-posizione="center"  center (fetta su entrambi i lati) |
                              left (fetta solo a destra) | right (fetta solo a sinistra)
     data-trascina="true"     trascinamento con mouse/touch (default true)

   Personalizzazione senza override:
     .carosello-controlli-custom  → disattiva lo "skin" di default delle frecce
     .carosello-punti-custom      → disattiva lo "skin" di default dei punti
   (la struttura/posizionamento resta; cambiano solo i colori/transizioni)

   Convenzione variabili colore (tutte raccolte su .carosello):
     --bg-*   background-color      --bg-h-*  background-color (hover/focus/active)
     --br-*   border-color          --br-h-*  border-color     (hover/focus/active)
     --cl-*   color                 --cl-h-*  color            (hover/focus/active)

   Nota dimensioni: tutto in px; i rem sono riservati ai soli font-size per
   evitare problemi se cambia il font-size dell'html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Contenitore esterno — flex column: wrap + punti impilati con un gap */
.carosello {
	--durata: .3s;
	--p-carosello-v: 0; /* --> verticale = top/bottom */
	--p-carosello-o: 0; /* --> orizzontale = left/right */
	--spazio: 0px;        /* spazio tra le slide visibili (da data-spazio) */
	--anteprima-slot: 0;  /* slot extra (frazioni di slide) per l'anteprima ai bordi */

	/* ── Colori frecce ───────────────────────────────────────────────── */
	--bg-frecce: var(--color-blue-dark);
	--br-frecce: var(--color-white-muted);
	--cl-frecce: var(--color-cream);
	--bg-h-frecce: var(--color-gold);
	--br-h-frecce: var(--color-gold);
	--cl-h-frecce: var(--color-cream);

	/* ── Colori punti ────────────────────────────────────────────────── */
	--bg-punti: rgba(217, 217, 217, 0.7);
	--bg-h-punti: var(--color-gold);

  position: relative;
  width: 100%;
  user-select: none;
  padding: var(--p-carosello-v) var(--p-carosello-o);
  box-sizing: border-box;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Wrap — position:relative così le frecce si centrano sul viewport */
.carosello-wrap {
  position: relative;
  width: 100%;
}

/* Viewport — ritaglia il contenitore mostrando solo le slide visibili.
   touch-action: pan-y → il drag orizzontale lo gestisce il JS, lo scroll
   verticale della pagina su touch resta al browser. */
.carosello-viewport {
  overflow: hidden;
  touch-action: pan-y;
}

/* --filo-sx / --filo-dx (impostate dal JS) = margini negativi laterali:
   - lato "a filo" (-spazio/2): annulla la mezza-spaziatura al bordo del
     viewport così la slide risulta a filo;
   - lato con anteprima (0): il bordo mostra la fetta della slide prec/succ.
   Senza anteprima entrambi i lati sono a filo. */
.carosello-contenitore {
  display: flex;
  will-change: transform;
  margin-left:  var(--filo-sx, calc(var(--spazio) / -2));
  margin-right: var(--filo-dx, calc(var(--spazio) / -2));
}

/* --carosello-visibili e --anteprima-slot sono impostate su .carosello dal JS.
   Restringendo le slide a 100%/(visibili + anteprima-slot) entrano nel viewport
   le slide piene + le fette di anteprima (slot = 0, f o 2f; offset gestito dal JS).
   Metà spazio per lato su ogni slide → tra due slide adiacenti = spazio pieno. */
.carosello-slide {
  flex: 0 0 calc(100% / (var(--carosello-visibili, 3) + var(--anteprima-slot, 0)));
  min-width: 0;
  padding-inline: calc(var(--spazio) / 2);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Frecce: struttura (sempre applicata) ──────────────────────────────────
   Solo il "box" del bottone (dimensioni, bordo, centratura dell'icona).
   Il posizionamento (absolute/top/z-index) e l'aspetto stanno nello skin di
   default, così con .carosello-controlli-custom puoi usare un'altra position
   (es. relative in riga) senza dover sovrascrivere nulla. */
.carosello-controlli .carosello-freccia {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--w-freccia);
  height: var(--h-freccia);
  border-width: 1px;
  border-style: solid;
  font-size: 0.875rem;
  padding: 0;
}

/* ── Frecce: skin di default (disattivabile con .carosello-controlli-custom) ──
   Include il posizionamento assoluto sovrapposto al viewport. */
.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia {
	--w-freccia: 40px;
	--h-freccia: 40px;
  position: absolute;
  top: calc(50% - var(--h-freccia) / 2);
  z-index: 10;
  border-radius: 50%;
  background: var(--bg-frecce);
  border-color: var(--br-frecce);
  color: var(--cl-frecce);
  transition: background var(--durata) ease-in-out,
              border-color var(--durata) ease-in-out,
              color var(--durata) ease-in-out;
}

/* hover = focus = active (su mobile l'hover può non essere percepito) */
.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia:hover,
.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia:focus,
.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia:active {
  background: var(--bg-h-frecce);
  border-color: var(--br-h-frecce);
  color: var(--cl-h-frecce);
}

.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia.prev { left: calc(-1 * var(--w-freccia) / 2); }
.carosello-controlli:not(.carosello-controlli-custom) .carosello-freccia.next { right: calc(-1 * var(--w-freccia) / 2); }

/* ── Punti: contenitore ────────────────────────────────────────────────── */
.carosello-punti {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* ── Punti: struttura (sempre applicata) ───────────────────────────────── */
.carosello-punti .carosello-punto {
	--d: 10px;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ── Punti: skin di default (disattivabile con .carosello-punti-custom) ──── */
.carosello-punti:not(.carosello-punti-custom) .carosello-punto {
  background: var(--bg-punti);
  transition: background var(--durata) ease-in-out,
              transform var(--durata) ease-in-out;
}

/* hover = focus = active = punto selezionato (.active) */
.carosello-punti:not(.carosello-punti-custom) .carosello-punto:hover,
.carosello-punti:not(.carosello-punti-custom) .carosello-punto:focus,
.carosello-punti:not(.carosello-punti-custom) .carosello-punto:active,
.carosello-punti:not(.carosello-punti-custom) .carosello-punto.active {
  background: var(--bg-h-punti);
  transform: scale(1.25);
}

/* ── Dimensionamento generico dei figli ──────────────────────────────────── */
/* Ogni figlio diretto di una slide riempie il suo slot in orizzontale.
   Altezze, aspect-ratio e altri stili specifici del progetto
   vanno nel foglio di stile del progetto, non qui.            */
.carosello-slide > * {
  width: 100%;
  flex-shrink: 1;
}