/* ==========================================================================
   TESTIMONIALS
   A deck of Facebook-style review cards. The section pins and each scroll step
   snaps to the next card, so one testimonial holds the stage at a time and can
   run full width rather than tall and narrow.

   The two shapes below the deck are decorative, exactly as in the reference -
   they carry no content, so cards are free to differ in height and the deck
   still reads as a stack.
   ========================================================================== */

.testimonials {

  --card-w: 760;
  --card-pad: 32;
  --card-radius: calc(18 * var(--u));
  --card-bg: #fffdf8;

  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  /* Top figure is the band the fixed navbar occupies - the heading arrives at
     1.5x and ran under the bar by 50px without it. The bottom is trimmed to
     match: the section is pinned, so anything past one screen is simply never
     reachable, and with the band added it was running 51px over. */
  padding-block: calc(88 * var(--u)) calc(24 * var(--u));
  background-color: var(--c-bg);
  overflow: hidden;
}

/* A field of dots, barely there - enough to give the section a surface for the
   deck to sit on without reading as a pattern. Masked away at the top and
   bottom edges: the sections either side are the same cream, so a hard-edged
   field would draw a rectangle across an otherwise continuous ground. */
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(43 28 18 / 0.07) calc(1.6 * var(--u)),
    transparent calc(1.6 * var(--u)));
  background-size: calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 14%, #000 86%, transparent 100%);
}

.testimonials__inner {
  position: relative;
  z-index: 1;   /* over the dot field */
  width: 100%;
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.testimonials__title {
  /* Scaled down from oversized as the section is scrolled. About its TOP edge,
     not its centre: scaled about the centre it grew upward as well as down, and
     at 1.5x that put it 14px under the fixed navbar. Anchored here the top edge
     never moves and the extra height goes downward, into space the deck is not
     using yet - the deck is at 0.16 opacity for the whole of that beat. */
  transform-origin: 50% 0%;
  will-change: transform;
  max-width: calc(760 * var(--u));
  margin: 0 auto calc(34 * var(--u));
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: calc(42 * var(--u));
  line-height: 1.25;
  text-align: center;
  color: var(--c-text);
  text-wrap: balance;
}

.testimonials__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: calc(53 * var(--u));
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   Deck
   -------------------------------------------------------------------------- */

/* Cards differ in height, and the section centres its contents, so without a
   fixed stage the heading would slide up and down as the deck swapped cards.
   The stage holds the tallest card plus the peeking shapes, and the deck is
   pinned to its top edge so cards always start just below the heading. */
.testimonials__stage {
  display: grid;
  justify-items: center;
  align-items: start;   /* fixed top edge, so the deck grows downward from it */
  min-height: calc(560 * var(--u));
}

.deck {
  position: relative;
  width: calc(var(--card-w) * var(--u));
}

/* Height is driven by whichever card is showing, and tweened between them, so
   the deck grows and shrinks with the testimonial instead of being boxed to
   the longest one. */
.deck__cards {
  position: relative;
  z-index: 2;
}

/* Decorative stack peeking out below the front card. How many are showing is
   driven in JS by how many cards are actually left to read. */
.deck__peek {
  position: absolute;
  top: calc(100% - 30 * var(--u));
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  pointer-events: none;
  will-change: transform, opacity;
}

.deck__peek--1 {
  z-index: 1;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  height: calc(48 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgb(43 28 18 / 0.07);
  filter: brightness(0.97);
}

.deck__peek--2 {
  z-index: 0;
  left: calc(50 * var(--u));
  right: calc(50 * var(--u));
  height: calc(66 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgb(43 28 18 / 0.07);
  filter: brightness(0.94);
}

/* --------------------------------------------------------------------------
   Card - Facebook post anatomy in the LimpioZam palette
   -------------------------------------------------------------------------- */

.deck__card {
  position: absolute;
  inset: 0 0 auto 0;
  padding: calc(var(--card-pad) * var(--u));
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(43 28 18 / 0.05),
              0 calc(14 * var(--u)) calc(34 * var(--u)) rgb(43 28 18 / 0.10);
}

/* The first card is in flow so the deck has a height before JS runs. */
.deck__card:first-child {
  position: relative;
}

.deck__head {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--u));
  margin-bottom: calc(18 * var(--u));
}

.deck__avatar {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  background-color: var(--c-secondary);
}

.deck__byline {
  font-size: calc(19 * var(--u));
  line-height: 1.35;
  color: rgb(43 28 18 / 0.7);
}

.deck__byline strong {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.deck__date {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(3 * var(--u));
  font-size: calc(16 * var(--u));
  color: rgb(43 28 18 / 0.62);   /* 3.2:1 at 0.5; still under the 0.7 byline */
}

.deck__date svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  fill: currentColor;
}

.deck__body p {
  font-size: calc(19 * var(--u));
  line-height: 1.5;
  color: rgb(43 28 18 / 0.85);
  text-wrap: wrap;
}

.deck__body p + p {
  margin-top: calc(14 * var(--u));
}

/* --------------------------------------------------------------------------
   Reduced motion
   The deck is advanced by JS, and JS never runs for these visitors: main.js
   builds every section inside a gsap.matchMedia keyed on
   `(prefers-reduced-motion: no-preference)`, and matchMedia does not call the
   callback at all when its query fails. So the module's own `!animate` branch
   can never fire, and without this block four of the five cards stay stacked
   underneath the first with only one readable. Laid out as a plain list here,
   which also covers the page running with no JS at all.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .testimonials__stage {
    min-height: 0;
  }

  .deck__card {
    position: relative;
  }

  .deck__card + .deck__card {
    margin-top: calc(24 * var(--u));
  }

  /* They stand for cards that are all on the page already. */
  .deck__peek {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Phones
   The deck is 760 design pixels wide, which is 547px - wider than the window it
   is in. Nothing is pinned here either, so the five reviews simply become a
   list and the decorative stack underneath has nothing left to stand for.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .testimonials {
    display: block;
    min-height: 0;
    padding: calc(104 * var(--u)) calc(20 * var(--u)) calc(72 * var(--u));
  }

  .testimonials__title {
    font-size: calc(40 * var(--u));
    margin-bottom: calc(36 * var(--u));
  }

  .testimonials__title em {
    font-size: calc(50 * var(--u));
  }

  .testimonials__stage {
    display: block;
    min-height: 0;
  }

  .deck {
    width: 100%;
  }

  .deck__card {
    position: relative;
    inset: auto;
  }

  .deck__card + .deck__card {
    margin-top: calc(24 * var(--u));
  }

  .deck__peek {
    display: none;
  }
}