/* =============================================================================
   10-testimonials.css — Testimonials section (#testimonials): quote cards
   Flat top edge so the panel sits flush under Our work (no second curve).
   ============================================================================= */

/* ---------- Default — section shell ---------- */

.testimonials {
  background-color: var(--color-panel);
}

/* Inner panel — no top radius; continues the work section surface */
.testimonials__bg {
  background-color: var(--color-panel);
  border-radius: 0;
}

/* Less top padding — sits under the work “See more work” link */
.testimonials__bg.section {
  padding-top: 1.25rem;
}

/* ---------- Default — quote cards ---------- */

.testimonials__viewport {
  --testimonials-visible: 1;
  container-type: inline-size;
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  width: max-content;
  animation: testimonials-marquee 48s linear infinite;
}

.testimonials__set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--grid-gap);
  padding-right: var(--grid-gap);
}

/* One client quote — bordered box; width matches 1 / 2 / 3-up layout */
.testimonials__card {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 0
    calc(
      (100cqw - (var(--testimonials-visible) - 1) * var(--grid-gap)) /
        var(--testimonials-visible)
    );
  min-height: var(--testimonials-card-height, 10.5rem);
}

/* Quote body — serif heading style */
.testimonials__quote {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--color-text);
}

/* Opening curly quote — light green */
.testimonials__quote::before {
  content: '\201C';
  color: var(--color-primary-light);
}

/* Name and suburb — pinned to the bottom of the card */
.testimonials__author {
  margin-top: auto;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

/* ---------- Default — Google reviews (same pill as See more work) ---------- */

.testimonials__more {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.testimonials__more-btn {
  background-color: var(--color-cta-bg);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* ---------- States — hover ---------- */

.testimonials__more-btn:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--color-primary);
}

.testimonials__more-btn:hover i {
  transform: none;
}

.testimonials__viewport:hover .testimonials__track {
  animation-play-state: paused;
}

@keyframes testimonials-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Responsive — 576px up ---------- */

@media (min-width: 576px) {
  .testimonials__viewport {
    --testimonials-visible: 2;
  }
}

/* ---------- Responsive — 1024px up ---------- */

@media (min-width: 1024px) {
  .testimonials__bg.section {
    padding-top: 1.5rem;
  }

  .testimonials__viewport {
    --testimonials-visible: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track {
    animation: none;
  }
}