/* ============================================================
   testimonials.css — Real client voices (verbatim quotes)
   A full-bleed, manually-driven slider. Cards spill past the
   right edge of the screen; arrows move through them. Nothing
   plays on its own — the visitor sets the pace.
   ============================================================ */

.testimonials {
  background: var(--paper);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* header row: title on the left, nav arrows on the right */
.testimonials__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.testimonials__title {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.1;
  margin-top: var(--space-3);
}
.testimonials__title em { font-style: italic; color: var(--blue); }

/* ---- Nav arrows ---- */
.slider__nav { display: flex; gap: 0.6rem; flex: none; }
.slider__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.slider__btn:hover:not([aria-disabled="true"]) { border-color: var(--ink); background: rgba(50,47,42,0.03); }
.slider__btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }

/* ---- Full-bleed track ---- */
.slider { width: 100%; }
.slider__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* first card lines up with the container; last cards spill off-screen */
  padding-inline: calc(clamp(1.25rem, 5vw, 3rem) + max(0px, (100% - var(--container)) / 2));
  scroll-padding-inline: calc(clamp(1.25rem, 5vw, 3rem) + max(0px, (100% - var(--container)) / 2));
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

.quote {
  flex: 0 0 clamp(280px, 30vw, 380px);
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.75rem, 2.4vw, 2.4rem);
  background: var(--paper-2);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  text-align: left;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.5;
  color: var(--gold);
  height: 1.1rem;
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink);
}
.quote__author {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .testimonials__head-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .quote { flex-basis: min(82vw, 320px); }
}