/* Testimonials wall — redesigned 2026-08-23 from the admin's reference
   screenshot (Replit): one featured quote in display type over a saturated
   warm field, then a 3-up wall of shorter quotes, each signed with an avatar
   disc, a name, and a small uppercase role line.

   Everything here is scoped to #testimonials and this file loads AFTER
   leap-theme.css / leap-foundation.css, so no other section moves and the
   shared .testimonial-card / .grid-3col / .media-overlay rules keep working
   for the mobile marquee, the six-line clamp and the "Read more" control. */

/* The reference field is a bright orange. Brand orange (#E07A38) only reaches
   ~3:1 against white body text, so this wash deepens toward the middle where
   the cards actually sit — white on #8f380a is 7.6:1, and still 4.6:1 seen
   through a card. The warm bands top and bottom keep the reference's glow. */
#testimonials .media-overlay {
  background-image: linear-gradient(
    180deg,
    #e3792b 0%,
    #b8500f 20%,
    #98390a 50%,
    #b8500f 80%,
    #e3792b 100%
  );
  /* Not fully opaque: the section's decor photo and its motion video still
     read as texture underneath. Any lower and the decor's lettering starts
     surfacing as half-words behind the cards. */
  opacity: 0.96;
}

/* Heading row is unchanged in structure (section parity) — only recoloured
   for the dark field it now sits on. */
#testimonials .section-heading {
  color: #fff;
}
#testimonials .section-tag,
#testimonials .section-tag.shine,
#testimonials .section-tag.is-count {
  opacity: 1;
  color: #fff;
  border-color: #ffffff59;
}

.testimonial-wall {
  flex-flow: column;
  gap: 1rem;
  display: flex;
}

/* The shared card is 40% white — far too light to hold white text over
   orange. 14% keeps the reference's "slightly lifted pane" read at 4.6:1. */
#testimonials .testimonial-card {
  color: #fff;
  background-color: #ffffff24;
  border-color: #ffffff2e;
}

#testimonials .testimonial-card--featured {
  --leap-card-gap: 2rem;
  text-align: center;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 0.75rem;
}
/* Display type, so four clamped lines is already a tall card; anything longer
   still opens with the same "Read more" control the small cards use. */
#testimonials .testimonial-card--featured > div:first-child {
  -webkit-line-clamp: 3;
  max-width: 42ch;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
#testimonials .testimonial-card--featured .testimonial__more {
  align-self: center;
}

#testimonials .testimonial-person {
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  display: flex;
}
#testimonials .testimonial-person__meta {
  flex-flow: column;
  gap: 0.15rem;
  min-width: 0;
  text-align: left;
  display: flex;
}
#testimonials .testimonial-person__meta strong {
  font-weight: 600;
  line-height: 1.2;
}
/* Sized so the longest role ("Roof replacement · 5-unit walk-up") still fits
   one line beside the avatar and the star row — a wrapped role pushes its
   name up out of line with the cards either side of it. */
#testimonials .testimonial-person__role {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.72;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.3;
}
/* No customer photographs exist for these reviewers and inventing faces for
   real, named people is not on — initials on a disc carry the reference's
   avatar rhythm honestly. */
#testimonials .testimonial-avatar {
  background-color: #ffffff2e;
  border: 1px solid #ffffff3d;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: grid;
}
/* Gold-on-orange disappears; a warm cream keeps the five stars legible. The
   shared row draws its paths at 60% fill, which washes out completely on this
   field — solid fill, and the shimmer keyframes still breathe the opacity. */
#testimonials .testimonial-stars {
  color: #ffd9a8;
  width: 5rem;
  margin-left: auto;
}
#testimonials .testimonial-stars path {
  fill-opacity: 1;
}
/* The featured signature is a centred, shrink-to-fit row, so the auto margin
   above resolves to nothing and the stars stay beside the name. */
#testimonials .testimonial-card--featured .testimonial-stars {
  margin-left: 0;
}

/* The wall drops to two columns here, so the signature row has roughly half
   the width it had — give the name and role back what the stars can spare. */
@media screen and (max-width: 991px) {
  #testimonials .testimonial-stars {
    width: 4.25rem;
  }
  #testimonials .testimonial-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.72rem;
  }
}

@media screen and (max-width: 767px) {
  #testimonials .testimonial-card--featured {
    --leap-card-gap: 1.25rem;
    padding: 1.75rem 1.5rem;
  }
  #testimonials .testimonial-card--featured > div:first-child {
    -webkit-line-clamp: 6;
    max-width: none;
    font-size: 1.4rem;
  }
  #testimonials .testimonial-person {
    font-size: 0.9rem;
  }
  #testimonials .testimonial-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.72rem;
  }
  #testimonials .testimonial-stars {
    width: 4.25rem;
  }
}