// =============================================================================
// TESTIMONIALS — Task #22 (v2 update)
// Section header + 3-card slider: 2 white review cards + 1 image CTA card.
// Prev/next 40px circle nav. Mobile: 304px cards, no image CTA card.
// Mobile-first: base = 375px, desktop via a scoped 992px media query (not the
// shared respond-to('desktop')/1440px token) — this component's own markup
// already switches at Bootstrap's lg=992px (d-none d-lg-flex on the image CTA
// card), so its spacing/sizing now switches at the same point instead of
// leaving a 992–1439px dead zone where the image card appears next to
// still-mobile-styled review cards. This was the one component already doing
// what --section-space (tokens.scss) now does everywhere else — its own
// vertical padding below reuses that token instead of duplicating the fix.
// Measurements: design/measurements-v2.json → "testimonial"
//   Web:    bg pampas; cards 480px wide × 544px row; nav 40px circles
//           image CTA card: dark gradient overlay rgba(30,35,32,0)→(0.35)
//   Mobile: bg pampas; cards 304px; slider bleeds right; no image CTA card
// =============================================================================

@import '../mixins';

.testimonials {
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss)
  // — that token already steps at this same 992px point.
  padding-block: var(--section-space);   // (horizontal inset via .container; bg via .bg-pampas on <section>)
  // No overflow:hidden/clip here — this element's own box is exactly .container's
  // width, the same boundary the slider is escaping via slider-breakout, so it can
  // never be the right place to clip that bleed. html/body's overflow-x:hidden
  // (_base.scss) is the actual safety net that prevents horizontal scroll.
}

// ─── Heading ─────────────────────────────────────────────────────────────────
.testimonials__heading {
  display: flex;
  flex-direction: column;
  gap: 14.955px;                          // mobile: ~15px eyebrow → heading
  padding-bottom: 16px;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    gap: 16px;
    max-width: 67.5rem;
    // Figma 18580:8625 — title→slider gap is 48px total (margin-bottom alone).
    // Was stacking padding-bottom:33px UNDER margin-bottom:48px (~81px combined).
    margin-bottom: var(--space-12);       // 48px
  }
}

// ─── Slider ──────────────────────────────────────────────────────────────────
// Container-aligned heading/controls, full-bleed-right track — shared technique,
// see @mixin slider-breakout (_mixins.scss). Figma 18580:8354: card row bleeds
// to the viewport edge while the heading/controls stay container-aligned.
.testimonials-slider {
  cursor: grab;
  user-select: none;

  @include slider-breakout;

  &:active { cursor: grabbing; }
}

.testimonials-slider__track {
  align-items: stretch;
}

.testimonials-slider .swiper-slide {
  height: auto;
}

// ─── Shared card base ─────────────────────────────────────────────────────────
.testimonial-card {
  // Fluid width instead of a hard 304px→480px jump at 992px: the two values
  // are still the mobile (375px frame) and desktop (992px+) reference sizes,
  // but interpolated continuously by viewport width in between via clamp()
  // so the cards scale with the available space on every screen size instead
  // of looking mismatched right up until the breakpoint snaps. Linear fit
  // through (375px viewport → 304px card) and (992px viewport → 480px card):
  // slope (480-304)/(992-375) ≈ 28.53vw, intercept 304 - 28.53% of 375 ≈ 197px.
  width: clamp(304px, calc(197px + 28.53vw), 480px);
  flex-shrink: 0;
  border-radius: var(--radius-xs);        // 4px
  overflow: hidden;
}

// ─── Text review card ─────────────────────────────────────────────────────────
.testimonial-card--text {
  background-color: var(--color-white);
  padding: 24px 16px;                     // mobile: padding-24 padding-16
  display: flex;
  flex-direction: column;
  gap: 8px;                               // mobile: gap-8
  min-height: 320px;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    padding: 3rem 2rem;                   // desktop: py-48 px-32
    gap: 2rem;                            // gap-32
    min-height: 438px;
  }
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-card__author {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-nandor);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.testimonial-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);        // 24px mobile
  font-weight: 500;
  line-height: var(--lh-display-xs);
  color: var(--color-text-primary);
  margin: 0;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    font-size: var(--fs-display-sm);      // 30px desktop
    line-height: var(--lh-display-sm);
    margin-top: -0.5rem;                  // net 24px from author
  }
}

