/*
  Testimonial — Website Refresh 2026 1e (Figma), "Testimonials"
  frame (Testimonial Logo, Testimonial: Text Only / Text + Image /
  Text + Case Study).
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-38923

  Requires tokens.css, icons.css, buttons.css, flash.css, and
  case-study-cover.css to be loaded first.

  Three variants share one card shell + quote/detail structure:
  Text Only has no media; Text + Image adds a plain rounded photo
  (styled locally below); Text + Case Study reuses the shared
  .rs-case-study-cover primitive (see case-study-cover.css) — the
  same drop-shadowed cover + overlapping "Get the case study" badge
  pattern the standalone Case Study component also uses, factored out
  rather than duplicated here.

  Testimonial Logo: right-aligned, each logo capped at max-height
  45px with natural width — this is why Figma's two example logos
  render at different sizes (35px vs 45px tall) rather than a fixed
  box.
*/

.rs-testimonial-logo {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  align-items: flex-end;
  justify-content: flex-end;
}
.rs-testimonial-logo img {
  display: block;
  width: auto;
  max-height: 45px;
}

.rs-testimonial {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-48);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

.rs-testimonial__media {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 230px;
}
.rs-testimonial__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-4);
}

.rs-testimonial__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
  align-self: stretch;
}

.rs-testimonial__quote {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  gap: var(--space-8);
  padding-bottom: var(--space-32);
}
.rs-testimonial--with-photo .rs-testimonial__quote,
.rs-testimonial--with-case-study .rs-testimonial__quote {
  padding-bottom: var(--space-16);
}

.rs-testimonial__quote-icon {
  width: 48px;
  height: 48px;
  color: var(--color-transparency-dark-90);
}

.rs-testimonial__quote-text {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-transparency-dark-90);
}

.rs-testimonial__detail {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
  width: 100%;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-transparency-dark-90);
}

.rs-testimonial__source {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-width: 0;
}

.rs-testimonial__name {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-transparency-dark-90);
}

.rs-testimonial__role {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-transparency-dark-90);
}

@media (max-width: 768px) {
  .rs-testimonial--with-photo,
  .rs-testimonial--with-case-study {
    flex-direction: column;
  }
  .rs-testimonial--with-photo .rs-testimonial__media,
  .rs-testimonial--with-case-study .rs-case-study-cover {
    width: 100%;
  }

  .rs-testimonial {
    padding: var(--space-24);
  }

  .rs-testimonial__quote-text {
    font-size: 20px;
  }

  .rs-testimonial__quote {
    padding-bottom: var(--space-20);
  }

  /* Source (name/role) and logo sit side by side on desktop, sharing
     the row 50/50 (flex: 1 1 0% each) — stacked on mobile, each
     needs to actually claim the full row width rather than still
     trying to share it top-to-bottom. */
  .rs-testimonial__detail {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }
  .rs-testimonial__source,
  .rs-testimonial-logo {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Logo itself is left unchanged (still capped at max-height: 45px,
     natural width) — only its alignment flips from right (sat next
     to the source on desktop) to left, now that it's stacked below
     it as its own full-width row. */
  .rs-testimonial-logo {
    justify-content: flex-start;
  }
}