/* Testimonial carousel: the base quote-block rules in styles.css remain the source of truth. */
.testimonial-carousel {
  min-width: 0;
}

/* Before the carousel script is ready, keep every testimonial in normal flow. */
.testimonial-slides {
  min-width: 0;
}

.testimonial-slide {
  min-width: 0;
}

.testimonial-slide blockquote {
  min-width: 0;
}

.testimonial-slide .quote-author {
  min-width: 0;
}

.testimonial-slide .quote-author > div {
  min-width: 0;
}

.testimonial-slide .quote-author strong {
  font-size: 12px;
  line-height: 1.45;
}

.testimonial-slide .quote-author small {
  display: block;
  font-size: 11px;
  line-height: 1.5;
}

/* JS adds .is-ready and toggles .is-active; slides share one grid cell so the
   tallest testimonial reserves the layout space without a fixed height. */
.testimonial-carousel.is-ready .testimonial-slides {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.testimonial-carousel.is-ready .testimonial-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.testimonial-carousel.is-ready .testimonial-slide.is-active {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.testimonial-controls[hidden] {
  display: none;
}

.testimonial-controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 25px;
}

.testimonial-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #cec0df;
  border-radius: 6px;
  background: transparent;
  color: var(--purple);
  font-size: 13px;
  line-height: 1;
}

.testimonial-control:hover {
  border-color: var(--purple);
  background: var(--lilac);
}

.testimonial-control:focus-visible {
  outline: 3px solid #b99adf;
  outline-offset: 3px;
}

.testimonial-position {
  min-width: 43px;
  color: var(--purple-dark);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.testimonial-toggle {
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel.is-ready .testimonial-slide {
    transition: none;
  }
}