/* Testimonial Slider — stacked cards with a peeking "next" card */

.tsl-testimonials{
  --tsl-card-w: 550px;   /* card width */
  --tsl-off-x: 30px;     /* how far the ghost card sits to the right */
  --tsl-off-y: 64px;     /* how far the ghost card sits below */
  --tsl-radius: 14px;
  --tsl-speed: 620ms;
  --tsl-ease: cubic-bezier(.65,.05,.2,1);
  --tsl-star: #f5b301;
  --tsl-ink: #2c2c2c;
  --tsl-body: #363535;
  --tsl-green: #7cb027;

  position: relative;
}

.tsl-testimonials *{ box-sizing: border-box; }

.tsl-inner{
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

/* The slider is the flex item. It needs its own width: the cards are absolutely
   positioned, so without this it shrink-to-fits the nav row instead. */
.tsl-slider{
  width: 100%;
  max-width: var(--tsl-card-w);
}

/* ---------- the stack ---------- */
.tsl-stack{
  position: relative;
  width: 100%;
  margin-left: calc(var(--tsl-off-x) * -1);
  /* cards keep their own height, so the stack resizes between slides */
  transition: height var(--tsl-speed) var(--tsl-ease);
}

.tsl-card{
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 38px 40px 34px;
  border-radius: var(--tsl-radius);
  border: 2px solid transparent;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20,45,10,.14);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--tsl-off-x) * -1), calc(var(--tsl-off-y) * -1), 0);
  transition:
    transform var(--tsl-speed) var(--tsl-ease),
    opacity var(--tsl-speed) var(--tsl-ease),
    background-color var(--tsl-speed) var(--tsl-ease),
    border-color var(--tsl-speed) var(--tsl-ease),
    box-shadow var(--tsl-speed) var(--tsl-ease);
}

.tsl-card.is-active{
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0,0,0);
  z-index: 3;
}

.tsl-card.is-next{
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  background: transparent;
  border-color: rgba(255,255,255,.75);
  box-shadow: none;
  transform: translate3d(var(--tsl-off-x), var(--tsl-off-y), 0);
}

.tsl-card.is-rest{
  opacity: 0;
  z-index: 1;
  transform: translate3d(calc(var(--tsl-off-x) * -1), calc(var(--tsl-off-y) * -1), 0) scale(.97);
}

/* ---------- card contents ---------- */
.tsl-card__avatar {
    position: absolute;
    top: -26px;
    left: -30px;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid #fff !important;
    background: #dfe6d5;
    transition: opacity 380ms var(--tsl-ease), transform 380ms var(--tsl-ease);
}

.tsl-card__quote {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--tsl-body);
    transition: opacity 340ms var(--tsl-ease);
    font-family: 'Manrope', sans-serif;
}
/* the editor wraps the quote in its own paragraphs */
.tsl-card__quote > :first-child{ margin-top: 0; }
.tsl-card__quote > :last-child{ margin-bottom: 0; }

/* margin-top:auto pushes the stars, name and role to the bottom of the card.
   Every card is set to the same height by the script, so the ghost card's name
   always clears the front card no matter how long each quote is. */
.tsl-card__stars{
  display: flex;
  gap: 3px;
  margin-top: auto;
  padding-top: 22px;
  margin-bottom: 14px;
  transition: opacity 340ms var(--tsl-ease);
}
.tsl-card__stars svg{ width: 17px; height: 17px; display: block; fill: var(--tsl-star); }
.tsl-card__stars .is-off{ opacity: .28; }

.tsl-card__name{
  margin: 0;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tsl-ink);
  transition: color var(--tsl-speed) var(--tsl-ease);
}

.tsl-card__role{
  margin: 2px 0 0;
  font-size: 13px;
  color: #7b7b7b;
  transition: opacity 340ms var(--tsl-ease), color var(--tsl-speed) var(--tsl-ease);
}

/* Ghost state: only the name stays visible. The rest fades but keeps its space,
   so the name holds the same position while the card travels. */
.tsl-card.is-next .tsl-card__avatar,
.tsl-card.is-rest .tsl-card__avatar{ opacity: 0; transform: scale(.7); }
.tsl-card.is-next .tsl-card__quote,
.tsl-card.is-next .tsl-card__stars{ opacity: 0; }
.tsl-card.is-next .tsl-card__name{ color: #fff; }
.tsl-card.is-next .tsl-card__role{ color: rgba(255,255,255,.8); }

/* ---------- controls ---------- */
.tsl-nav{
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.tsl-nav__btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background-color 260ms ease, color 260ms ease, transform 260ms ease;
}
.tsl-nav button.tsl-nav__btn {
    display: none;
}
.tsl-nav__btn:hover{ background: #fff !important; color: var(--tsl-green) !important; }
.tsl-nav__btn:active{ transform: scale(.94); }
.tsl-nav__btn:focus-visible,
.tsl-card.is-next:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }
.tsl-nav__btn svg{ width: 16px; height: 16px; }

.tsl-dots{ display: flex; gap: 8px; margin-left: 6px; }
.tsl-dots button{
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: width 320ms var(--tsl-ease), background-color 320ms ease;
}
.tsl-dots button[aria-current="true"]{ width: 24px; border-radius: 4px; background: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .tsl-testimonials{
    --tsl-off-x: 16px;
    --tsl-off-y: 44px;
  }
  .tsl-stack{ margin-left: 0; }
  .tsl-card{ padding: 32px 26px 28px; }
  .tsl-card__avatar{ left: -14px; top: -22px; width: 56px !important; height: 56px !important; }
  .tsl-card__quote{ font-size: 14px; line-height: 1.8; }
}

@media (prefers-reduced-motion: reduce){
  .tsl-stack,
  .tsl-card,
  .tsl-card__quote,
  .tsl-card__stars,
  .tsl-card__avatar{ transition-duration: 1ms; }
}