/* DRG Testimonial: the carousel. Every slide shares one grid cell, so the card keeps the height of the longest quote. */

.testimonial--slides { display: grid; width: 100%; }
.testimonial--slides > .panel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.testimonial--slides > .panel.active { visibility: visible; opacity: 1; transition: opacity 300ms ease; }
@media (prefers-reduced-motion: reduce) { .testimonial--slides > .panel, .testimonial--slides > .panel.active { transition: none; } }

/* previous / pause / next, styled like the cards carousel arrows */
.testimonial--controls { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.testimonial--controls button { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0.25rem; border: 0; border-radius: 0; background-color: rgba(70, 168, 250, 0.1); cursor: pointer; }
.testimonial--controls button:focus-visible { outline: var(--focus-outline); outline-offset: 0.125rem; }
.testimonial--controls button:hover { background-color: var(--color-blue-medium); }
.testimonial--controls button:hover img { filter: brightness(0) invert(1); }
.testimonial--controls img { display: block; width: 2.25rem; height: 2.25rem; }
.testimonial--controls .testimonial-prev img { transform: scaleX(-1); }
.testimonial--controls .testimonial-pause img { width: 1.375rem; height: 1.375rem; }
.testimonial--controls .testimonial-pause .icon-play { display: none; }
.testimonial--controls .testimonial-pause.paused .icon-pause { display: none; }
.testimonial--controls .testimonial-pause.paused .icon-play { display: block; }