/* Shared Card List component
 *
 * Used by:
 *  - dashboard analytics row (passes legacy:true → also gets dashboard__* classes
 *    and inherits visual styles from css/dashboard.css)
 *  - online lobby pack preview (sm variant, no stats)
 */

.card-list__wrapper {
  position: relative;
  width: 100%;
}

.card-list__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.card-list__nav--left  { left: 0; }
.card-list__nav--right { right: 0; }

.card-list__scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
  /* Snap to card boundaries after a touch-flick. `proximity` is intentional
   * (not `mandatory`) so the arrow-button scrollBy({left: ±300}) animation
   * stays smooth and isn't fought by an aggressive snap. */
  scroll-snap-type: x proximity;
}

.card-list__scroll::-webkit-scrollbar { height: 8px; }
.card-list__scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.card-list__scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

.card-list__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Small variant: lobby pack preview */
.card-list__scroll--sm .card {
  width: 56px;
  min-width: 56px;
  height: 84px;
}
/* Text-only Live/Bye cards in the sm thumbnail variant:
 * at 56×84 the stacked description/prompt are fundamentally too small
 * to read — hide them and let the title be the only content, so the
 * card reads as a title-only thumbnail (matching die's title-overlay
 * behaviour). Title inherits post-#108 cqi scaling from card.css. */
.card-list__scroll--sm .card--text-only .card__description,
.card-list__scroll--sm .card--text-only .card__prompt {
  display: none;
}
.card-list__scroll--sm .card--text-only .card__body--text-only {
  padding: 4% 6%;
  gap: 0;
  justify-content: center;
}
.card-list__scroll--sm .card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-list__empty {
  padding: 0.75rem;
  color: rgba(0,0,0,0.55);
  font-style: italic;
  text-align: center;
}