/* ============================================================
   Harmony Clinic — Carosello "Storie vere" in home
   Marquee auto-loop (CSS puro) + pausa on-hover.
   Riusa le .cs-card di hc-casi.css. Nessuna dipendenza JS.
   ============================================================ */

.storie-marquee{position:relative;overflow:hidden;margin:6px 0 4px}

/* Nastro scorrevole: due copie identiche in fila -> loop continuo su -50% */
.sm-track{
  display:flex;
  gap:22px;
  width:max-content;
  padding:6px 2px;
  animation:sm-scroll var(--sm-duration,72s) linear infinite;
  will-change:transform;
}
.sm-track .cs-card{flex:0 0 300px;width:300px}

/* Pausa al passaggio del mouse o con focus da tastiera */
.storie-marquee:hover .sm-track,
.storie-marquee:focus-within .sm-track{animation-play-state:paused}

@keyframes sm-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Responsive */
@media(max-width:560px){
  .sm-track{gap:16px}
  .sm-track .cs-card{flex-basis:250px;width:250px}
}

/* Accessibilità: niente scorrimento automatico se l'utente lo disattiva.
   Diventa un carosello a scorrimento manuale, senza la copia duplicata. */
@media(prefers-reduced-motion:reduce){
  .storie-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sm-track{animation:none;width:max-content;scroll-snap-type:x mandatory}
  .sm-track .cs-card{scroll-snap-align:start}
  .sm-track .sm-dup{display:none}
}