/* ==========================================================================
   Reviews 3D Carousel
   ========================================================================== */

.reviews-carousel {
  position: relative;
  padding: 60px 0 40px;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

.reviews-carousel__viewport {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  transform-style: preserve-3d;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.reviews-carousel__viewport:active {
  cursor: grabbing;
}

.reviews-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Each .review article gets injected styles via JS for transform.
   Base state below is a fallback if JS is off (stack centered). */
.reviews-carousel .review {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(540px, 92vw);
  margin: 0;
  transform: translate3d(-50%, 0, 0);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 500ms ease,
              filter 500ms ease;
  will-change: transform, opacity;
  background: #1a1e26;
  border: 1px solid #2c3240;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);

  /* Force light-on-dark text regardless of page colour scheme */
  color: #e4e8f0;
}

/* Text elements inside carousel cards – explicit colours for contrast */
.reviews-carousel .review__name    { color: #ffffff; font-weight: 600; }
.reviews-carousel .review__location { color: #8a95a8; font-size: 13px; }
.reviews-carousel .review__quote   { color: #d0d6e0; line-height: 1.65; }
.reviews-carousel .review__meta    { color: #6b7585; border-top-color: #2c3240; }
.reviews-carousel .review__rating  { color: #ffc400; }

.reviews-carousel .review.is-active {
  z-index: 5;
  filter: none;
}

.reviews-carousel .review.is-prev,
.reviews-carousel .review.is-next {
  z-index: 3;
  opacity: 0.55;
  filter: blur(0.5px) saturate(0.8);
}

.reviews-carousel .review.is-far {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* Navigation buttons */
.reviews-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(20, 23, 28, 0.85);
  border: 1px solid var(--c-graphite-800, #232830);
  color: var(--c-white, #fff);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.reviews-carousel__nav:hover {
  background: var(--c-yellow, #ffc400);
  color: #14171c;
  border-color: var(--c-yellow, #ffc400);
  transform: translateY(-50%) scale(1.06);
}

.reviews-carousel__nav:focus-visible {
  outline: 2px solid var(--c-yellow, #ffc400);
  outline-offset: 3px;
}

.reviews-carousel__nav .icon {
  width: 22px;
  height: 22px;
}

.reviews-carousel__nav--prev { left: max(8px, calc(50% - 360px)); }
.reviews-carousel__nav--next { right: max(8px, calc(50% - 360px)); }

/* Dots */
.reviews-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.reviews-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-graphite-700, #2a3038);
  cursor: pointer;
  transition: background 200ms ease, width 250ms ease, transform 250ms ease;
}

.reviews-carousel__dot.is-active {
  background: var(--c-yellow, #ffc400);
  width: 28px;
  border-radius: 8px;
}

.reviews-carousel__dot:hover {
  background: var(--c-graphite-500, #4a525c);
}

.reviews-carousel__dot.is-active:hover {
  background: var(--c-yellow, #ffc400);
}

/* Mobile: shorten viewport, hide nav buttons (use swipe + dots) */
@media (max-width: 720px) {
  .reviews-carousel__viewport { height: 520px; }
  .reviews-carousel__nav { display: none; }
  .reviews-carousel .review { padding: 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reviews-carousel .review { transition: none; }
}