/* Raccolta Fondi — carosello: le stesse card della griglia, che scorrono di una
   alla volta. La radice porta anche la classe .cds-rac, cosi' eredita variabili
   e stile delle card senza duplicare una riga: cambiare la griglia cambia anche
   questo. */

.cds-racsl {
  position: relative;
  --cds-sl-per: 1;    /* card visibili — sovrascritto dal controllo responsive */
  --cds-sl-gap: 16px;
  --cds-sl-gutter: 54px;  /* corsia laterale in cui vivono le frecce */
}
.cds-racsl button { -webkit-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; font: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Le frecce stanno FUORI dalle card, nel margine laterale della radice: non
   coprono mai la foto ne' il pulsante "Sostieni". */
@media (min-width: 768px) {
  .cds-racsl { padding-left: var(--cds-sl-gutter); padding-right: var(--cds-sl-gutter); --cds-sl-per: 2; }
}
@media (min-width: 1025px) {
  .cds-racsl { --cds-sl-per: 3; }
}

.cds-racsl__viewport { position: relative; }
.cds-racsl__track {
  display: flex;
  gap: var(--cds-sl-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* trascinamento fluido su iOS */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Le ombre delle card in hover sbordano: senza respiro verrebbero tagliate
     dall'overflow del binario. */
  padding: 4px 4px 10px;
  margin: -4px -4px -10px;
}
.cds-racsl__track::-webkit-scrollbar { display: none; }

/* Quante ne stanno in fila lo dice --cds-sl-per; si scorre comunque di una. */
.cds-racsl__slide {
  flex: 0 0 calc((100% - (var(--cds-sl-per) - 1) * var(--cds-sl-gap)) / var(--cds-sl-per));
  min-width: 0;
  scroll-snap-align: start;
}
.cds-racsl__slide > .cds-rac-card { height: 100%; }

/* ── Frecce (solo da tablet in su) ───────────────────────────────────────── */
.cds-racsl__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--cds-ink, #14202e);
  box-shadow: 0 6px 20px rgba(20, 35, 60, .18);
  transition: background .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}
.cds-racsl .cds-racsl__nav:hover,
.cds-racsl .cds-racsl__nav:focus-visible {
  background: var(--cds-blue, #02A3E0);
  color: #fff;
  outline: none;
}
.cds-racsl .cds-racsl__nav:active { transform: translateY(-50%) scale(.93); background: var(--cds-blue-dark, #0285ba); color: #fff; }
.cds-racsl__nav[disabled] { opacity: .3; pointer-events: none; }
/* left/right di un elemento assoluto partono dal bordo INTERNO del padding: per
   finire nella corsia laterale servono scostamenti negativi pari alla corsia
   stessa. Con 0 le frecce restavano appoggiate sopra la prima e l'ultima card. */
.cds-racsl__nav--prev { left: calc(var(--cds-sl-gutter) * -1); }
.cds-racsl__nav--next { right: calc(var(--cds-sl-gutter) * -1); }

/* ── Indicatori ──────────────────────────────────────────────────────────── */
.cds-racsl__dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cds-racsl .cds-racsl__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cds-line, #d7dde6);
  transition: background .15s ease, transform .15s ease, width .15s ease;
}
.cds-racsl .cds-racsl__dot:hover { background: var(--cds-blue, #02A3E0); }
.cds-racsl .cds-racsl__dot.is-on { background: var(--cds-blue, #02A3E0); width: 22px; border-radius: 999px; }
.cds-racsl .cds-racsl__dot:focus-visible { outline: 2px solid var(--cds-blue, #02A3E0); outline-offset: 3px; }
.cds-racsl__dot[hidden] { display: none; }

/* ── Telefono: niente frecce, si scorre col dito ─────────────────────────── */
@media (max-width: 767px) {
  .cds-racsl__nav { display: none; }
  .cds-racsl { --cds-sl-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cds-racsl__track { scroll-behavior: auto; }
  .cds-racsl__nav, .cds-racsl__dot { transition: none; }
}