/* ==========================================================================
   GNC SG — Carousel
   ========================================================================== */

.carousel-wrapper {
  position: relative;
}

/* pan-y keeps vertical page scrolling with the browser while the carousel's
   pointer handlers claim the horizontal axis for dragging (carousel.js). */
.carousel-track {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.carousel-wrapper.is-dragging .carousel-track {
  cursor: grabbing;
}

/* Text and images inside the rail would otherwise be selected/ghost-dragged
   instead of pulling the rail along. */
.carousel-wrapper.is-dragging .carousel-track,
.carousel-wrapper.is-dragging .carousel-track * {
  user-select: none;
}

.carousel-track img {
  -webkit-user-drag: none;
}

/* Nothing to page through, so the grab affordance would be a lie.
   carousel.js sets .is-static alongside hiding the arrows. */
.carousel-wrapper.is-static .carousel-track {
  cursor: default;
}

.carousel-strip {
  display: flex;
}

/* Slides already stretch to the tallest in the rail (the flex default), but
   their contents do not, so a card whose title wraps onto a second line ends up
   taller than its neighbours and the CTA buttons stop lining up. Passing the
   stretched height down one level fixes that — cards in a rail then behave
   exactly like cards in a grid. Widths are set inline by carousel.js, so
   declaring display here is safe. */
.carousel-slide,
.carousel-slide > * {
  display: flex;
  flex-direction: column;
}

.carousel-slide > * {
  flex: 1;
}

/* ---- Nav arrows ---- */

/* carousel.js sets [hidden] when the rail fits in one view; the display below
   would otherwise beat the user-agent rule for [hidden]. */
.carousel-nav[hidden] {
  display: none;
}

/* A 48px translucent-black disc with a white chevron — design/icon/left.png
   and right.png, and Home.png shows the pair straddling the rail's edges. The
   30% black reads as #B3B3B3 over the page and all but disappears over a dark
   photo, leaving the chevron to carry it, which is what the design does. */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: background-color var(--transition-fast);
}

.carousel-nav svg {
  width: 28px;
  height: 28px;
}

.carousel-nav:hover {
  background-color: rgba(0, 0, 0, 0.45);
}

.carousel-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The prev arrow while the rail sits on its first page — carousel.js sets this.
   Hidden by visibility rather than display so the arrow keeps its slot: in the
   inline controls row the two arrows are flex siblings, and dropping one from
   flow would shunt the other sideways on every first-page transition. */
.carousel-nav.is-spent {
  visibility: hidden;
}

/* Centred on the rail's edge, so each disc sits half over the end card. */
.carousel-nav--prev {
  left: -24px;
}

.carousel-nav--next {
  right: -24px;
}

@media (max-width: 1023px) {
  .carousel-nav--prev { left: var(--space-2); }
  .carousel-nav--next { right: var(--space-2); }
}

/* Arrows moved out of the rail by data-controls sit in normal flow next to the
   scroll indicator, and lose the circular button treatment — they are bare
   chevrons in the designs. */
.carousel-nav--inline,
.carousel-nav--inline.carousel-nav--prev,
.carousel-nav--inline.carousel-nav--next {
  position: static;
  transform: none;
  left: auto;
  right: auto;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--color-text);
}

.carousel-nav--inline svg {
  width: 24px;
  height: 24px;
}

.carousel-nav--inline:hover {
  background: none;
  color: var(--color-primary);
}

/* ---- Dots ---- */

.carousel-dots {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-grey-300);
  padding: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.carousel-dot.is-active {
  background-color: var(--color-secondary);
}

/* ---- Scroll indicator ----
   Reads as a scrollbar, not a progress meter: the thumb is sized to one page's
   share of the rail and travels along the track as the rail pages. */

.carousel-progress {
  height: 4px;
  background-color: var(--color-grey-300);
  border-radius: 2px;
  margin-top: var(--space-4);
  overflow: hidden;
}

.carousel-progress__bar {
  height: 100%;
  background-color: var(--color-secondary);
  border-radius: 2px;
  transition: transform 0.4s ease, width 0.4s ease;
}

/* ==========================================================================
   Mobile: the rails are swipe-only.

   None of the mobile designs draw arrows, dots or a scroll indicator on a
   rail — the peeking next card is what signals that it scrolls
   (home-mobile.png, pdp.png, article.png). The controls stay in the markup so
   the same rail keeps working with a mouse above 768px.
   ========================================================================== */

@media (max-width: 767px) {
  .carousel-nav,
  .carousel-dots,
  .carousel-progress {
    display: none;
  }
}