/* ==========================================================
   ebmnt1 — client reviews (slider: buttons / mouse grab / touch)
   cards per view: 1 (mobile) · 2 (tablet) · 3 (laptop) · 4 (large)
   a slice of the previous and next card always peeks in
   ========================================================== */

.ebmnt1-reviews {
  overflow: hidden;
  background-color: var(--ebmnt1-reviews-background-color);
  --ebmnt1-reviews-cards-per-view: 1;
  --ebmnt1-reviews-gap: 1em;
  --ebmnt1-reviews-peek: 2.2rem;
}

.ebmnt1-reviews__slider {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* ---------- prev / next buttons ---------- */

.ebmnt1-reviews__controls {
  display: flex;
  justify-content: center;
  gap: 0.7em;
}

.ebmnt1-reviews__control {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8em;
  background-color: var(--ebmnt1-reviews-control-background-color);
  color: var(--ebmnt1-reviews-control-icon-color);
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out,
    opacity 0.4s ease-in-out;
}

.ebmnt1-reviews__control:hover {
  background-color: var(--ebmnt1-reviews-control-hover-background-color);
}

.ebmnt1-reviews__control:disabled {
  opacity: 0.35;
  cursor: default;
  background-color: var(--ebmnt1-reviews-control-background-color);
}

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

.ebmnt1-reviews__track {
  display: flex;
  gap: var(--ebmnt1-reviews-gap);
  padding-inline: var(--ebmnt1-reviews-peek);
  padding-block: 0.8em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ebmnt1-reviews-peek);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: none;
  text-align: start;
}

.ebmnt1-reviews__track::-webkit-scrollbar {
  display: none;
}

.ebmnt1-reviews__track.ebmnt1-is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.ebmnt1-reviews__track.ebmnt1-is-dragging * {
  pointer-events: none;
}

/* ---------- card ---------- */

.ebmnt1-reviews__card {
  /* percentage resolves against the track's content box (peek padding excluded) */
  flex: 0 0
    calc(
      (100% - (var(--ebmnt1-reviews-gap) * (var(--ebmnt1-reviews-cards-per-view) - 1))) /
        var(--ebmnt1-reviews-cards-per-view)
    );
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  padding: 1.8em;
  background-color: var(--ebmnt1-reviews-card-background-color);
  border-radius: 1.8em;
  border-inline-start: 4px solid var(--ebmnt1-reviews-card-border-color);
  transition: box-shadow 0.4s ease-in-out;
}

.ebmnt1-reviews__card:hover {
  box-shadow: 0 0.8em 2em var(--ebmnt1-reviews-card-hover-shadow-color);
}

.ebmnt1-reviews__quote-icon {
  font-size: 2rem;
  color: var(--ebmnt1-reviews-quote-icon-color);
}

.ebmnt1-reviews__stars {
  display: flex;
  gap: 0.2em;
  font-size: var(--ebmnt1-fs-sm);
  color: var(--ebmnt1-reviews-star-color);
}

.ebmnt1-reviews__text {
  flex: 1;
  color: var(--ebmnt1-reviews-text-color);
}

.ebmnt1-reviews__author {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

.ebmnt1-reviews__avatar {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border: 3px solid var(--ebmnt1-reviews-avatar-border-color);
  border-radius: 50%;
  -webkit-user-drag: none;
}

.ebmnt1-reviews__name {
  font-size: var(--ebmnt1-fs-md);
  font-weight: 700;
  color: var(--ebmnt1-reviews-name-color);
}

.ebmnt1-reviews__role {
  font-size: var(--ebmnt1-fs-xs);
  color: var(--ebmnt1-reviews-role-color);
}

@media (min-width: 768px) {
  .ebmnt1-reviews {
    --ebmnt1-reviews-cards-per-view: 2;
    --ebmnt1-reviews-gap: 1.2em;
    --ebmnt1-reviews-peek: 3rem;
  }
}

@media (min-width: 1024px) {
  .ebmnt1-reviews {
    --ebmnt1-reviews-cards-per-view: 3;
    --ebmnt1-reviews-gap: 1.5em;
    --ebmnt1-reviews-peek: 3.5rem;
  }
}

@media (min-width: 1440px) {
  .ebmnt1-reviews {
    --ebmnt1-reviews-cards-per-view: 3;
    --ebmnt1-reviews-peek: 5rem;
  }
}