/**
 * @file
 * MLT Modern — Single review/testimonial card.
 *
 * Used in two contexts:
 *  - .mlt-review (default): standalone, on a light page background
 *  - .mlt-review--on-dark: inside a coloured hero
 *
 * Markup:
 *   <div class="mlt-review">
 *     <div class="mlt-review__stars">★★★★★</div>
 *     <p class="mlt-review__text">"Very happy with our full house rewire..."</p>
 *     <p class="mlt-review__author">— David Ottolangui · Google Review</p>
 *   </div>
 */

.mlt-review {
  background: #fff;
  border: 1px solid var(--mlt-border);
  border-left: 3px solid var(--mlt-accent);
  padding: 18px 22px;
  border-radius: var(--mlt-radius-sm);
  margin-top: 28px;
}

.mlt-review__stars {
  color: var(--mlt-accent);
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.mlt-review__text {
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--mlt-text);
}

.mlt-review__author {
  font-size: 13px;
  color: var(--mlt-text-light);
  font-weight: 600;
  margin: 0;
}

/* On-dark variant — for use inside the blue hero. */
.mlt-review--on-dark {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-left: 3px solid var(--mlt-accent);
  color: #fff;
}

.mlt-review--on-dark .mlt-review__text {
  color: #fff;
  opacity: 0.95;
}

.mlt-review--on-dark .mlt-review__author {
  color: #fff;
  opacity: 0.8;
}