/* 07 · Customer Love — spec §4 "07". Carousel mechanics mirror Signature
   Collection's (same wide-wrapper arrow positioning, same scroll-arrows.js
   helper) — see that file's comments for why the arrow math is shaped the
   way it is. */
@layer components {
  .testimonials {
    background-color: var(--ink-900);
    padding-block: var(--section-pad);
  }

  .testimonials__head {
    margin-bottom: 12px; /* spec: the carousel sits 12px below the flourish */
  }

  .testimonials__carousel {
    position: relative;
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .testimonials__track {
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    /* Fewer than three featured reviews: centre them. No effect at 3+ (they fill or overflow). */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .testimonial {
    flex: 0 0 calc(100% / 3); /* 3 equal columns at desktop */
    scroll-snap-align: start;
    margin: 0;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* spec: centred — the mockup left-aligns the first, which is wrong */
  }

  .testimonial:not(:first-child) {
    border-left: 1px solid var(--gold-hairline);
  }

  .testimonial__stars {
    display: flex;
    gap: 4px; /* spec §2 Icons: "Stars are solid gold-400, 12px, 4px apart" */
    color: var(--gold-400);

    /* Unearned stars of a featured review (< 5): outlined, so the scale is visible. */
    & .is-off {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5px;
    }
  }

  /* Fewer reviews than fit (scroll-arrows.js fitCarousel): shrink to them so the arrows sit beside them. */
  .testimonials__carousel.is-fit {
    max-width: calc(var(--fit-w) + 2 * var(--space-8));
    padding-inline: var(--space-8);

    & .testimonials__track {
      max-width: none;
    }

    & .testimonial {
      flex-basis: var(--item-w);
    }
  }

  .testimonial__quote {
    margin: 12px 0 0;
    max-width: 300px;
  }

  .testimonial__name {
    margin: 10px 0 0;
  }

  .testimonials__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
  }

  .testimonials__arrow--prev {
    left: 0;
  }

  .testimonials__arrow--next {
    right: 0;
  }

  /* Tablet: 2 visible (forces the 3rd to overflow, so the arrows reappear
     via scroll-arrows.js's own "hide when everything fits" check — no
     separate visibility rule needed here). */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .testimonial {
      flex: 0 0 50%;
    }
  }

  /* Mobile: 1 visible, arrows move below the track, centred as a pair —
     unlike Signature Collection, spec wants these VISIBLE here, just
     repositioned, so there's no display:none override. */
  @media (max-width: 767.98px) {
    .testimonial {
      flex: 0 0 100%;
    }

    .testimonials__nav {
      display: flex;
      justify-content: center;
      gap: var(--space-4);
      margin-top: var(--space-5);
    }

    .testimonials__arrow {
      position: static;
      translate: none;
    }
  }
}