/* =========================================================================
   reviews.css — §8, two counter-scrolling rows.
   Reuses the .marquee engine from marquee.js; only the card is new.
   ========================================================================= */

.reviews { background: var(--cream); overflow: hidden; }
.reviews__title { color: var(--teal-deep); margin-bottom: clamp(var(--s-8), 4vw, var(--s-12)); }

.reviews__rows { display: grid; gap: clamp(var(--s-3), 1.4vw, var(--s-5)); }

/* The row itself must not add vertical padding — the cards carry it. */
.marquee--reviews {
  background: transparent;
  border: 0;
  padding-block: 0;
}
.marquee--reviews .marquee__item {
  align-items: stretch;
  gap: clamp(var(--s-3), 1.4vw, var(--s-5));
  padding-right: clamp(var(--s-3), 1.4vw, var(--s-5));
  font-family: var(--font-ui);
  font-size: inherit;
  letter-spacing: normal;
  white-space: normal;
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  width: clamp(260px, 30vw, 380px);
  padding: clamp(var(--s-5), 2vw, var(--s-8));
  border-radius: var(--r-md);
  background: var(--teal);
  color: var(--cream);   /* 4.89:1 on teal */
}
/* Alternating dark card. */
.review:nth-child(even) { background: var(--ink); }  /* cream on ink = 17.44:1 */

.review__quote {
  font-size: var(--fs-body);
  line-height: 1.5;
  flex: 1 1 auto;
}
.review__stars {
  display: flex;
  gap: 3px;
  color: var(--bubblegum);   /* 8.2:1 on teal, decorative anyway */
  font-size: 14px;
  line-height: 1;
}
.review__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-small);
}
.review__author { font-weight: 700; }
.review__source { opacity: .78; }

/* ---- Placeholder badge --------------------------------------------------
   No real reviews exist yet. Every seeded entry is flagged and renders this
   badge so it can never be mistaken for a real testimonial. Setting
   CB.SHOW_PLACEHOLDER_BADGE = false in js/knowledge.js removes it. */
.review--placeholder { outline: 2px dashed rgba(var(--cream-rgb), .38); outline-offset: -6px; }
.review__badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);          /* 6.07:1 on hot pink */
  background: var(--hot-pink);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

@media (max-width: 600px) {
  .review { width: min(78vw, 300px); }
}