/* testimonials: section-owned desktop and responsive styles. */
/* Depends on ../../assets/css/base.css for tokens and grid utilities. */

.ln-testimonials {
  position: relative;
  display: block;
  height: 980px;
  padding: 64px;
  margin-top: 237px;
  overflow: hidden;
  background: var(--ln-color-navy);

}

.ln-testimonials__column {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  justify-content: center;

}

.ln-testimonials__rating {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 336px;
  height: 100px;
  padding: 16px;
  border-radius: 6px;
  color: var(--ln-color-sky);
  background: rgb(255 255 255 / 5%);
  backdrop-filter: blur(3px);

}

.ln-testimonials__rating h2,
.ln-testimonials__reviews p,
.ln-testimonial-card__services,
.ln-testimonial-card__quote p,
.ln-testimonial-card__author p {
  margin: 0;

}

.ln-testimonials__rating h2 {
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  white-space: nowrap;

}

.ln-testimonials__reviews {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 24px;

}

.ln-testimonials__star {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;

}

.ln-testimonials__star img {
  width: 16.667px;
  height: 16.667px;
  max-width: none;

}

.ln-testimonials__reviews p {
  margin-left: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  white-space: nowrap;

}

.ln-testimonials__carousel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 32px;
  width: min(1457.92px, calc(100vw - 40px));

}

.ln-testimonials__viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.ln-testimonials__viewport:active {
  cursor: grabbing;
}

.ln-testimonials__cards {
  display: flex;
  gap: 16px;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;

}

.ln-testimonials__cards.is-dragging,
.ln-testimonials__cards.is-resetting {
  transition: none;

}

.ln-testimonial-card {
  display: flex;
  flex: 0 0 calc((100% - 16px) / 2);
  align-items: flex-start;
  height: 390.72px;
  min-width: 0;

}

.ln-testimonial-card__image {
  position: relative;
  flex: 0 0 auto;
  height: 390.4px;
  margin: 0;
  overflow: hidden;
  background: var(--ln-color-white);
  border-radius: 2.88px 0 0 2.88px;

}

.ln-testimonial-card--proreni .ln-testimonial-card__image {
  width: 61.31%;

}

/* Fill the frame with any uploaded photo, keeping its aspect ratio. */
.ln-testimonial-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.ln-testimonial-card--waalpartners .ln-testimonial-card__image {
  width: 57.15%;
  height: 390.72px;

}

.ln-testimonial-card__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  height: 390.72px;
  padding: 30.72px;
  border-radius: 0 2.88px 2.88px 0;
  color: var(--ln-color-burgundy);
  background: var(--ln-color-yellow);

}

.ln-testimonial-card__services {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12px;
  line-height: 1.4;

}

.ln-testimonial-card__quote {
  display: flex;
  flex-direction: column;
  gap: 12.8px;
  align-items: flex-start;
  width: 100%;

}

.ln-testimonial-card__quote-mark {
  display: block;
  width: 30.4px;
  height: 22.4px;
  max-width: none;

}

.ln-testimonial-card__quote p {
  min-width: 100%;
  color: var(--ln-color-burgundy);
  font-size: 19.12px;
  font-weight: 300;
  letter-spacing: 0.1912px;
  line-height: 1.2;

}

.ln-testimonial-card__author {
  display: flex;
  gap: 12.8px;
  align-items: center;
  width: 100%;

}

.ln-testimonial-card__portrait {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1.6px solid var(--ln-color-orange);
  border-radius: 3.2px;

}

.ln-testimonial-card__portrait > img {
  position: absolute;
  top: -37.5%;
  right: auto;
  bottom: auto;
  left: -22.5%;
  width: 145%;
  height: auto;
  max-width: none;
  object-fit: initial;

}

.ln-testimonial-card--waalpartners .ln-testimonial-card__portrait {
  width: 48px;
  height: 48px;

}

.ln-testimonial-card--waalpartners .ln-testimonial-card__portrait > img {
  top: -20%;
  right: auto;
  bottom: auto;
  left: -35%;
  width: 170%;
  height: auto;
  object-fit: initial;

}

.ln-testimonial-card__author p {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 0;
  color: var(--ln-color-navy);
  line-height: 1.4;

}

.ln-testimonial-card__author strong {
  margin-bottom: -3.2px;
  font-size: 17.6px;
  font-weight: 500;
  letter-spacing: 0.176px;

}

.ln-testimonial-card__author p > span {
  opacity: 0.7;
  font-size: 12.288px;
  font-weight: 300;
  letter-spacing: 0.1229px;

}

.ln-testimonials__navigation {
  display: flex;
  gap: 16px;
  align-items: center;
  align-self: flex-end;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 5px;
  color: var(--ln-color-sky);
  background: rgb(215 225 242 / 20%);
  backdrop-filter: blur(3px);

}

.ln-testimonials__navigation span {
  color: var(--ln-color-sky);
  font-family: "Hedvig Letters Sans", Arial, sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 25.2px;
  white-space: nowrap;

}

