/* Testimonials — UI Vault Testimonials · model-006 (TST-006), rebuilt on the
   MIRA tokens (2026-10-05). Replaces model-002 (pinned video card + quote
   carousel). Intro and arrows on the left, one big quote on the right; the
   quote swaps in place (testimonials.js). Follows the theme: gray band by
   day, its dark step by night, edge to edge with no rounded corners. */

.testimonials {
  --tst-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  display: flex;
  align-items: center;
  min-height: 760px;
  padding: 125px 0 118px;
  overflow: hidden;
  background: var(--ui-gray-100);
  color: var(--ui-text);
  font-family: var(--font-body);
}

.testimonials__inner {
  width: min(1500px, calc(100% - 176px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(64px, 8vw, 160px);
  align-items: center;
}

/* =========================================================
   INTRO
========================================================= */

.testimonials__title {
  max-width: 560px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.1vw, 74px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.07em;
  /* Two tones instead of model-006's 400/800 pair: Montserrat only loads 800.
     .55 keeps the gray line above 3:1 on the band in both themes. */
  color: rgba(var(--ui-text-rgb), 0.55);
}

.testimonials__title strong {
  display: block;
  color: var(--ui-text);
}

.testimonials__description {
  max-width: 470px;
  margin: 32px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ui-muted);
}

.testimonials__controls {
  display: flex;
  gap: 14px;
  margin-top: 44px;
}

.testimonials__button {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(var(--ui-text-rgb), 0.16);
  border-radius: 50%;
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  transition:
    transform 450ms var(--tst-ease),
    color 300ms ease,
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 450ms var(--tst-ease);
}

.testimonials__button svg {
  width: 42%;
  height: 42%;
  transition: transform 450ms var(--tst-ease);
}

@media (hover: hover) {
  .testimonials__button:hover {
    transform: translateY(-3px);
    border-color: var(--ui-text);
    background: var(--ui-text);
    color: var(--ui-bg);
    box-shadow: 0 15px 30px rgba(var(--ui-shadow-rgb), 0.12);
  }
  .testimonials__button--prev:hover svg { transform: translateX(-3px); }
  .testimonials__button--next:hover svg { transform: translateX(3px); }
}

.testimonials__button:active { transform: translateY(0) scale(0.93); }

.testimonials__button:focus-visible {
  outline: 2px solid var(--ui-text);
  outline-offset: 4px;
}

/* =========================================================
   QUOTE
========================================================= */

.testimonials__stage {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
}

.testimonial { width: 100%; }

.testimonial__mark {
  height: 64px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: 800;
  line-height: 0.9;
  color: var(--ui-account-1);
  user-select: none;
}

.testimonial__quote {
  max-width: 820px;
  margin: 0;
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.005em; /* N-189 (2nd ask): open, never negative tracking on the quote */
  word-spacing: 0.04em;
  color: var(--ui-text);
  text-wrap: balance;
}

/* Long quotes (testimonials.js, > 140 characters) one step smaller. */
.testimonial__quote.is-long { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.45; }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}

/* No stock faces for quotes nobody in the photo wrote: initials until the
   real testimonials (and their photos) arrive. */
.testimonial__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-surface);
  color: var(--ui-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.testimonial__author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial__author-info strong {
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.testimonial__author-info span {
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--ui-muted);
}

/* =========================================================
   SWAP — the quote and author leave upward, the next ones rise in.
========================================================= */

.testimonial__quote.is-leaving { animation: tst-quote-out 330ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.testimonial__author.is-leaving { animation: tst-author-out 280ms cubic-bezier(0.4, 0, 1, 1) forwards; }
.testimonial__quote.is-entering { animation: tst-quote-in 720ms var(--tst-ease) forwards; }
.testimonial__author.is-entering { animation: tst-author-in 720ms 90ms var(--tst-ease) both; }

@keyframes tst-quote-out { to { opacity: 0; transform: translateY(-18px); } }
@keyframes tst-quote-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tst-author-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes tst-author-in { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .testimonial__quote,
  .testimonial__author { animation: none !important; }
  .testimonials__button,
  .testimonials__button svg { transition: none; }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1279.98px) {
  .testimonials__inner { width: calc(100% - 96px); }
}

/* Stacked: intro on top, quote below. */
@media (max-width: 1023.98px) {
  .testimonials { min-height: 0; padding: 104px 0 96px; }

  .testimonials__inner {
    width: min(860px, calc(100% - 72px));
    grid-template-columns: 1fr;
    gap: 72px;
  }

  .testimonials__title { max-width: 680px; }
  .testimonials__stage { min-height: 0; }
}

@media (max-width: 767.98px) {
  .testimonials { padding: 80px 0 72px; }
  .testimonials__inner { width: calc(100% - 32px); gap: 56px; }
  .testimonials__description { margin-top: 22px; }
  .testimonials__controls { margin-top: 30px; }
  .testimonials__button { width: 56px; height: 56px; }

  .testimonial__mark { height: 50px; font-size: 84px; }
  .testimonial__quote { font-size: clamp(21px, 5.8vw, 28px); line-height: 1.42; }
  .testimonial__quote.is-long { font-size: clamp(19px, 5vw, 24px); line-height: 1.45; }
  .testimonial__author { gap: 14px; margin-top: 30px; }
  .testimonial__avatar { width: 56px; height: 56px; font-size: 18px; }
  .testimonial__author-info strong { font-size: 19px; }
}