/* horizontal-scroll.css — utility for horizontal card lists on mobile */
.horizontal-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  margin: 0 -0.5rem;
}
.horizontal-scroll > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 80%;
}
.horizontal-scroll::-webkit-scrollbar {
  height: 8px;
}
.horizontal-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
@media (orientation: landscape) and (max-width: 900px) {
  /* phones in landscape — show ~1 card */
  .horizontal-scroll > * { min-width: 92%; }
}
@media (orientation: portrait) and (max-width: 900px) {
  /* phones in portrait — show ~3 cards */
  .horizontal-scroll > * { min-width: calc((100% - 2rem) / 3); }
}
@media (min-width: 901px) {
  /* desktop — revert to wrapping/grid behavior */
  .horizontal-scroll { overflow-x: visible; flex-wrap: wrap; margin: 0; }
  .horizontal-scroll > * { min-width: auto; flex: 1 1 30%; }
}