/*
 * Testimonis de clients (global-templates/testimonials-component.php).
 * Figma "About us" (2745:1539), bloc "Què diuen els nostres clients": fons gris
 * #E5E7EB, foto 192x210, cita 28px, autor 20px, comptador "1/5 →" a baix a la
 * dreta.
 */

.testimonials {
  background-color: #e5e7eb;
  color: var(--color-dark);
  padding: var(--section-spacing-y) 0;
}

.testimonials-title {
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
  color: inherit;
}

.testimonials-body {
  display: grid;
  gap: 24px;
}

/* Tots els testimonis a la mateixa cel·la: la caixa fa l'alçada del més llarg
   i el canvi és un fos encreuat, sense salts de la pàgina. */
.testimonials-stage {
  display: grid;
}

.testimonial {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.testimonial.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.1s, visibility 0s;
}

.testimonial-photo {
  width: 140px;
  aspect-ratio: 192 / 210;
  border-radius: 8px;
  object-fit: cover;
}

.testimonial-quote {
  margin: 0;
}

.testimonial-quote p {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(20px, 1.94vw, 28px);
  line-height: 1.2;
}

.testimonial-author {
  margin-top: 24px;
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.2;
}

.testimonial-author strong {
  font-weight: 600;
}

.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.testimonials-counter {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
}

.testimonials-current {
  /* #46C194 del Figma no arriba al 3:1 sobre el gris (text gran): to AA. */
  color: var(--color-pill-green);
}

.testimonials-next {
  display: inline-flex;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.testimonials-next:hover {
  background-color: rgba(44, 44, 68, 0.08);
}

@media screen and (min-width: 768px) {
  .testimonial {
    grid-template-columns: 192px minmax(0, 1fr);
    align-items: center;
  }

  .testimonial-photo {
    width: 192px;
  }
}

@media screen and (min-width: 992px) {
  .testimonials {
    padding: 96px 0;
  }

  .testimonials-title {
    margin-bottom: 73px;
  }

  /* Figma: bloc de 1001px (foto + text de 784px, 120px de marge a la dreta) i
     el comptador alineat a baix a la dreta. */
  .testimonials-body {
    grid-template-columns: minmax(0, 1001px) auto;
    justify-content: space-between;
    align-items: end;
  }

  .testimonial-content {
    padding-right: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial,
  .testimonial.is-active {
    transition: none;
  }
}