/* Source styles from UI Vault Testimonials · model-002 (bundled locally). */
@import url("./testimonials-base.css");

/* Restore the landing shell after model-002's standalone body defaults. */
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--font-body);
}

.testimonials__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.07em;
}

/* =========================================================
   The section follows the theme: a light panel by day, dark by night.
   model-002 was built as a fixed dark block (--ui-inverse*), which left a
   black slab in the middle of a light page. These overrides re-point its
   palette at the theme tokens; only the text that sits ON a photo stays
   light, because there the photo is the background.
========================================================= */

.testimonials {
  /* Full-width gray panel behind white cards. */
  --testimonial-bg: var(--ui-gray-100);
  --testimonial-card: var(--ui-surface);
  --testimonial-border: rgba(var(--ui-text-rgb), 0.1);
  --testimonial-text: var(--ui-text);
  --testimonial-muted: rgba(var(--ui-text-rgb), 0.62);
  --testimonial-soft: rgba(var(--ui-text-rgb), 0.07);

  /* every rgba(var(--ui-inverse-text-rgb), …) inside the section */
  --ui-inverse-text-rgb: var(--ui-text-rgb);
  --ui-inverse-text: var(--ui-text);
  --ui-inverse: var(--ui-surface);
}

/* Cards that are a photo keep light ink over the image. */
.testimonials .testimonial-card--video {
  --ui-inverse-text-rgb: var(--ui-on-photo-rgb);
  --ui-inverse-text: var(--ui-on-photo);
  --testimonial-text: var(--ui-on-photo);
  --testimonial-muted: rgba(var(--ui-on-photo-rgb), 0.72);

  /* Redefining the variables is not enough: the card's own color was already
     inherited from the section (dark ink in light mode), so the name over the
     photo stayed dark. Re-apply it here. */
  color: var(--testimonial-text);
}

/* The photo scrim used --ui-text-rgb, which in dark mode is almost white and
   veiled the picture. It is a shadow, so it uses the shadow token, and the top
   step is a little stronger so the stars read over a bright photo. */
.testimonials .testimonial-card__media-overlay {
  background: linear-gradient(
    180deg,
    rgba(var(--ui-shadow-rgb), 0.42) 0%,
    transparent 31%,
    transparent 54%,
    rgba(var(--ui-shadow-rgb), 0.68) 100%
  );
}

/* The play button sits on the photo, so it is always a light disc with a dark
   glyph. It used --ui-bg / --testimonial-bg, which turned it into a dark disc
   with a dark icon in night mode. */
.testimonials .testimonial-card__play {
  background: rgba(var(--ui-on-photo-rgb), 0.95);
  color: var(--ui-on-photo-glyph);
}

.testimonials .testimonial-card__play:hover { background: var(--ui-on-photo); }

/* Ratings are gold everywhere: on the cards (both themes) and over the photos,
   where the top of the scrim is dark enough for either shade. */
.testimonials .testimonial-card__stars { color: var(--ui-rating); }

/* =========================================================
   FULL WIDTH
========================================================= */

.testimonials {
  width: 100%;
  max-width: none;
  margin: 0;
  /* Square block: edge to edge like every other section. Only the cards
     inside keep their rounded corners. */
  border-radius: 0;
}

/* Title to carousel: 10% tighter than model-002 (110px → 99px, 72px → 65px). */
.testimonials .testimonials__header { margin-bottom: 99px; }

/* =========================================================
   STAGE — the video card is pinned on the left, above the carousel. The
   track starts one slot to the right of it, and the quotes slide left under
   it and come back at the end of the queue (testimonials.js).
========================================================= */

.testimonials__stage { position: relative; }

.testimonials__stage > .testimonial-card--video {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: calc((100% - 12px) / 3);
  height: 415px;
  /* A soft edge on the right so the cards read as passing behind it. */
  box-shadow: 18px 0 40px -26px rgba(var(--ui-shadow-rgb), .45);
}

/* Before the script runs: one card width + one gap, so nothing starts under
   the video. testimonials.js takes over with the same measurement. */
.testimonials__stage .testimonials__track { transform: translate3d(calc((100% + 6px) / 3), 0, 0); }

@media (max-width: 1279.98px) {
  .testimonials__stage > .testimonial-card--video { width: calc((100% - 6px) / 2); }
  .testimonials__stage .testimonials__track { transform: translate3d(calc((100% + 6px) / 2), 0, 0); }
}

/* On a phone there is room for one card: the video sits on top, still fixed,
   and the quotes queue below it at full width. */
@media (max-width: 767.98px) {
  .testimonials {
    width: 100%;
    margin: 0;
  }

  .testimonials .testimonials__header { margin-bottom: 65px; }

  .testimonials__stage > .testimonial-card--video {
    position: relative;
    width: 100%;
    height: 390px;
    margin-bottom: 6px;
    box-shadow: none;
  }

  .testimonials__stage .testimonials__track { transform: none; }
}

@media (max-width: 479.98px) {
  .testimonials__stage > .testimonial-card--video { height: 370px; }
}