/* ============================================================
   11 · Testimonials — near-white; centre-focused video carousel
   ============================================================ */
.tst { background: var(--c-ecosystem); }

/* same mechanics as the Books carousel: coverflow.js sets --d (offset from
   centre) and --k (distance), CSS derives offset, scale and opacity */
.tst__carousel {
  --k-card: clamp(220px, 19vw, 290px);
  --k-step: calc(var(--k-card) * .74);
  position: relative;
  max-width: calc(var(--k-card) * 4);
  margin-inline: auto;
}
.tst__stage {
  display: grid;
  place-items: center;      /* one cell; mixed 3:4 / 9:16 tiles stay centred */
  overflow: hidden;
  padding: 16px 0 26px;     /* room for the focused tile's shadow */
}
.tst__card {
  --d: 0;
  --k: 0;
  --ar: 3 / 4;
  grid-area: 1 / 1;
  position: relative;
  width: var(--k-card);
  padding: 0;               /* button UA padding would shrink the media box */
  transform: translateX(calc(var(--d) * var(--k-step))) scale(calc(1 - var(--k) * .14));
  opacity: calc(1 - var(--k) * .42);
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.tst__card--reel { --ar: 9 / 16; }
/* no-JS: a plain horizontal scroller beats a pile of stacked tiles */
.tst__stage:not(.is-ready) { grid-auto-flow: column; justify-content: start; gap: 20px; overflow-x: auto; }
.tst__stage:not(.is-ready) .tst__card { grid-area: auto; transform: none; opacity: 1; }

.tst__media {
  display: block;
  aspect-ratio: var(--ar);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #3a372e, #26251f);
  box-shadow: 0 20px 44px -22px rgba(38, 37, 31, .55);
  transition: box-shadow var(--dur-base) var(--ease);
}
.tst__card.is-active .tst__media { box-shadow: 0 30px 60px -20px rgba(38, 37, 31, .6); }
.tst__media img,
.tst__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* play badge */
.tst__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tst__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 17px solid var(--c-maroon);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.tst__card.is-active:hover .tst__play { background: #fff; transform: translate(-50%, -50%) scale(1.08); }

/* arrows below the stage, as in the reference */
.tst__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}
.tst__arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.4px solid rgba(38, 37, 31, .35);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tst__arrow:hover {
  background: var(--c-maroon);
  border-color: var(--c-maroon);
  color: var(--c-cream-lt);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .tst__carousel { --k-card: clamp(200px, 28vw, 260px); }
}
@media (max-width: 600px) {
  .tst__carousel {
    --k-card: min(64vw, 250px);
    --k-step: calc(var(--k-card) * .82);
    max-width: 100%;
  }
  .tst__play { width: 50px; height: 50px; }
  .tst__play::before { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
}