/* See ./testimonials.md for design notes and rationale. */
.testimonials__root {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-10);
  padding-block: var(--ll-space-9);
}

@media (width >= 768px) {
  .testimonials__root {
    padding-block: var(--ll-space-15);
  }
}

@media (width >= 1024px) {
  .testimonials__root {
    gap: var(--ll-space-12);
  }
}

/* --- Intro --------------------------------------------------------- */
.testimonials__intro {
  text-align: left;
}

@media (width >= 1024px) {
  .testimonials__intro {
    text-align: center;
    margin-inline: auto;
  }
}

.testimonials__heading {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h4-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h4-letter-spacing);
  font-weight: var(--ll-text-h4-weight);
}

.testimonials__description {
  margin: var(--ll-space-4) 0 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
}

@media (width >= 768px) {
  .testimonials__description {
    margin-top: var(--ll-space-6);
  }

  .testimonials__heading {
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h2-size);
    letter-spacing: var(--ll-text-h3-letter-spacing);
  }
}

@media (width >= 1024px) {
  .testimonials__description {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
    font-weight: var(--ll-text-body-lg-weight);
  }
}

/* --- Card --------------------------------------------------------- */
.testimonials__card {
  --testimonials-card-radius: var(--ll-radius-md-mobile);

  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--testimonials-card-radius);
  overflow: hidden;
  background: #0f1419;
}

/* Promote the play button's keyboard focus ring up to the card root. */
.testimonials__card:has(.testimonials__play:focus-visible) {
  outline: 2px solid var(--ll-color-text-inverse);
  outline-offset: 2px;
}

.testimonials__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 300ms ease;
}

.testimonials__poster-frame {
  display: none;
}

.l-slider__slide.is-active .testimonials__poster-frame.is-frame-active,
.l-slider__slide:not(.is-active) .testimonials__poster-frame.is-frame-inactive {
  display: contents;
}

.testimonials__poster img {
  display: block;
  width: 100%;
  height: 100%;
}

.l-slider__slide.is-active
  .testimonials__card:has(.l-video__preview.is-ready)
  .testimonials__poster {
  opacity: 0;
}

.testimonials__root .l-video__preview--iframe {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.testimonials__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 50%) 100%);
  pointer-events: none;
}

.testimonials__content {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: end;
  gap: var(--ll-space-2) var(--ll-space-5);
  padding: var(--ll-space-6);
  color: var(--ll-color-text-inverse);
}

@media (width >= 768px) {
  .testimonials__content {
    grid-template-rows: auto 1fr;
    align-content: stretch;
    padding: var(--ll-space-8);
    row-gap: var(--ll-space-6);
  }
}

.testimonials__quote,
.testimonials__text {
  position: relative;
  z-index: 1;
  transition: opacity 300ms ease;
}

@media (width >= 768px) {
  .testimonials__content {
    --testimonials-glossy-bg: rgb(255 255 255 / 8%);
    --testimonials-glossy-blur: 18px;
    --testimonials-glossy-saturate: 140%;
    --testimonials-glossy-opacity-inactive: 1;
    --testimonials-glossy-opacity-active: 0;
  }

  .testimonials__content::before {
    content: '';
    position: absolute;
    inset: 0 50% 0 0;
    background: var(--testimonials-glossy-bg);
    backdrop-filter: blur(var(--testimonials-glossy-blur)) saturate(var(--testimonials-glossy-saturate));
    /* stylelint-disable-next-line property-no-vendor-prefix --
       Safari < 18 still requires the -webkit-backdrop-filter prefix. */
    -webkit-backdrop-filter: blur(var(--testimonials-glossy-blur)) saturate(var(--testimonials-glossy-saturate));
    pointer-events: none;
    opacity: var(--testimonials-glossy-opacity-inactive);
    transition: opacity 250ms ease;
  }

  .l-slider__slide.is-active .testimonials__content::before {
    opacity: var(--testimonials-glossy-opacity-active);
  }
}

.testimonials__quote {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  font-family: var(--ds-font-family-secondary);
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: 0;
  font-weight: var(--ds-font-weight-medium);
}

@media (width >= 768px) {
  .testimonials__quote {
    grid-column: 1;
    font-size: var(--ll-text-h5-size);
    line-height: var(--ll-text-h5-line-height);
  }
}

.testimonials__customer {
  display: contents;
}

.testimonials__text {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
}

@media (width >= 768px) {
  .testimonials__text {
    align-self: end;
  }
}

.testimonials__name {
  margin: 0;
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ds-font-weight-semibold, 600);
}

@media (width >= 768px) {
  .testimonials__name {
    font-family: var(--ll-text-body-base-family);
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }
}

.testimonials__role {
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
}

@media (width >= 768px) {
  .testimonials__role {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
  }
}

/* --- Play button --------------------------------------------------- */
.testimonials__play {
  grid-column: 2;
  grid-row: 2;
  place-self: center end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--ll-color-text-inverse);
  cursor: pointer;
}

@media (width >= 768px) {
  .testimonials__play {
    place-self: end;
    width: 40px;
    height: 40px;
  }
}

.testimonials__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--testimonials-card-radius);
}

.testimonials__play:focus-visible {
  outline: none;
}

/* --- Play icon: canonical-icon paint (mirrors articles) ----------- */
.testimonials__play-icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
  background-color: currentcolor;
  mask: var(--testimonials-play-icon-url) center / contain no-repeat;
  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--testimonials-play-icon-url) center / contain no-repeat;
}

.testimonials__play-icon > img {
  display: none;
}

.l-slider__slide.is-active
  .testimonials__card:has(.l-video__preview.is-ready)
  .testimonials__quote,
.l-slider__slide.is-active
  .testimonials__card:has(.l-video__preview.is-ready)
  .testimonials__text,
.l-slider__slide.is-active
  .testimonials__card:has(.l-video__preview.is-ready)
  .testimonials__content::before {
  opacity: 0;
}