/* ============================================================
   Reviews widget — standalone CSS.
   Card layout and styling use Tailwind utilities (reviews.twig template).
   This file covers only: slider mechanics, the loading state,
   the powered-by badge, and the is-clamped gradient (pseudo-element).
   ============================================================ */

/* ---------- Powered-by badge ------------------------------- */

.reviews-block__badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Arrow button glyph sizing ---------------------- */

.reviews-slider-arrow {
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Loading state ---------------------------------- */

.reviews-widget__loading {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9375rem;
}

/* ---------- Slider track ----------------------------------- */

.reviews-widget__track {
  display: flex;
  will-change: transform;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* transition applied dynamically by JS */
}

/* ---------- Gradient fade on clamped comments -------------- */

/* Shown only when JS detects the comment overflows 4 lines */
.reviews-widget__comment.is-clamped::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}