/* =========================================================
   CLIENT TESTIMONIALS
   Homepage section, right under the hero  a continuously auto-scrolling
   marquee of real WooCommerce reviews (see inc/woocommerce-testimonials.php).
   Every value below comes from assets/css/base/tokens.css  see
   BRAND-IDENTITY.md for the token reference.

   Scoping: every rule is anchored to .testimonials-section (or uses
   testimonials-/testimonial- prefixed class names) so nothing here can
   leak into other sections, same convention as hero.css.
   ========================================================= */

/* Slimmed down at the client's request to match an older, more compact
   design  see the head/card comments below for what got simpler. */
.testimonials-section {
  position: relative;
  background: var(--fm-black);
  padding: 32px 72px 40px;
  overflow: hidden;
}
.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fm-rgb-gold), 0.5), transparent);
}

/* ---------------- head ----------------
   Just the heading  no eyebrow badge and no sitewide rating-summary
   line (both removed at the client's request). */
.testimonials-head {
  text-align: center;
  margin: 0 auto 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--fm-ease), transform 0.7s var(--fm-ease);
}
.testimonials-section.is-visible .testimonials-head { opacity: 1; transform: translateY(0); }
.testimonials-title {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  font-family: var(--fm-font-serif);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.24;
  color: var(--fm-headline-light);
  text-shadow: 0 2px 28px rgba(var(--fm-rgb-black), 0.35);
  margin: 0;
}
/* Thin centered underline accent, same treatment as Featured Collections'
   own heading (assets/css/featured-collections.css). */
.testimonials-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 56px;
  height: 1px;
  background: var(--fm-gold);
  transform: translateX(-50%);
}

/* ---------------- track ----------------
   A manually swipeable/scrollable row (native touch/trackpad scroll, plus
   the arrow buttons below), not the old auto-scrolling marquee  that
   couldn't be scrolled by the visitor at all, and its edge fade mask cut
   visibly into card content on narrow screens instead of just hiding the
   seam between two looping copies. assets/js/testimonials.js drives the
   arrows; scroll-snap plus native swipe means the row still works
   perfectly with that script absent/blocked. */
.testimonials-track-wrap { position: relative; }
.testimonials-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  /* The arrow buttons + touch/trackpad swipe are the intended ways to
     move the row; a visible scrollbar under the cards would be redundant
     clutter here, same call as Trending Products' own track. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track .testimonial-card { scroll-snap-align: start; }
/* Centers the row instead of leaving it flush-left with dead space to the
   right, whenever there are few enough cards that the row doesn't need to
   scroll at all (assets/js/testimonials.js toggles this by actually
   measuring, not a fixed card count  a flex row's items sit flush-start
   by default, and 2-3 fixed-width cards rarely fill a wide desktop
   viewport on their own). */
.testimonials-track.is-centered { justify-content: center; }

/* ---------------- nav arrows ----------------
   Floating over the track's vertical center, same visual language as
   Trending Products' .trending-arrow. Hidden entirely when there's only
   one card, or (assets/js/testimonials.js toggles the `hidden` attribute)
   whenever the row doesn't actually need scrolling  nothing to scroll to
   either way. The [hidden] rule is needed because `display: flex` below
   otherwise wins the tie against the browser's own `[hidden]{display:none}`
   default (same specificity, and this stylesheet loads after the UA one). */
.testimonials-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: var(--fm-radius-circle);
  border: 1px solid rgba(var(--fm-rgb-gold), 0.35);
  background: var(--fm-black);
  color: var(--fm-cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(var(--fm-rgb-black), 0.4);
  transition: border-color var(--fm-duration-base) var(--fm-ease), background var(--fm-duration-base) var(--fm-ease), opacity var(--fm-duration-base) var(--fm-ease);
}
.testimonials-arrow[hidden] { display: none; }
.testimonials-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.testimonials-arrow:hover { border-color: var(--fm-gold); background: rgba(var(--fm-rgb-gold), 0.14); }
.testimonials-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.testimonials-prev { left: -8px; }
.testimonials-next { right: -8px; }
@media (max-width: 900px) {
  /* Off the edge of the track rather than overlapping the first/last
     card's own content on narrower screens. */
  .testimonials-prev { left: 4px; }
  .testimonials-next { right: 4px; }
  .testimonials-arrow { width: 38px; height: 38px; }
}
@media (max-width: 620px) {
  /* No room for floating arrows beside a card that's most of the screen
     width anyway  swipe is the natural way to move the row here. */
  .testimonials-arrow { display: none; }
}

