/* Testimonials — Ecommerce Edge (Single Quote),
   tmpl-ecommerce-edge--testimonials--single-quote--7
   Layout: stacked-cards, max-w-4xl container, 3 columns, min-height 50vh.
   Mobile: stack. Tablet: 2-col. Background: mesh-gradient + light overlay.
   Shadow md, radius xl, no decorative shapes. Heading right-aligned. */

.testimonials {
  --testimonials-container: 56rem;              /* max-w-4xl */
  --testimonials-heading: var(--text-2xl);      /* 2xl */
  --testimonials-quote: var(--text-xl);         /* grows to 3xl from tablet up */
  --testimonials-duration: 500ms;               /* bounce-in duration */
  --testimonials-radius: var(--radius-xl);      /* xl */
  --testimonials-shadow: var(--shadow-md);      /* md */
  --testimonials-zoom: 1;                       /* set by the scroll effect */
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 50vh;
  padding-block: var(--space-section);
  /* mesh-gradient: overlapping soft radial fields in the brand colours */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(60% 55% at 12% 18%, rgba(47, 93, 70, 0.28) 0%, rgba(47, 93, 70, 0) 70%),
    radial-gradient(55% 50% at 88% 12%, rgba(191, 93, 63, 0.24) 0%, rgba(191, 93, 63, 0) 72%),
    radial-gradient(70% 60% at 78% 88%, rgba(95, 145, 116, 0.26) 0%, rgba(95, 145, 116, 0) 70%),
    radial-gradient(60% 55% at 18% 92%, rgba(224, 154, 125, 0.22) 0%, rgba(224, 154, 125, 0) 72%);
}

/* light overlay: washes the mesh back so text keeps its contrast */
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(250, 248, 244, 0.62);
}

.testimonials__container {
  width: 100%;
  max-width: var(--testimonials-container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1fr;                   /* mobile: stack */
  gap: var(--space-8);
}

/* ---- heading (right aligned, weight 900, 0.02em tracking) ---- */

.testimonials__intro { text-align: right; }

.testimonials__heading {
  font-family: var(--font-heading);
  font-size: var(--testimonials-heading);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ---- stacked-cards deck ---- */

.testimonials__list {
  list-style: none;
  display: grid;
  gap: var(--space-6);
  transform: scale(var(--testimonials-zoom));
  transform-origin: 50% 50%;
  will-change: transform;
}

.testimonials__item {
  display: grid;
  grid-template-columns: 1fr;                   /* mobile: stack */
  gap: var(--space-4);
}

.testimonials__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--testimonials-radius);
  background-color: var(--color-bg-soft);
  box-shadow: var(--testimonials-shadow);
}

.testimonials__quote {
  font-family: var(--font-heading);
  font-size: var(--testimonials-quote);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--letter-tight);
  color: var(--color-text);
  max-width: var(--measure);
}

.testimonials__quote::before { content: '“'; }
.testimonials__quote::after { content: '”'; }

.testimonials__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonials__avatar {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary-200);
}

.testimonials__meta {
  display: flex;
  flex-direction: column;
}

.testimonials__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.testimonials__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* back layers of the stack */
.testimonials__layer {
  position: relative;
  overflow: hidden;
  border-radius: var(--testimonials-radius);
  box-shadow: var(--testimonials-shadow);
  background-color: var(--color-bg-soft);
}

.testimonials__layer-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---- entrance: bounce-in, 500ms, 120ms stagger ---- */

@keyframes testimonials-bounce-in {
  0%   { opacity: 0; transform: scale(0.88) translateY(24px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .testimonials--animate .testimonials__intro,
  .testimonials--animate .testimonials__item {
    opacity: 0;
  }

  .testimonials--animate.testimonials--shown .testimonials__intro,
  .testimonials--animate.testimonials--shown .testimonials__item {
    opacity: 1;
    animation: testimonials-bounce-in var(--testimonials-duration) var(--ease-bounce) both;
    animation-delay: var(--testimonials-delay, 0ms);
  }

  .testimonials--animate.testimonials--shown .testimonials__intro { --testimonials-delay: 0ms; }
  .testimonials--animate.testimonials--shown .testimonials__item { --testimonials-delay: 120ms; }
}

/* ---- Tablet: 2-col ---- */
@media (min-width: 48rem) {
  .testimonials {
    --testimonials-quote: var(--text-3xl);      /* subheading scale: 3xl */
  }

  .testimonials__item {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .testimonials__card { grid-column: 1 / -1; }

  /* the stack: layers tuck under the quote card and tilt */
  .testimonials__layer {
    margin-top: calc(var(--space-6) * -1.5);
    transform: rotate(-1.5deg);
  }

  .testimonials__layer[data-layer='2'] { transform: rotate(1.5deg); }
}

/* ---- Desktop: 3 columns ---- */
@media (min-width: 64rem) {
  .testimonials__item {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--space-6);
  }

  .testimonials__card {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    padding: var(--space-8);
  }

  .testimonials__layer {
    grid-column: 3;
    margin-top: 0;
    margin-left: calc(var(--space-6) * -1);
  }

  .testimonials__layer[data-layer='1'] { grid-row: 1; }
  .testimonials__layer[data-layer='2'] { grid-row: 2; }
}