/* =========================
   Testimonial
========================= */

.testimonial {
  --testimonial-border: #2b2b2b;
  --testimonial-text: #b8b8b8;

  width: 100%;
  min-width: 0;
  padding: 84px 0;

  position: relative;
  isolation: isolate;

  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--testimonial-text);
}

/* =========================
   Dividers
   Same method as Client Trust
========================= */

.testimonial::before,
.testimonial::after {
  content: "";

  position: absolute;
  left: 0;
  transform: none;

  width: 100%;
  height: 0;

  background: none;
  box-shadow: none;
  clip-path: none;

  border: 0;
  border-top: 1px solid var(--testimonial-border);

  border-image-source: linear-gradient(
    to right,
    var(--testimonial-border),
    var(--testimonial-border)
  );
  border-image-slice: 1;
  border-image-width: 1 0 0;
  border-image-outset: 0 100vmax;
  border-image-repeat: stretch;

  pointer-events: none;
}

.testimonial::before {
  top: 0;
}

.testimonial::after {
  bottom: 0;
}

/* Fade only above 1920 CSS pixels */

@media (width > 1920px) {
  .testimonial::before,
  .testimonial::after {
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;

    border-image-source: linear-gradient(
      to right,
      transparent 0%,
      var(--testimonial-border) 15%,
      var(--testimonial-border) 85%,
      transparent 100%
    );
    border-image-outset: 0;
  }
}

/* =========================
   Content
   Side spacing comes from
   the existing page-container
========================= */

.testimonial .testimonial__content {
  width: 100%;
  min-width: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Quote */

.testimonial .testimonial__quote {
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin: 0;

  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;

  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.testimonial .testimonial__quote p {
  margin: 0;
}

/* Client */

.testimonial .testimonial__client {
  max-width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonial .testimonial__photo {
  display: block;
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.testimonial .testimonial__details {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;

  text-align: left;
}

.testimonial .testimonial__name {
  margin: 0;

  font-size: 18px;
  font-weight: 600;
  line-height: 1.12;

  overflow-wrap: anywhere;
}

.testimonial .testimonial__role {
  margin: 0;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;

  overflow-wrap: anywhere;
}

/* =========================
   Mobile / Tablet
   Existing site breakpoint
========================= */

@media (max-width: 768px) {
  .testimonial {
    padding: 48px 0;
  }

  .testimonial .testimonial__quote {
    font-size: 22px;
  }

  .testimonial .testimonial__role {
    font-size: 12px;
  }
}