/* =======================================
Review Carousel / Swiper Styles
 =================================== */

/* Main container for the carousel */
.review-swiper {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y; /* Allows vertical scroll on touch devices */
}

/* Class added via JS on drag start */
.review-swiper.grabbing {
  cursor: grabbing;
}

/* Wrapper for all slides */
.review-swiper-wrapper {
  /* NOTE: This element requires 'display: flex' in your main styles */
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  --carousel-gap: 15px;
  gap: var(--carousel-gap);
}

/* Individual slide styles */
.review-swiper-wrapper > div {
  /* Mobile default: 1 slide per view */
  flex: 0 0 calc((100% - 0 * var(--carousel-gap)) / 1);
  min-width: calc((100% - 0 * var(--carousel-gap)) / 1);
}

/* ====================================
    Responsive Breakpoints
================================================*/

/* Desktops and up (>= 768px) */
@media (width >= 768px) {
  .review-swiper-wrapper > div {
    /* 4 slides per view */
    flex: 0 0 calc((100% - 1 * var(--carousel-gap)) / 2);
    min-width: calc((100% - 1 * var(--carousel-gap)) / 2);
  }
}