/* ==========================================================================
   Testimonials section (homepage only)

   Everything here is nested under .testimonials-section, and every color/
   font/spacing value reuses the real design tokens already defined in
   css/mastering-portfolio-57aafd468cc55de4a60.webflow.css (--color--*,
   --font-family--*, --radius--*, --space--*). Nothing in this file touches
   a selector outside that namespace, so it can't affect any other section.
   ========================================================================== */

.testimonials-section .testimonials-viewport {
  overflow: hidden;
}

/* Static mode (all testimonials fit at the current tier): full-width equal
   columns via Grid, column count set by js/testimonials.js as
   --visible-count (capped at 4 >=1280px, 3 by default, 2 at tablet
   <=991px, 1 at phone <=767px, and never higher than the number of
   testimonials actually on screen). The 3 below is just a pre-JS fallback. */
.testimonials-section .testimonials-track {
  display: grid;
  grid-template-columns: repeat(var(--visible-count, 3), 1fr);
  align-items: flex-start;
  gap: var(--space--2);
}

/* Carousel mode (more testimonials than fit at the current tier): a single
   non-wrapping row, tripled in the DOM by the JS so there's always a real
   card to slide into, clipped by .testimonials-viewport and slid via
   transform. is-snapping suppresses the transition for the instant,
   invisible jump back to the equivalent position when the loop wraps. */
.testimonials-section .testimonials-track.is-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  transition: transform .3s ease;
}

.testimonials-section .testimonials-track.is-carousel.is-snapping {
  transition: none;
}

.testimonials-section .testimonial-card {
  display: flex;
  flex-direction: column;
  border: var(--border-width--main) solid var(--color--brand--primary);
  border-radius: var(--radius--main);
  padding: var(--space--2) var(--space--1-5);
  /* Set by js/testimonials.js to the tallest *collapsed* card, so a row
     reads as even height without forcing an expanded card's neighbors to
     stretch down to match it (align-items: flex-start on the track already
     keeps cards from stretching upward; this only pads shorter ones up). */
  min-height: var(--card-min-height, 0);
}

/* Carousel card width per tier — same breakpoints as --visible-count above,
   so exactly as many cards fit on screen as the static grid would show. */
.testimonials-section .testimonials-track.is-carousel .testimonial-card {
  flex: 0 0 calc((100% - 2 * var(--space--2)) / 3);
}

@media (min-width: 1280px) {
  .testimonials-section .testimonials-track.is-carousel .testimonial-card {
    flex: 0 0 calc((100% - 3 * var(--space--2)) / 4);
  }
}

@media screen and (max-width: 991px) {
  .testimonials-section .testimonials-track.is-carousel .testimonial-card {
    flex: 0 0 calc((100% - var(--space--2)) / 2);
  }
}

.testimonials-section .testimonial-quote {
  font-family: var(--font-family--primary-family);
  font-size: 1.13rem;
  line-height: var(--line-height--1-5);
  color: var(--color--brand--primary);
  margin: 0 0 var(--space--0-75);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* --quote-collapsed-height is the real, measured 5-line-clamped height
     (set by JS once the cards are painted) — a concrete pixel value is
     what makes the height below actually transition instead of snapping.
     The calc() is just the pre-JS fallback. */
  max-height: var(--quote-collapsed-height, calc(var(--line-height--1-5) * 5));
  transition: max-height .3s ease;
}

/* Lets the full text lay out (so the growing/shrinking box has something
   real to reveal or hide) without waiting on -webkit-line-clamp, which
   can't itself transition — it only ever jumps. Applied for the whole
   expand animation, but only removed *after* the collapse animation
   finishes (see js/testimonials.js), so the line-clamp ellipsis doesn't
   snap back on before the box has actually finished shrinking to meet it. */
.testimonials-section .testimonial-quote.is-unclamped {
  -webkit-line-clamp: unset;
}

.testimonials-section .testimonial-quote.is-expanded {
  max-height: var(--quote-full-height, none);
}

.testimonials-section .quote-toggle {
  display: flex;
  align-items: center;
  gap: var(--space--0-25);
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 var(--space--1-5);
  font-family: var(--font-family--primary-family);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color--brand--primary);
  text-decoration: none;
  cursor: pointer;
}

.testimonials-section .quote-toggle:hover {
  opacity: .7;
}

.testimonials-section .quote-toggle[hidden] {
  display: none;
}

.testimonials-section .quote-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform .3s ease;
}

.testimonials-section .quote-toggle[aria-expanded="true"] svg {
  transform: rotate(-90deg);
}

.testimonials-section .testimonial-name {
  font-family: var(--font-family--primary-family);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color--brand--primary);
  /* auto top margin pushes name + the role pill after it down to the
     bottom of the card. Needed again now that --card-min-height (see
     .testimonial-card) can make a collapsed card taller than its own
     content — without this, that extra space just sits below the pill
     instead of being used. Resolves to 0 on an expanded card, since
     there's no leftover space left to push into at that point. */
  margin: auto 0 var(--space--0-75);
}

.testimonials-section .testimonial-role {
  align-self: flex-start;
  display: inline-block;
  background-color: var(--color--brand--brand-2);
  color: var(--color--brand--primary);
  font-family: var(--font-family--primary-family);
  font-size: .8rem;
  padding: .4rem 1rem;
  border-radius: var(--radius--round);
}

.testimonials-section .testimonials-nav {
  display: flex;
  justify-content: center;
  gap: var(--space--1);
  margin-top: var(--space--2);
}

.testimonials-section .testimonials-nav[hidden] {
  display: none;
}

/* Flush right from tablet-landscape up, centered below that — independent
   of whichever card-count tier is active at that width. */
@media screen and (min-width: 768px) {
  .testimonials-section .testimonials-nav {
    justify-content: flex-end;
  }
}

.testimonials-section .nav-arrow {
  width: var(--space--3);
  height: var(--space--3);
  border-radius: var(--radius--round);
  border: var(--border-width--main) solid var(--color--brand--primary);
  background-color: #0000;
  color: var(--color--brand--primary);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .3s;
}

.testimonials-section .nav-arrow svg {
  width: 18px;
  height: 18px;
}

.testimonials-section .nav-arrow.is-prev svg {
  transform: scaleX(-1);
}

.testimonials-section .nav-arrow:hover {
  opacity: .6;
}

.testimonials-section .nav-arrow:focus-visible {
  outline: 2px solid var(--color--brand--primary);
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .testimonials-section .testimonials-track.is-carousel .testimonial-card {
    flex: 0 0 100%;
  }

  /* Matches the FAQ page's mobile type: .item_title (the question) drops
     to 1rem/600 on mobile, and .text-size (the answer copy) stays 1rem/400
     at every breakpoint — same two values used here. */
  .testimonials-section .testimonial-quote {
    font-size: 1rem;
  }

  .testimonials-section .testimonial-name {
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-section .testimonials-track.is-carousel {
    transition: none;
  }

  .testimonials-section .testimonial-quote {
    transition: none;
  }

  .testimonials-section .quote-toggle svg {
    transition: none;
  }
}