/* Reviews — the score as anchor, mineral-ledger bars, a quiet rail of quotes. */

.reviews {
  background: var(--c-white);
}

/* Score + bars ---------------------------------------------------------- */

.reviews__grid {
  display: grid;
  gap: var(--space-6);
}

.reviews__number {
  font-family: var(--font-display);
  font-size: clamp(6rem, 4.5rem + 9vw, 13rem);
  font-weight: 280;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--c-reed);
}

/* The one tiny amber accent in this section */
.reviews__mark {
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-block: var(--space-3) var(--space-3);
  background: var(--c-amber);
}

.reviews__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sage);
}

.reviews__meta a {
  color: var(--c-thermal);
}

.reviews__meta a:hover {
  color: var(--c-thermal-bright);
}

/* Category bars */

.reviews__bars {
  align-self: center;
}

.reviews__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "track track";
  align-items: baseline;
  row-gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}

.reviews__bar:first-child {
  border-top: 1px solid var(--c-line);
}

.reviews__bar-label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sage);
}

.reviews__bar-value {
  grid-area: value;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--c-reed);
}

.reviews__bar-track {
  grid-area: track;
  margin: 0;
  height: 2px;
  background: var(--c-line);
}

.reviews__bar-fill {
  display: block;
  height: 100%;
  width: var(--score, 0%);
  background: var(--c-thermal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.reviews__bar.is-revealed .reviews__bar-fill {
  transform: scaleX(1);
}

/* Fill stagger, one step behind each row's own reveal */
.reviews__bar:nth-child(1) .reviews__bar-fill { transition-delay: 120ms; }
.reviews__bar:nth-child(2) .reviews__bar-fill { transition-delay: 210ms; }
.reviews__bar:nth-child(3) .reviews__bar-fill { transition-delay: 300ms; }
.reviews__bar:nth-child(4) .reviews__bar-fill { transition-delay: 390ms; }
.reviews__bar:nth-child(5) .reviews__bar-fill { transition-delay: 480ms; }
.reviews__bar:nth-child(6) .reviews__bar-fill { transition-delay: 570ms; }

/* Quotes rail ------------------------------------------------------------ */

.reviews__quotes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
}

/* Each voice on its own card */
.reviews__quote {
  position: relative;
  width: auto;
  background: var(--c-mist);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(2.5rem, 4vw, 3.25rem);
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.reviews__quote:hover {
  transform: translateY(-4px);
}

/* An oversized quotation mark anchors each card */
.reviews__quote::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  left: clamp(1.25rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 640;
  line-height: 1;
  color: var(--c-amber);
  pointer-events: none;
}

.reviews__quote blockquote {
  margin: 0;
}

.reviews__quote blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 440;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--c-reed);
  text-wrap: pretty;
}

.reviews__quote-by {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sage);
}

/* Breakpoints ------------------------------------------------------------ */

@media (min-width: 560px) {
  .reviews__quotes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .reviews__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-7);
    align-items: center;
  }

  .reviews__quotes {
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-7);
  }
}

/* Reduced motion: bars rest at their true value ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reviews__bar-fill {
    transform: scaleX(1);
    transition: none;
  }
}