/* ---------------- card ---------------- */
.testimonial-card {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  background: linear-gradient(175deg, var(--fm-grad-sidebar-1) 0%, var(--fm-black) 100%);
  border-radius: var(--fm-radius-lg);
  padding: 22px 22px 20px;
}
/* No lift-on-hover, at the client's request (it was clipping against
   .testimonials-section's own overflow:hidden, cutting the card's top
   edge off mid-animation)  the corner-draw border below is the only
   hover feedback now, same as it is on .jewel-card. */
/* Corner-draw hover border  same technique as .jewel-card in
   assets/css/product-card.css, at the client's request to match: two
   pseudo-elements, each painting two 1px line-shaped gradients pinned to
   an opposite corner. background-size (not `border`, which would leave a
   permanent corner blob since border thickness renders even at 0 width/
   height) animates 0%  100% on hover, so ::before's lines trace the top
   edge rightward and the left edge downward from the top-left corner,
   and ::after's trace the right edge upward and the bottom edge leftward
   from the bottom-right corner  meeting at the two untouched corners at
   once instead of a border just fading in. No border at rest, same as
   the product card. */
.testimonial-card::before,
.testimonial-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease;
}
.testimonial-card::before {
  background-image:
    linear-gradient(to right, var(--fm-gold), var(--fm-gold)),
    linear-gradient(to bottom, var(--fm-gold), var(--fm-gold));
  background-position: top left, top left;
  background-size: 0% 1px, 1px 0%;
}
.testimonial-card::after {
  background-image:
    linear-gradient(to left, var(--fm-gold), var(--fm-gold)),
    linear-gradient(to top, var(--fm-gold), var(--fm-gold));
  background-position: bottom right, bottom right;
  background-size: 0% 1px, 1px 0%;
}
.testimonial-card:hover::before,
.testimonial-card:hover::after {
  background-size: 100% 1px, 1px 100%;
}
/* Plain body copy (regular weight, not italic serif)  quote-mark icon,
   verified badge and context line all dropped, matching the client's
   simpler reference design (see fm_render_testimonial_card() in
   inc/woocommerce-testimonials.php). */
.testimonial-body {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-13-5);
  line-height: 1.6;
  color: var(--fm-cream-dim);
  margin-bottom: 16px;
  /* Consistent card height regardless of review length. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.testimonial-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 36px; height: 36px;
  border-radius: var(--fm-radius-circle);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--fm-grad-thumb-1) 0%, var(--fm-grad-thumb-2) 55%, var(--fm-grad-thumb-3) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-11-5);
  font-weight: 600;
  color: var(--fm-ink);
}
.testimonial-who { min-width: 0; }
.testimonial-name {
  font-family: var(--fm-font-sans);
  font-size: var(--fm-text-13);
  font-weight: 600;
  color: var(--fm-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
/* Star rating moved here, under the name next to the avatar, instead of
   above the quote  matching the client's reference layout. */
.testimonial-stars { display: flex; gap: 2px; }
.testimonial-stars svg { width: 12px; height: 12px; stroke: var(--fm-gold); fill: var(--fm-gold); }
.testimonial-stars svg.empty { fill: none; stroke-width: 1.3; stroke: rgba(var(--fm-rgb-gold), 0.4); }

@media (max-width: 900px) {
  .testimonials-section { padding: 28px 32px 36px; }
}
@media (max-width: 620px) {
  .testimonials-section { padding: 24px 20px 32px; }
  .testimonials-head { margin-bottom: 18px; }
  .testimonial-card { width: 270px; padding: 22px 20px 20px; }
  .testimonials-track { gap: 16px; }
}

/* =========================================================
   LIGHT THEME
   Scoped to .testimonials-section (see base/tokens.css's light-theme
   comment)  redefining the tokens this section actually consumes turns
   both the section band and its cards light without restating every
   rule; --fm-headline-light needs its own override here because, unlike
   in the mega-menu/drawer promo tiles, this section's headline sits on a
   flat solid background rather than a photo/gradient scrim.
   ========================================================= */
html[data-theme="light"] .testimonials-section {
  --fm-black: #F5EDE6;
  --fm-cream: #000000;
  --fm-cream-dim: #656565;
  --fm-headline-light: #000000;
  --fm-gold-pale: #C9A236;
  --fm-hairline-dark: rgba(0, 0, 0, 0.1);
  --fm-grad-sidebar-1: #ffffff;
  --fm-grad-sidebar-2: #ffffff;
}
html[data-theme="light"] .testimonial-card { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); }