/* css/carousel.css — shared swipe-left/right carousel primitive
 * (js/components/carousel.js). Used by Journey's fact carousel, Discover's
 * curated place carousel, and every paginated grid in Now Playing. */

.carousel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.carousel-viewport {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  border-radius: inherit;
}

.carousel-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.carousel-slide {
  flex: none;
  width: 100%;
  height: 100%;
  min-width: 0;
}

/* One page of a paginated grid (Now Playing's search/playlist views) — a
 * single carousel slide's content, sized to whatever column count
 * js/components/carousel.js's paginateToGridPages() computed for it. */
.carousel-grid-page {
  display: grid;
  gap: var(--space-sm);
  height: 100%;
  align-content: start;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-hairline-faint);
  box-shadow: var(--shadow-tight);
}

.carousel-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

.carousel-arrow--prev {
  left: var(--space-sm);
}

/* icon('chevron') points right by default — rotate for "previous",
 * matching the same convention already used by .search-back-btn. */
.carousel-arrow--prev svg {
  transform: rotate(180deg);
}

.carousel-arrow--next {
  right: var(--space-sm);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.carousel-dots {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding-top: var(--space-xs);
}

.carousel-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-hairline);
  transition: width var(--duration-press) var(--ease-standard),
    background var(--duration-press) var(--ease-standard);
}

.carousel-dot.is-active {
  width: 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}