/* ————————————————————————————————————————————
   lil bit cycling v2 — the ride stats

   A post's opening numbers ("13 cycling days · 1175 km · 10539 m ascent")
   as a quiet strip: each figure over its words, a hairline above and
   below, the row spread across the column. Three on a phone still share
   one row; four fold into two rows of two.
   ———————————————————————————————————————————— */

.lbc-ride-stats {
  --ink:      #212121;
  --ink-soft: #6e6e6e;
  --rule:     rgba(0, 0, 0, .09);
  --sans:     "Quicksand", "helvetica neue", helvetica, arial, sans-serif;

  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  margin: .2rem 0 2.2rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
}
.lbc-ride-stats.is-2 { --n: 2; }
.lbc-ride-stats.is-3 { --n: 3; }
.lbc-ride-stats.is-4 { --n: 4; }
.lbc-ride-stats.is-5 { --n: 5; }
.lbc-ride-stats.is-6 { --n: 6; }

.lbc-ride-stat {
  display: flex;
  flex-direction: column-reverse; /* the number above its words */
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 .5rem;
  text-align: center;
  border-left: 1px solid var(--rule);
}
.lbc-ride-stat:first-child { border-left: 0; }

.lbc-ride-stats dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lbc-ride-stats dt {
  margin-top: .35rem;
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* phones: three still share the row, a touch smaller; four (or more) fold
   into rows of two, a hairline between the rows instead of the middle one */
@media (max-width: 600px) {
  .lbc-ride-stats { padding: .9rem 0; }
  .lbc-ride-stats dd { font-size: 1.3rem; }
  .lbc-ride-stats dt { font-size: .6rem; letter-spacing: .1em; }
  .lbc-ride-stats.is-4,
  .lbc-ride-stats.is-5,
  .lbc-ride-stats.is-6 { --n: 2; row-gap: .9rem; }
  .lbc-ride-stats.is-4 .lbc-ride-stat:nth-child(odd),
  .lbc-ride-stats.is-5 .lbc-ride-stat:nth-child(odd),
  .lbc-ride-stats.is-6 .lbc-ride-stat:nth-child(odd) { border-left: 0; }
}