/* ==========================================================================
   stats.css, "some things you should know" band (homepage + sellers)

   Was three columns each capped by a 2px peacock bar. Three heavy parallel
   rules is a dashboard/KPI device: it reads as a chart legend, and sitting on
   top of each column it separates the figures rather than relating them.

   Now the row is framed by hairlines above and below with hairline dividers
   between the columns, which is the editorial device for the same job -- the
   three figures read as one considered block. The accent is spent once, on a
   short peacock rule under the heading, instead of three times across the row.
   ========================================================================== */
/* The hairlines carry this whole section, so their colour is a token: the site's
   warm --vr-line reads fine on cream but nearly vanishes on the sand band the
   sellers page uses (#E3D8C7 on #EAE0D0). The sand variant darkens it. */
.vr-stats{
  --vr-stats-line:var(--vr-line);
  padding-block:var(--vr-section-y); text-align:center; background:var(--vr-cream);
}
.vr-stats__head{
  font-weight:500; font-size:clamp(1.8rem,4vw,2.4rem); color:var(--vr-teal);
  max-width:24ch; margin:0 auto; line-height:1.2; text-wrap:balance;
}
.vr-stats__head em{font-style:italic;}
/* The single accent, echoing the rule under .vr-pagehero--field's title. */
.vr-stats__head::after{
  content:''; display:block; width:52px; height:2px;
  background:var(--vr-blush); margin:1.6rem auto 0;
}

.vr-stats__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:3.2rem; border-block:1px solid var(--vr-stats-line);
}
/* Divider between, not a cap above: the hairline belongs to the gap, so it
   goes on the second and third cells rather than all three. */
.vr-stat{padding:2.6rem 1.5rem;}
.vr-stat + .vr-stat{border-left:1px solid var(--vr-stats-line);}

.vr-stat__num{
  display:block; font-family:var(--vr-serif); font-weight:600;
  font-size:clamp(2.5rem,5.2vw,3.4rem); line-height:1;
  letter-spacing:-.005em; color:var(--vr-teal);
}
/* Labels genuinely are labels, so they take the guide's label treatment:
   Montserrat, uppercase, wide tracking. (The nav does NOT -- a menu is a set
   of destinations; see header.css.) Uppercase wants short, and the long
   sentence fragments these used to carry read better trimmed anyway. */
.vr-stat__label{
  display:block; font-family:var(--vr-ui); font-weight:500; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.6;
  color:var(--vr-stone); margin:1.1rem auto 0; text-wrap:balance;
}
/* No ch-based max-width here: `ch` measures the "0" glyph and ignores
   letter-spacing, so at .2em tracking a 26ch cap actually clamps to ~170px and
   forces a wrap the column had room for. The cell's own padding is the measure. */

@media (max-width:820px){
  .vr-stats__grid{grid-template-columns:1fr; margin-top:2.6rem;}
  /* stacked, the divider rotates: it still sits between, never on top */
  .vr-stat + .vr-stat{border-left:0; border-top:1px solid var(--vr-stats-line);}
  .vr-stat{padding-block:2.1rem;}
}

/* The headline figures are agent career totals, which includes production from
   before Village Realty existed. That needs saying, so the band carries a
   footnote under the grid -- set small, in stone, at the body face rather than
   the uppercase label face, because it is a sentence and not a label. It also
   does real work: it is where the firm's own numbers live. */
.vr-stats__note{
  max-width:66ch; margin:2rem auto 0;
  /* Sized and coloured as the site's other secondary copy (.vr-step__text,
     .vr-team__bio), not as fine print. It carries the firm's own numbers, so
     it has to be read, and stone at .86rem on this much cream was a whisper. */
  font-size:.98rem; line-height:1.7; color:var(--vr-charcoal);
  /* `pretty`, not `balance`: balance is a heading device that evens out line
     lengths, and on a multi-line paragraph it squeezes the measure to a narrow
     column. This wants a full measure with a tidy last line. */
  text-wrap:pretty;
}