/* ==========================================================================
   CAROUSEL.CSS — "Featured Works" horizontal scroll-snap carousel
   No JS required: native horizontal scroll with snap points. Add a new
   game by copy-pasting one .card block in the HTML — nothing to update
   here.
   ========================================================================== */

.carousel {
  display: flex;
  align-items: flex-start; /* don't stretch cards to match the tallest one */
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xs); /* room for scrollbar */
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--color-border-soft) transparent;
}

.card {
  scroll-snap-align: start;
  flex: 0 0 320px; /* card width — tweak to resize all cards at once */
  background: var(--color-window-bg);
  border: 1px solid var(--color-border-soft);
}

.card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-panel-bg); /* shows while image loads / as placeholder */
}

.card__info {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel-bg);
}

.card__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  margin-bottom: var(--space-2xs);
}

.card__year {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

.card__role {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}