/* ============================================================
   Balance Farm — Reviews
   One review on screen at a time. The quotes are stacked in the
   same box; advancing brings the next one in from the right (and
   back in from the left), so the section holds its place in the
   page instead of scrolling.

   Type: quote 80px / 90% / -5%, 1170px measure.
         chrome Crimson Text 32px / 100% / -3%.
   Both scale down fluidly — no fixed sizes below the cap.
   ============================================================ */

.reviews {
  --reviews-gutter: 12px;            /* chrome inset from the sides */
  --reviews-lead: 98px;              /* chrome -> quote */
  position: relative;
  /* above .story__pin (z-index 5) so the story's pinned copy is covered as
     it scrolls out, instead of drifting over the review */
  z-index: 6;
  background: var(--color-paper);
  /* bleed the white 1px past the box so the dark page background can't show
     through as a hairline where subpixel widths don't quite meet */
  box-shadow: 0 0 0 1px var(--color-paper);
  color: var(--color-ink);
}

/* ---- chrome: 1 of 4 · name · Next ---- */
.reviews__chrome {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: 12px var(--reviews-gutter) 0;
}
.reviews__count,
.reviews__name,
.reviews__next {
  font-family: var(--font-serif);
  font-size: clamp(var(--t-md), 2.22vw, var(--t-xl));
  font-weight: var(--w-regular);
  line-height: 100%;
  letter-spacing: var(--t-xl-track);
  color: var(--color-ink);
}
.reviews__name {
  grid-column: 2;
  text-align: center;
  white-space: nowrap;
}
.reviews__next {
  grid-column: 3;
  justify-self: end;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.reviews__next:hover { opacity: 0.5; }

/* ---- stage: every quote occupies the same box ---- */
.reviews__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 58vh;
  min-height: 58svh;                 /* stable while mobile UI shows/hides */
  padding: var(--reviews-lead) var(--reviews-gutter) var(--reviews-lead);
  overflow: hidden;                  /* quotes enter and leave off-stage */
}
.reviews__quote {
  grid-area: 1 / 1;                  /* stacked, so the stage sizes to the tallest */
  position: relative;
  /* the hit zones own the pointer across the whole stage, so the text is
     never a dead spot; selection stays available via user-select below */
  z-index: 1;
  pointer-events: none;
  width: min(1170px, 100%);
  margin: 0;
  text-align: center;
  font-size: clamp(var(--t-xl), 5.55vw, var(--t-7xl));
  font-weight: var(--w-medium);
  line-height: 90%;
  letter-spacing: var(--t-7xl-track);
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  /* A true slider: quotes wait off-stage right, ride to centre, and carry
     on off-stage left. The slight scale gives the travel some depth so it
     grows in as it lands and settles back as it leaves. */
  transform: translateX(var(--reviews-enter, 110%)) scale(0.94);
  transition:
    opacity 460ms ease,
    transform 720ms var(--e-out);
}
.reviews__quote.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.reviews__quote.is-out {
  opacity: 0;
  transform: translateX(var(--reviews-exit, -110%)) scale(0.94);
}
/* going back reverses both sides of the journey */
.reviews.is-rewind {
  --reviews-enter: -110%;
  --reviews-exit: 110%;
}

/* ---- directional hit zones: the cursor shows which way you'll go ---- */
.reviews__nav {
  position: absolute;
  inset: 0;
  z-index: 2;                        /* above the quotes: the text is clickable too */
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.reviews__zone {
  padding: 0;
  background: none;
  border: none;
  /* let the quote beneath still be selected by dragging */
  -webkit-user-select: text;
  user-select: text;
  /* the platform's own directional cursors: no custom bitmap to be rejected
     at a size limit, and the glyph always matches the OS */
  cursor: w-resize;
}
.reviews__zone--next {
  cursor: e-resize;
}

/* ---- closing wordmark: full width inside a 24px frame; opens the calendar ---- */
.reviews__mark {
  display: block;
  width: 100%;
  padding: var(--s-6);
  background: none;
  border: none;
  cursor: pointer;
}
.reviews__mark img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 260ms ease;
}
.reviews__mark:hover img,
.reviews__mark:focus-visible img { opacity: 0.8; }

@media (max-width: 1024px) {
  .reviews { --reviews-lead: 72px; }
  .reviews__stage { min-height: 52vh; min-height: 52svh; }
}

@media (hover: none) {
  /* touch: swipe handles it, so the pointer zones step aside */
  .reviews__nav { display: none; }
}

@media (max-width: 600px) {
  .reviews { --reviews-gutter: 12px; --reviews-lead: 48px; }
  .reviews__mark { padding: var(--s-6); }
  .reviews__chrome { padding: 12px var(--reviews-gutter) 0; }
  .reviews__count,
  .reviews__name,
  .reviews__next { font-size: var(--t-base); }
  .reviews__quote { letter-spacing: var(--t-xl-track); }   /* -5% is too tight small */
}

@media (prefers-reduced-motion: reduce) {
  .reviews__quote { transition: opacity 1ms; transform: none; }
}