/**
 * @file
 * MLT Modern — Stats strip (3-column big-number + label).
 *
 * Designed for use inside a coloured hero (numbers in accent yellow), but
 * the .mlt-stats--on-light modifier swaps colours for use on plain pages.
 *
 * Markup:
 *   <div class="mlt-stats">
 *     <div class="mlt-stats__item">
 *       <div class="mlt-stats__num">100%</div>
 *       <div class="mlt-stats__label">5★ rated rewires</div>
 *     </div>
 *     ...
 *   </div>
 */

.mlt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 35px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mlt-stats__num {
  font-size: 30px;
  font-weight: 800;
  color: var(--mlt-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.mlt-stats__label {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.35;
}

.mlt-stats--on-light {
  border-top-color: var(--mlt-border);
}

.mlt-stats--on-light .mlt-stats__num {
  color: var(--mlt-primary);
}

.mlt-stats--on-light .mlt-stats__label {
  color: var(--mlt-text-light);
  opacity: 1;
}