/* ============================================================
   social-proof.css — SocialProofSection + TestimonialCard

   Three layouts:
   - Desktop (≥ 1360px):  3 cards side-by-side, fits in section
   - Tablet  (768–1359px): 3 cards horizontal scroll (1.5 cards visible)
   - Mobile  (< 768px):   3 cards stacked vertically

   No background fill on section — all colour/texture from
   SocialProofBackground image only.
   ============================================================ */


/* ============================================================
   SocialProofSection — outer container
   position: relative so SocialProofBackground can be absolute.
   overflow: hidden clips the horizontal scroll on tablet.
   No background fill on the section itself.

   Desktop:  padding T/B space-layout-lg (44px)    L/R space-layout-2xl (100px)
   Tablet:   padding T/B space-layout-3xl (120px)  L/R space-layout-lg (44px)
   Mobile:   no section padding — TestimonialsRow padding handles spacing
   ============================================================ */

.social-proof-section {
  position: relative;
  width: 100%;
  background-color: var(--color-surface-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Desktop: T/B padding only — no L/R.
     The row (1315px) self-centres within the 1440px section
     via align-items: center, giving ~62px natural margins each side. */
  padding-top: var(--space-layout-lg);
  padding-bottom: var(--space-layout-xl);
  box-sizing: border-box;
}

/* Tablet: increase T/B. No L/R padding — cards scroll in/out at
   the actual screen edge. overflow: hidden clips at viewport edge,
   not at a padded inner boundary (which would create invisible walls).
   align-items: flex-start so the row starts at the left screen edge. */
@media (max-width: 1359px) and (min-width: 768px) {
  .social-proof-section {
    align-items: flex-start;
    padding-top: var(--space-layout-3xl);
    padding-bottom: var(--space-layout-4xl);
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }
}

/* Mobile: no padding — TestimonialsRow padding handles spacing */
@media (max-width: 767px) {
  .social-proof-section {
    padding: 0;
  }
}


/* ============================================================
   SocialProofBackground
   Absolutely fills the section in both axes.
   object-fit: cover maintains the image appearance at all sizes.
   Two images: desktop/tablet and mobile — swap via CSS.
   ============================================================ */

.social-proof-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.social-proof-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-proof-bg__img--mobile {
  display: none;
}

@media (max-width: 767px) {
  .social-proof-bg__img--desktop-tablet {
    display: none;
  }

  .social-proof-bg__img--mobile {
    display: block;
  }
}


/* ============================================================
   TestimonialsRow
   Desktop:  flex row, padding T/B space-layout-2xl (100px), no L/R padding
   Tablet:   flex row, no T/B padding (section handles it),
             overflow-x: auto for horizontal scroll, scrollbar hidden
   Mobile:   flex column, padding T/B space-layout-2xl (44px mobile token),
             centered, gap space-layout-md (20px mobile token)
   ============================================================ */

.testimonials-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: var(--space-layout-md);
  padding-top: var(--space-layout-2xl);
  padding-bottom: var(--space-layout-2xl);
}

/* Tablet: horizontal scroll, no row T/B padding (section has it).
   width: 100% constrains the row to the full section width so
   overflow-x: auto creates a scrollable viewport at the screen edges.
   padding-left provides the initial starting offset for card 1 —
   because it's inside the scrollable container, it scrolls away
   naturally as the user swipes (no JS needed). */
@media (max-width: 1359px) and (min-width: 768px) {
  .testimonials-row {
    width: 100%;
    padding-top: var(--space-component-md);
    padding-bottom: var(--space-component-md);
    padding-left: var(--space-layout-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .testimonials-row::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile: vertical stack, centered, gap uses mobile token (20px) */
@media (max-width: 767px) {
  .testimonials-row {
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-layout-2xl);
    padding-bottom: var(--space-layout-3xl);
    overflow-x: visible;
  }
}


/* ============================================================
   TestimonialCard
   Fixed size: 425 × 292 desktop/tablet | 356 × 189 mobile.
   position: relative so TestimonialBackground can be absolute.
   overflow: visible — shadow shows outside bounds, background
   clips itself via its own border-radius.
   filter: drop-shadow() — follows the alpha channel of the card
   background image (Figma "show behind transparent areas"),
   unlike box-shadow which fills the bounding box.
   ============================================================ */

.testimonial-card {
  position: relative;
  flex: 0 0 auto;
  width: 425px;
  height: 292px;
  border-radius: var(--radius-card-2xl);    /* 64px */
  filter: drop-shadow(var(--shadow-card));
  overflow: visible;
}

@media (max-width: 767px) {
  .testimonial-card {
    width: 356px;
    height: 189px;
  }
}


/* ============================================================
   TestimonialCard — background tile image
   Absolutely fills card. border-radius + overflow: hidden clips
   the image to the card shape.
   object-fit: fill — stretches image to exactly fill container,
   no aspect-ratio preservation (as specified).
   Two tile images: desktop/tablet + mobile — swap via CSS.
   ============================================================ */

.testimonial-card__bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card-2xl);    /* 64px */
  overflow: hidden;
  z-index: 0;
}

.testimonial-card__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;                          /* stretch — no aspect ratio */
}

.testimonial-card__bg__img--mobile {
  display: none;
}

@media (max-width: 767px) {
  .testimonial-card__bg__img--desktop-tablet {
    display: none;
  }

  .testimonial-card__bg__img--mobile {
    display: block;
  }
}


/* ============================================================
   TestimonialCard — content layer
   position: relative + z-index: 1 sits above the background.
   height: 100% fills the card.
   justify-content: space-between distributes stars → quote → attribution.

   Desktop/tablet padding: space-component-xl (44px) all sides.
   Mobile padding: space-component-md (16px) T/B, space-component-xl (44px) L/R.
   ============================================================ */

.testimonial-card__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-component-xl);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .testimonial-card__content {
    padding-top: var(--space-component-md);
    padding-bottom: var(--space-component-md);
    padding-left: var(--space-component-xl);
    padding-right: var(--space-component-xl);
  }
}


/* ============================================================
   Stars
   Fixed container: 120 × 32px. Both images present, one hidden.
   ============================================================ */

.testimonial-card__stars {
  width: 120px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
}

.stars-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.stars-img[hidden] {
  display: none;
}


/* ============================================================
   Quote text
   Text style: Body/Large → Avance Pro Regular, --type-size-h5
     Desktop/tablet: 24px  |  Mobile: 20px  (token handles it)
   line-height: 1.3 for comfortable multi-line reading.
   ============================================================ */

.testimonial-card__quote p {
  font-family: var(--type-family-body);
  font-size: var(--type-size-h5);
  font-weight: var(--type-weight-regular);
  line-height: 1.3;
  color: var(--color-text-default);
  margin: 0;
}


/* ============================================================
   Attribution text
   Text style: Body/Small → Avance Pro Regular, --type-size-body (16px)
   ============================================================ */

.testimonial-card__attribution p {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  margin: 0;
}