.alt-testi { display: block; background: var(--alt-te-bg); }

.alt-testi__header { margin-bottom: 40px; text-align: center; }
.alt-testi__heading {
  margin: 0;
  color: var(--alt-te-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-h2);
  font-weight: var(--alt-fw-heading);
  line-height: var(--alt-lh-h2);
}
.alt-testi__sub { margin-top: 12px; }

.alt-testi__viewport { overflow: hidden; }

.alt-testi__track {
  display: grid;
  grid-template-columns: repeat(var(--alt-te-cols-d), minmax(0, 1fr));
  gap: var(--alt-te-gap);
}

.alt-testi__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 26px;
  background: var(--alt-te-card-bg);
  border-radius: var(--alt-radius-block);
}

.alt-testi__stars { display: flex; gap: 2px; color: var(--alt-te-star); }

.alt-testi__quote {
  margin: 0;
  color: var(--alt-te-text);
  font-size: var(--alt-te-quote-size);
  line-height: 1.7;
}
.alt-testi__quote p { margin: 0; }

.alt-testi__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.alt-testi__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.alt-testi__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.alt-testi__meta { display: flex; flex-direction: column; }
.alt-testi__name {
  color: var(--alt-te-heading);
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-body-size) * 0.9375);
  font-weight: 600;
}
.alt-testi__role { color: var(--alt-muted); font-size: calc(var(--alt-body-size) * 0.8125); }

.alt-testi__controls { display: none; justify-content: center; gap: 10px; margin-top: 24px; }
.alt-testi[data-layout="carousel"] .alt-testi__controls { display: flex; }

.alt-testi__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--alt-border);
  border-radius: 999px;
  background: transparent;
  color: var(--alt-te-heading);
  cursor: pointer;
  transition: border-color var(--alt-hover-duration) ease, color var(--alt-hover-duration) ease;
}
.alt-testi__arrow:hover { border-color: var(--alt-brand); color: var(--alt-brand); }

/* Carousel: the track becomes a snapping row instead of a grid. */
.alt-testi[data-layout="carousel"] .alt-testi__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.alt-testi[data-layout="carousel"] .alt-testi__track::-webkit-scrollbar { display: none; }
.alt-testi[data-layout="carousel"] .alt-testi__card {
  flex: 0 0 calc((100% - (var(--alt-te-gap) * (var(--alt-te-cols-d) - 1))) / var(--alt-te-cols-d));
  scroll-snap-align: start;
}

@media (max-width: 1279px) {
  .alt-testi__track { grid-template-columns: repeat(var(--alt-te-cols-t), minmax(0, 1fr)); }
  .alt-testi[data-layout="carousel"] .alt-testi__card {
    flex-basis: calc((100% - (var(--alt-te-gap) * (var(--alt-te-cols-t) - 1))) / var(--alt-te-cols-t));
  }
  .alt-testi__header { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .alt-testi__track { grid-template-columns: 1fr; }
  .alt-testi[data-layout="carousel"] .alt-testi__card { flex-basis: 85%; }
  .alt-testi__card { padding: 20px; }
}

/* ===== centred carousel: three full, faded peeks ===== */

/* The reference card is a fixed 251px wide with generous inner padding.
   Three sit square-on in the middle and the neighbours peek in and fade,
   which is a mask on the viewport rather than per-card opacity so the
   fade stays correct at every scroll position. */

.alt-testi { --alt-te-card: 251px; }

.alt-testi .alt-testi__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 5%, #000 16%, #000 84%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 5%, #000 16%, #000 84%, rgba(0,0,0,0.25) 95%, rgba(0,0,0,0) 100%);
}

.alt-testi .alt-testi__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--alt-te-gap, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: none;
  padding-block: 4px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x;
}
.alt-testi .alt-testi__track::-webkit-scrollbar { width: 0; height: 0; }
.alt-testi .alt-testi__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }

/* Centres the three-card group and lets the rest peek in evenly. */
@media (min-width: 1024px) {
  .alt-testi .alt-testi__track {
    padding-inline: max(16px, calc((100% - (3 * var(--alt-te-card)) - (2 * var(--alt-te-gap, 24px))) / 2));
    scroll-padding-inline: max(16px, calc((100% - (3 * var(--alt-te-card)) - (2 * var(--alt-te-gap, 24px))) / 2));
  }
}

.alt-testi .alt-testi__card {
  flex: 0 0 var(--alt-te-card);
  width: var(--alt-te-card);
  max-width: var(--alt-te-card);
  padding: 48px 36px;
  scroll-snap-align: center;
  display: block;
}

/* ---------------------------------------------------------- centred text */

.alt-testi .alt-testi__card,
.alt-testi .alt-testi__quote,
.alt-testi .alt-testi__title,
.alt-testi .alt-testi__name,
.alt-testi .alt-testi__role,
.alt-testi .alt-testi__meta {
  text-align: center;
}

.alt-testi .alt-testi__stars,
.alt-testi .alt-testi__rating {
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------- no arrows */
/* Drag, swipe and click move the row, so the controls come off. */

.alt-testi .alt-testi__controls,
.alt-testi .alt-testi__arrow,
.alt-testi .alt-testi__dots {
  display: none !important;
}

/* ---------------------------------------------------------- narrower */

@media (max-width: 1023px) {
  .alt-testi .alt-testi__track {
    padding-inline: max(16px, calc((100% - (2 * var(--alt-te-card)) - var(--alt-te-gap, 24px)) / 2));
    scroll-padding-inline: max(16px, calc((100% - (2 * var(--alt-te-card)) - var(--alt-te-gap, 24px)) / 2));
  }
}

@media (max-width: 640px) {
  .alt-testi { --alt-te-card: min(251px, 74vw); }
  .alt-testi .alt-testi__card { padding: 36px 28px; }
  .alt-testi .alt-testi__track {
    padding-inline: calc((100% - var(--alt-te-card)) / 2);
    scroll-padding-inline: calc((100% - var(--alt-te-card)) / 2);
  }
}

/* ===== author row ===== */

.alt-testi .alt-testi__author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}