/*
 * Scroller orizzontale con aggancio (JS opzionale: components/rail.js per le frecce).
 * --rail-item = larghezza delle card, --rail-gap = spazio tra le card.
 * overflow-y: hidden + padding-bottom: senza, uno sforamento di 2-3px del testo rende il rail
 * scorrevole anche in verticale e "cattura" lo scroll della pagina.
 */
@layer components {
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-item, minmax(260px, 300px)); gap: var(--rail-gap, 16px);
    overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    & > * { scroll-snap-align: start; }
  }
  .rail__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .rail__count { font-size: 14px; color: var(--color-muted-text); }

  @media (max-width: 767px) {
    .rail { grid-auto-columns: var(--rail-item-m, 80%); }
  }
}