/* ==========================================================================
   Stat rows
   ==========================================================================
   Label left, oversized numeral right, hairline between every pair.

   Deliberately NOT a variant of .stat-grid. That is a three-column band with
   one rule top and bottom and every cell peer-ranked. This is the orthogonal
   shape: a vertical list that has to read the same at three rows or at eight.
   Closed top and bottom, matching the meta rail on the detail page, so the two
   read as one system.
   ========================================================================== */

.stat-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

/* Stacks below 768px on purpose: "12,3 GWh" at display size is about 230px
   wide and collides with the label on a 375px viewport. items-baseline above
   that is what makes the pattern read, because a two-line label contributes
   its first line's baseline and aligns to the numeral. */
.stat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-block: 1.75rem;
}

@media (min-width: 768px) {
  .stat-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 2.25rem;
  }
}

.stat-row__term { display: flex; flex-direction: column; gap: 0.25rem; }

.stat-row__label {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--foreground);
}

/* Says what the number actually measures. "Résultat" is an outcome we caused,
   "Échelle" is the size of the system we worked on. */
.stat-row__register {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.stat-row__value {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .stat-row__value {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
  }
}