/* Mixed written and portrait-video testimonial carousel */
.testimonials-slider-section {
  --testimonial-card-bg: #f3f0e9;
  --testimonial-card-ink: #26332e;
  --testimonial-muted: #66736c;
}

.testimonial-slider-viewport:focus-visible {
  outline: 2px solid #edf0ed;
  outline-offset: 8px;
  border-radius: 12px;
}

.clean-testimonial-card {
  min-height: 340px;
  align-items: stretch;
  overflow: hidden;
}

.clean-testimonial-card[data-testimonial-type="written"] {
  align-items: center;
}

.testimonial-video-card {
  grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
  padding: 0;
}

.testimonial-video-frame {
  position: relative;
  min-height: 340px;
  aspect-ratio: 9 / 16;
  max-height: 520px;
  justify-self: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .18), transparent 32%),
    linear-gradient(160deg, #9eaaa3, #536159 72%);
}

.testimonial-video-frame video,
.testimonial-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #18211d;
}

.testimonial-video-frame video {
  object-fit: cover;
}

.testimonial-video-frame video:focus-visible,
.testimonial-video-frame iframe:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}

.testimonial-video-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 32px 22px;
  color: #f4f5f3;
  text-align: center;
}

.testimonial-video-placeholder-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  font-size: 1.2rem;
}

.testimonial-video-placeholder strong,
.testimonial-video-placeholder span {
  display: block;
}

.testimonial-video-placeholder strong {
  font: 600 .95rem/1.35 "Montserrat", sans-serif;
}

.testimonial-video-placeholder span {
  color: rgba(255, 255, 255, .74);
  font-size: .82rem;
}

.testimonial-video-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 34px 34px 10px;
}

.testimonial-format-label {
  margin: 0 0 16px;
  color: var(--testimonial-muted);
  font: 600 .7rem/1.3 "Montserrat", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.testimonial-video-content .testimonial-copy {
  margin-bottom: 24px;
}

.testimonial-video-content .testimonial-person {
  grid-auto-flow: column;
  justify-content: start;
  justify-items: start;
  align-items: center;
}

.testimonial-video-content .testimonial-person img {
  width: 52px;
  height: 52px;
}

.testimonial-video-content .testimonial-name {
  text-align: left;
}

.testimonial-slider-btn {
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.testimonial-slider-btn:hover {
  transform: translateY(-1px);
}

.testimonial-slider-btn:focus-visible,
.testimonial-dot:focus-visible {
  outline: 2px solid #edf0ed;
  outline-offset: 4px;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
}

.testimonial-slide[aria-hidden="true"] {
  visibility: hidden;
}

@media (max-width: 900px) {
  .clean-testimonial-card {
    min-height: 0;
  }

  .testimonial-video-card {
    grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  }

  .testimonial-video-frame,
  .testimonial-video-placeholder {
    min-height: 320px;
  }
}

@media (max-width: 700px) {
  .testimonial-slider-controls {
    display: flex;
  }

  .testimonials-slider-head {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .testimonial-slider-btn {
    width: 40px;
    height: 40px;
  }

  .testimonial-video-card {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .testimonial-video-frame {
    width: min(72vw, 270px);
    min-height: 0;
    max-height: none;
    margin: 24px auto 0;
    border-radius: 18px;
  }

  .testimonial-video-placeholder {
    min-height: 0;
    aspect-ratio: 9 / 16;
  }

  .testimonial-video-content {
    padding: 26px 24px 28px;
  }

  .testimonial-video-content .testimonial-person {
    grid-auto-flow: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slider-track,
  .testimonial-slider-btn {
    transition: none;
  }
}

/* Let each active testimonial determine the carousel height. */
.testimonial-slider-viewport {
  transition: height .3s ease;
}

.testimonial-slider-track {
  align-items: flex-start;
  transition: transform .35s ease, height .3s ease;
}

.clean-testimonial-card {
  min-height: 0;
  align-self: flex-start;
}

.clean-testimonial-card[data-testimonial-type="written"] {
  height: auto;
  align-items: center;
}

/* Portrait video testimonials use a centered, single-column composition. */
.testimonial-video-card {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding: 30px;
}

.testimonial-video-frame {
  width: min(100%, 280px);
  min-height: 0;
  max-height: none;
  justify-self: center;
  border-radius: 20px;
}

.testimonial-video-content {
  width: min(100%, 680px);
  align-items: center;
  padding: 26px 0 4px;
  text-align: center;
}

.testimonial-video-content .testimonial-copy {
  margin-bottom: 20px;
}

.testimonial-video-content .testimonial-person {
  justify-content: center;
  justify-items: center;
}

.testimonial-video-content .testimonial-name {
  text-align: center;
}

@media (max-width: 700px) {
  .testimonial-video-card {
    padding: 22px;
  }

  .testimonial-video-frame {
    width: min(72vw, 260px);
    margin: 0 auto;
  }

  .testimonial-video-content {
    padding: 24px 0 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slider-viewport,
  .testimonial-slider-track {
    transition: none;
  }
}

/* Keep portrait video testimonials compact instead of spanning the viewport. */
.testimonial-video-card {
  flex: 0 0 min(340px, calc(100% - 32px));
  width: min(340px, calc(100% - 32px));
  padding: 26px;
  margin-inline: 0;
}

.testimonial-video-card .testimonial-video-frame {
  width: min(100%, 280px);
}

.testimonial-video-card .testimonial-video-content {
  width: 100%;
  padding-top: 22px;
}

@media (max-width: 700px) {
  .testimonial-video-card {
    flex-basis: min(320px, calc(100% - 24px));
    width: min(320px, calc(100% - 24px));
    padding: 20px;
  }

  .testimonial-video-card .testimonial-video-frame {
    width: min(100%, 260px);
  }
}