.testimonial-card__stars {
  font-family: var(--font-ui);            // Poppins (Figma star glyph font)
  font-size: 1rem;                        // 16px both breakpoints
  line-height: 1.5rem;                    // 24px
  // Figma: gradient text #b2974a → rgba(0,0,0,0.2)
  background: linear-gradient(90deg, #b2974a 0%, rgba(0, 0, 0, 0.2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    margin-top: -1rem;                    // net 16px from title
  }
}

.testimonial-card__body {
  font-family: var(--font-body);
  font-size: var(--fs-xs);               // 12px mobile
  font-weight: 400;
  line-height: var(--lh-xs);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
  max-width: 272px;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    font-size: var(--fs-lg);             // 18px desktop
    line-height: var(--lh-lg);
    max-width: none;
  }
}

.testimonial-card__posted {
  font-family: var(--font-body);
  font-size: var(--fs-xs);               // 12px medium
  font-weight: 500;
  line-height: var(--lh-xs);             // 18px
  color: var(--color-text-muted);        // #717680
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                              // "Posted on" → logo gap-8
  margin: 0;

  @media (min-width: 62rem) { // 992px — matches this component's own Bootstrap lg breakpoint (d-lg-flex image CTA card)
    margin-top: -1rem;                    // net 16px from body
  }
}

.testimonial-card__ta-logo {
  display: block;
  height: 20px;                          // Figma lockup: ~122×20
  width: auto;
}

.testimonial-card__more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-gold-dark);
  text-decoration: underline;
  cursor: pointer;

  &:hover { color: var(--color-gold); }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}

// ─── Image CTA card ────────────────────────────────────────────────────────
// The (frozen) markup still carries Bootstrap's d-none d-lg-flex, which used
// to hide this card below the lg breakpoint (a previous, Figma-confirmed
// "no image CTA card on mobile" design) — now shown at every breakpoint per
// updated requirements, so the card always displays as a 3rd slide alongside
// the two text reviews. !important alone isn't enough to beat Bootstrap's own
// .d-none (also !important, unconditional at mobile widths): both are
// single-class selectors, so on a tie the LATER one in source order wins —
// and main.scss imports Bootstrap after this component. The compound
// `.testimonial-card.testimonial-card--image` selector (both classes already
// on the same element) has higher specificity than .d-none regardless of
// import order, avoiding the tie entirely.
.testimonial-card.testimonial-card--image {
  display: flex !important;
  position: relative;
  min-height: 464px;
  flex-direction: column;
  justify-content: flex-end;
}

.testimonial-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.testimonial-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 35, 32, 0) 0%,
    rgba(30, 35, 32, 0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.testimonial-card__img-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 15px;                             // Figma: 14.915px icon → text
}

.testimonial-card__ta-icon {
  width: 56px;
  height: 56px;
  display: block;
}

.testimonial-card__img-text,
.testimonial-card__img-link {
  font-family: var(--font-display);
  font-size: 24px;                       // PF Monumenta Pro 24px approximated as Playfair
  font-weight: 400;
  line-height: 39.84px;
  letter-spacing: 0.48px;
  text-transform: uppercase;             // PF Monumenta renders as caps in Figma
  color: var(--color-white);
  margin: 0;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

// ─── Nav ─────────────────────────────────────────────────────────────────────
.testimonials__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-left: auto;
  margin-top: 1rem; // 16px on mobile (Figma 18580:6390: gap-16 between slider and nav)

  @media (min-width: 62rem) { // 992px — matches this component's own desktop breakpoint
    // Figma 18580:6318 (desktop): slider→nav gap is 20px (var(--spacing-2xl)),
    // not 40px — var(--space-10) was the wrong token here.
    margin-top: var(--space-5); // 20px
  }
}

.testimonials-nav-btn {
  @include slider-nav-btn;
  width: 40px;
  height: 40px;
  background-color: var(--color-satin-linen);
  border-radius: var(--radius-pill);
  color: var(--color-mantle);

  img {
    width: 24px;
    height: 24px;
    display: block;
  }
}

.testimonials-nav-btn--prev {
  opacity: 0.35;
}

.testimonials-nav-btn--next {
  opacity: 1;
}