.ln-testimonials__nav-button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 180ms var(--ln-ease-standard),
    transform 180ms var(--ln-ease-standard);

}

.ln-testimonials__nav-button:hover {
  background: rgb(255 255 255 / 18%);
}

.ln-testimonials__nav-button:active {
  transform: scale(0.92);
}

.ln-testimonials__nav-button--previous {
  background: #dfe4ed;

}

.ln-testimonials__nav-button img {
  width: 5.625px;
  height: 11.25px;
  max-width: none;

}

.ln-testimonials__nav-button--previous img {
  transform: rotate(180deg);

}

@media (max-width: 75rem) {
  .ln-testimonials {
    padding-inline: 20px;
  }

  .ln-testimonials__carousel {
    width: 100%;
  }

  .ln-testimonial-card {
    flex-basis: calc((100% - 16px) / 2);
  }

  .ln-testimonial-card__image,
  .ln-testimonial-card--proreni .ln-testimonial-card__image,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image {
    width: 54%;
  }

  .ln-testimonial-card--proreni .ln-testimonial-card__image img,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ln-testimonial-card__body {
    padding: 24px;
  }
}

@media (max-width: 64rem) {
  .ln-testimonials {
      height: auto;
      min-height: 0;
      padding: 72px 20px;
      margin-top: 0;
    
  }
  
  .ln-testimonials__column {
      gap: 40px;
    
  }
  
  .ln-testimonials__rating {
      width: min(100%, 336px);
    
  }
  
  .ln-testimonials__rating h2 {
      font-size: clamp(24px, 5.5vw, 30px);
    
  }
  
  .ln-testimonials__reviews p {
      font-size: clamp(16px, 4vw, 20px);
    
  }
  
  .ln-testimonials__carousel,
  .ln-testimonials__viewport {
      width: 100%;
    
  }
  
  .ln-testimonial-card {
      width: 100%;
      height: 330px;
      flex-basis: 100%;
    
  }
  
  .ln-testimonial-card__image,
  .ln-testimonial-card--proreni .ln-testimonial-card__image,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image {
      width: 54%;
      height: 330px;
    
  }
  
  .ln-testimonial-card--proreni .ln-testimonial-card__image img,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    
  }
  
  .ln-testimonial-card__body {
      height: 330px;
      padding: 24px;
    
  }
  
  .ln-testimonial-card__services {
      font-size: 10px;
    
  }
  
  .ln-testimonial-card__quote {
      gap: 8px;
    
  }
  
  .ln-testimonial-card__quote p {
      font-size: clamp(14px, 3.2vw, 19px);
    
  }
  
  .ln-testimonial-card__author strong {
      font-size: clamp(14px, 3.1vw, 17px);
    
  }
  
  .ln-testimonial-card__author p > span {
      font-size: clamp(10px, 2.4vw, 12px);
    
  }

  .ln-testimonials__navigation {
      align-self: center;

  }
}

@media (max-width: 30rem) {
  .ln-testimonial-card {
      flex-direction: column;
      flex-basis: 100%;
      height: auto;
    
  }
  
  .ln-testimonial-card__image,
  .ln-testimonial-card--proreni .ln-testimonial-card__image,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image {
      width: 100%;
      height: 260px;
    
  }
  
  .ln-testimonial-card__body {
      width: 100%;
      height: auto;
      min-height: 330px;
    
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-testimonials__cards {
    transition: none;
  }

  .ln-testimonials__nav-button {
    transition: none;
  }
}

/* Cards grow with their content (long quotes) instead of a fixed height;
   all cards in the carousel stretch to the tallest one and the photo follows. */
.ln-testimonials {
  height: auto;
  min-height: 980px;
}

@media (min-width: 30.001rem) {
  .ln-testimonials__cards {
    align-items: stretch;
  }

  .ln-testimonial-card {
    align-items: stretch;
    height: auto;
    min-height: 390.72px;
  }

  .ln-testimonial-card__image,
  .ln-testimonial-card--proreni .ln-testimonial-card__image,
  .ln-testimonial-card--waalpartners .ln-testimonial-card__image {
    height: auto;
    min-height: 100%;
  }

  .ln-testimonial-card__body {
    gap: 24px;
    height: auto;
    min-height: 390.72px;
  }
}

@media (min-width: 30.001rem) and (max-width: 64rem) {
  .ln-testimonials {
    min-height: 0;
  }

  .ln-testimonial-card,
  .ln-testimonial-card__body {
    min-height: 330px;
  }
}

/* Author: tight name line-height; avatars fill their frame with any upload. */
.ln-testimonial-card__author strong {
  margin-bottom: 0;
  line-height: 1;
}

.ln-testimonial-card__portrait > img,
.ln-testimonial-card--proreni .ln-testimonial-card__portrait > img,
.ln-testimonial-card--waalpartners .ln-testimonial-card__portrait > img {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}