/* ============================================================
   SOFT CAROUSEL — CORE ENGINE
   Shared, reusable, content-agnostic
   ============================================================ */
   /* Baseline confirmed: desktop + iPad + iPhone
   Date: 2025-12-18 */

/* Outer shell: arrows + viewport */
.soft-carousel {
  position: relative;
  display: grid;
  background: pink;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

/* ------------------------------------------------------------
   VIEWPORT
   - Structural wrapper only
   - NEVER scrolls
   ------------------------------------------------------------ */
.soft-carousel__viewport {
  overflow: hidden;
}

/* ------------------------------------------------------------
   TRACK
   - The ONE and ONLY scrolling element
   ------------------------------------------------------------ */
.soft-carousel__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* prevent page-back swipe */
}

/* Hide scrollbars but keep scrolling */
.soft-carousel__track::-webkit-scrollbar {
  display: none;
}
.soft-carousel__track {
  scrollbar-width: none;
}

/* ------------------------------------------------------------
   CARDS
   - Never stretch
   ------------------------------------------------------------ */
.soft-carousel__track > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* ------------------------------------------------------------
   ARROWS
   ------------------------------------------------------------ */
.soft-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

/* Hide arrows on touch devices */
@media (hover: none) {
  .soft-carousel__arrow {
    display: none;
  }
}

/* ============================================================
   LARGE STORY CAROUSEL — SKIN
   (Album-specific look, engine-agnostic)
   ============================================================ */

.soft-carousel--story-types .soft-carousel__card {
  width: 240px;
}

.soft-carousel--story-types .soft-carousel__arrow {
  font-size: 2rem;
  width: 44px;
  height: 44px;
}