.testimonial {
  padding-bottom: 1.5rem;
  height: 100%;
  display: flex;
}

.testimonials__slide {
  min-height: 0;
  padding-bottom: 1.8rem;
}

.testimonial__user {
  padding: 3.4rem 1rem;
  row-gap: 1.6rem;
  min-width: 17rem;
  max-width: calc(100% - 4.8rem);
  border-radius: 1.2rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 12px 24px rgba(15, 23, 42, 0.08), 0px 5px 12px rgba(15, 23, 42, 0.05);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  z-index: 1;
}

/* Removed gradient mask effects for cleaner look */

.testimonial__user:hover {
  transform: translateY(-4px);
  box-shadow: 0px 16px 28px rgba(15, 23, 42, 0.12), 0px 8px 16px rgba(15, 23, 42, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}

.testimonial__user-info {
  row-gap: 0.6rem;
}

.testimonial__user_title {
  text-align: center;
  font-size: 1rem;
}

/* Comment body: left-aligned, heading stays centered */
.testimonial__content .rte p,
.testimonial__content > p,
.testimonial__text p {
  text-align: left !important;
}

.testimonial__avatar {
  width: 8rem;
  height: 8rem;
}

.testimonial__content {
  padding: 2.4rem;
  gap: 1.6rem;
  border-radius: 1rem;
}

.testimonial__stars {
  gap: 0.1rem;
}

.testimonial__star--rating-color {
  color: rgb(var(--color-review-stars-foreground));
}

.testimonial__user__icon {
  width: 5rem;
  height: 5rem;
  margin: auto;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(calc(var(--transform-direction) * 50%), -50%);
  position: absolute;
}

.testimonial__quote {
  position: absolute;
  bottom: -2.4rem;
  right: 2rem;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.12)) drop-shadow(0 2px 5px rgba(15, 23, 42, 0.08));
  opacity: 0.9;
}

.testimonials-grid {
  position: relative;
}

/* Fade mask - transparent overlay approach (both sides) */
/* Default desktop mask */
.testimonials__slider {
  -webkit-mask-image: linear-gradient(to right, transparent, black 150px, black calc(100% - 150px), transparent);
  mask-image: linear-gradient(to right, transparent, black 150px, black calc(100% - 150px), transparent);
}

/* Mobile mask */
@media screen and (max-width: 749px) {
  .testimonials__slider {
    -webkit-mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
    mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
    padding-left: 3rem;
  }
}

/* Tablet mask */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .testimonials__slider {
    -webkit-mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
    mask-image: linear-gradient(to right, transparent, black 100px, black calc(100% - 100px), transparent);
  }
}

.testimonials__slider.grid--peek {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.testimonials__slider .grid__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Default fallback widths - can be overridden by inline styles */
@media screen and (min-width: 990px) {
  .testimonials__slider.grid--3-col-desktop .grid__item {
    width: 45%;
    min-width: 45%;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .testimonials__slider.grid--2-col-tablet .grid__item {
    width: 60%;
    min-width: 60%;
  }
}

/* Mobile card width is now controlled by inline styles in testimonials.liquid */

@media screen and (max-width: 749px) {
  .testimonial {
    flex-direction: column;
  }

  .testimonial__content {
    align-items: center;
  }

  .testimonial__user:not(:empty) + .testimonial__content {
    margin-top: -6.8rem;
    padding: 9.7rem 2.4rem 5.6rem 2.4rem;
  }

  .testimonial__user--no-avatar:not(:empty) + .testimonial__content {
    margin-top: -3.4rem;
  }
}

@media screen and (min-width: 750px) {
  .testimonial--has-avatar {
    margin-inline-start: 1.5rem;
  }
  
  .testimonial__user {
    max-width: 17.7rem;
  }

  .testimonial__avatar {
    width: 10rem;
    height: 10rem;
  }

  .testimonial__content {
    align-items: flex-start;
    padding: 6.4rem;
  }

  .testimonial__user:not(:empty) + .testimonial__content {
    margin-inline-start: -8.8rem;
    padding-block: 6.4rem;
    padding-inline-start: 14rem;
    padding-inline-end: 8rem;
  }

  .testimonial__quote {
    inset-inline-end: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .testimonial__user:not(:empty) + .testimonial__content {
    padding-block: 8rem;
    padding-inline-start: 14rem;
    padding-inline-end: 8rem;
  }
}