/* =========================================================
   Testimonials ("What Clients Say")
   ========================================================= */

.testimonials {
  padding-block: var(--section-space);
  background: var(--color-black);
}

.testimonials__header {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.testimonials__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ---------- Ticker (moves right to left) ---------- */
.testimonials__ticker {
  --t-gap: 1.25rem;
  /* every card is about a third of the content width, so one set of three
     is always wider than the visible area and the loop never shows a gap */
  --t-card: clamp(280px, 30vw, 400px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.testimonials__track {
  display: flex;
  width: max-content;
}

/* Both copies of the list move left by exactly their own width, then start again.
   Because the second copy sits right behind the first, the restart is invisible and
   the loop never stops. (Measuring each list by its own width works the same in
   every browser, unlike moving the whole track by half of its width.) */
.testimonials__list {
  animation: testimonials-ticker 50s linear infinite; /* fallback without JavaScript; the speed is set in index.html (data-ticker-motion) */
}

.testimonials__ticker:hover .testimonials__list,
.testimonials__ticker.is-paused .testimonials__list {
  animation-play-state: paused;
}

/* With JavaScript, js/ticker.js moves the whole track as one piece instead
   (seconds per loop in data-ticker-motion), so the CSS animation is switched off. */
.testimonials__ticker.is-js .testimonials__list {
  animation: none;
}

.testimonials__ticker.is-js .testimonials__track {
  will-change: transform;
}

@keyframes testimonials-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.testimonials__list {
  display: flex;
  flex-shrink: 0;
  gap: var(--t-gap);
  margin: 0;
  padding: 0 var(--t-gap) 0 0; /* trailing gap keeps spacing even at the loop point */
  list-style: none;
}

.testimonials__list > li {
  display: flex; /* every card stretches to the tallest one */
  flex: 0 0 var(--t-card);
}

/* ---------- Card ---------- */
.testimonial {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(255, 137, 141, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 60%),
    var(--color-black);
}

/* Circular portrait */
.testimonial__photo {
  flex-shrink: 0;
  width: clamp(72px, 6.5vw, 96px);
  height: clamp(72px, 6.5vw, 96px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%; /* keeps faces centred in the circle */
  background: var(--color-charcoal);
  box-shadow: 0 0 0 3px rgba(255, 228, 228, 0.08);
}

/* Initials, used where no approved photo is available yet */
.testimonial__photo--initials {
  display: grid;
  place-items: center;
  background: #3a2326; /* same rose-dark circle as the Services icons */
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-rose);
}

.testimonial__body {
  min-width: 0;
}

.testimonial__quote {
  margin: 0;
}

.testimonial__quote p {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  color: var(--text-primary);
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1rem;
}

.testimonial__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.testimonial__role {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .testimonials__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .testimonials__ticker {
    --t-gap: 1rem;
  }

  .testimonial {
    gap: 1rem;
  }

  .testimonial__photo {
    width: 64px;
    height: 64px;
  }
}

/* "Reduce motion": no movement; the cards sit in a grid instead */
@media (prefers-reduced-motion: reduce) {
  .testimonials__ticker {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .testimonials__track {
    width: auto;
  }

  .testimonials__list {
    animation: none;
    display: grid;
    flex-shrink: 1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    width: 100%;
    padding: 0;
  }

  .testimonials__list--copy {
    display: none;
  }
}