/* =========================================================================
   template-parts/sections/section-stats.php
   Moved out of the partial's inline <style id="es-stats-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

.es-stats { position: relative; }

/* ── Band placement ─────────────────────────────────────── */
.es-stats--band { padding: var(--section-pad-sm) 0; }

/* ── Seam placement ─────────────────────────────────────────
   Zero height, so inserting the band does not move the boundary
   between its two neighbours by a single pixel: the section below
   still starts exactly where it started before, and its background
   therefore still meets the one above in the same place.

   The card is then lifted by a share of its own height and hangs
   across that line. A percentage rather than a fixed offset because
   the card's height changes with the column count and with how many
   of the labels wrap to a second line, and only the card itself
   knows that number.

   z-index keeps it above both neighbours, including a hero whose
   background artwork sits on its own layer. */
.es-stats--seam {
  z-index: 2;
  height: 0;
  --es-stats-rise: 50%;
}

.es-stats--seam > .es-container {
  transform: translateY(calc(var(--es-stats-rise) * -1));
}

/* ── Card ───────────────────────────────────────────────────
   Raised surface rather than the hairline rule the in-hero strip
   uses: this card crosses a boundary between two backgrounds, so
   it has to carry its own ground with it. */
.es-stats__card {
  display: grid;
  grid-template-columns: repeat(var(--es-stats-cols, 4), minmax(0, 1fr));
  gap: var(--gap-fluid-md);
  margin: 0;
  padding: var(--gap-fluid-md) var(--gap-fluid-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.es-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--gap-fluid-md);
  border-left: 1px solid var(--border-subtle);
  text-align: center;
}

.es-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ── Icon chip ──────────────────────────────────────────────
   Same disc the hero's feature row uses, one step larger, so a stat
   row and a capability row read as the same family. Optional: rows
   without an icon simply start at the number, and a card that mixes
   the two still aligns because the chip is inside the flow rather
   than absolutely placed.

   38px, not the original 44px: at four across on a 720-960px container
   the chip was reading closer to the number's own weight than the label
   under it, which pulled the eye to the icon row before the figure. */
.es-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  color: var(--brand-500);
}

/* The same scale the in-hero proof strip used, so the numbers did not change
   size when they moved out of the hero. */
/* nowrap: a value can carry a prefix and a suffix as well as the number
   ("$100M+"), and in a four-column cell at the tablet step that is close
   enough to the cell width to break between the digits and the suffix. A
   figure split across two lines reads as two figures. */
.es-stat__value {
  white-space: nowrap;
  color: var(--text-heading);
  font-size: var(--fs-stat);
  font-weight: var(--font-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  font-variant-numeric: tabular-nums;
}

/* Affixes take the heading ink, not the brand orange, so a figure reads as
   one number rather than as a black part and an orange part. The prefix and
   suffix are still their own elements, since the counter needs the number on
   its own to animate; only the colour is shared now. */
.es-stat__value b,
.es-stat__affix {
  color: inherit;
  font-weight: inherit;
}

/* Counting number. Width is reserved from the target's digit count so the
   row does not reflow as 0 climbs to 550, and tabular-nums keeps every
   digit the same advance so the reservation stays accurate mid-count.

   Right aligned, not centred. `ch` is the advance of the PROPORTIONAL zero,
   which this font draws wider than its tabular one: measured at 28px, 1ch is
   19.1px against a 16.4px tabular digit. So the reservation always overshoots
   the digits it holds, by 2.7px each. Centred, that surplus was split either
   side, and the half sitting on the right opened a gap between the figure and
   its suffix: "550 +" rather than "550+", and 8px of it at three digits.

   Right aligned, the whole surplus moves to the left of the digits, where it
   lands in the space between the mark and the figure and cannot be read as a
   gap in the number. The suffix now sits hard against the last digit and, as
   a bonus, stays put for the whole count instead of being pushed along as
   digits arrive. */
.es-stat__value .rv-counter {
  display: inline-block;
  min-width: calc(var(--es-digits, 1) * 1ch);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.es-stat__label {
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  line-height: 1.35;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   ROW LAYOUT, opt-in via `layout: row`
   Mark beside the figure rather than above it, copy left-aligned,
   and the card on a warm wash instead of flat white.

   Everything below is scoped to the modifier, so the stacked card is
   untouched. The doubled class on the cell beats the base `.es-stat`
   block above on specificity rather than on source order.
   ══════════════════════════════════════════════════════════ */

/* Warm wash rather than a flat surface. Angled so the light falls from the
   top-left, which is the direction the rest of the page's gradients run. */
.es-stats__card--row {
  background: linear-gradient(160deg, var(--bg-surface) 0%, var(--accent-subtle) 100%);
}

/* Grid rather than a flex row, so the mark can span both text rows without
   wrapping the figure and its label in an extra element. Named areas mean
   the breakpoints below re-flow the cell without touching the markup, and a
   stat with no icon simply leaves that column at zero width. */
.es-stat.es-stat--row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1, 4px);
  text-align: left;
}

.es-stat--row .es-stat__icon {
  grid-area: icon;
  align-self: center;
  /* Larger than the stacked card's 38px and without its hairline: beside a
     figure rather than above it, the mark reads as the cell's anchor, and at
     38px with a border it looked like a bullet. */
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
}

/* The chip grew from 38px to 56px for this layout but the mark inside it did
   not: it is drawn at the 19px the partial asks en_icon() for either way, so
   it went from filling half the stacked chip to a third of this one and read
   as a speck floating in a tinted square. Scaled back to the proportion the
   stacked card has. The icons carry a viewBox, so overriding the width and
   height attributes here scales the artwork rather than cropping it. */
.es-stat--row .es-stat__icon svg {
  width: 26px;
  height: 26px;
}

.es-stat--row .es-stat__value {
  grid-area: value;
  /* A step down from --fs-stat: the mark now takes 56px of the cell's width,
     so a 42px figure beside it pushed the label to three lines. */
  font-size: var(--fs-title-sm);
}

.es-stat--row .es-stat__label {
  grid-area: label;
  /* Sentence case, not the stacked card's tracked uppercase. Left-aligned
     over two lines this is a sentence rather than a label, and uppercase
     tracking makes a sentence hard to read at this size. */
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  /* --gray-600, not --text-muted: muted resolves to gray-500, which measures
     3.8:1 on this wash and misses AA at 15px. */
  color: var(--gray-600);
}

/* ── Row layout, tablet ─────────────────────────────────────
   Two up. Four cells each carrying a 56px mark plus two lines of copy needs
   roughly 280px apiece, which a 720px container cannot give four of. */
@media (max-width: 991px) {
  .es-stats__card--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--gap-fluid-md);
  }

  .es-stats__card--row .es-stat {
    padding-left: 0;
    border-left: 0;
  }

  .es-stats__card--row .es-stat:nth-child(even) {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-subtle);
  }

  .es-stats__card--row .es-stat:nth-child(n + 3) {
    padding-top: var(--gap-fluid-md);
    border-top: 1px solid var(--border-subtle);
  }
}

/* ── Row layout, phone ──────────────────────────────────────
   One up. Two of these side by side on a 375px screen leaves about 150px
   per cell, and the mark alone is 56px of it, so the figure and its sentence
   were splitting across four lines. Stacked, each cell keeps a full-width
   line and the card reads as a list. */
@media (max-width: 575px) {
  .es-stats__card--row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .es-stats__card--row .es-stat:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .es-stats__card--row .es-stat:nth-child(n + 2) {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
  }

  .es-stats__card--row .es-stat:nth-child(n + 3) { padding-top: var(--space-5); }
}

/* ── Tablet ─────────────────────────────────────────────────
   Still four across, but the container is on its 720px step while the card
   keeps its desktop padding and gaps, which leaves about 124px of content
   per cell. Both are pulled in one step so a value with a prefix and a
   suffix has room on one line without dropping the row to two columns. */
@media (min-width: 768px) and (max-width: 991px) {
  .es-stats__card {
    gap: var(--space-5);
    padding-inline: var(--space-5);
  }

  .es-stat { padding-left: var(--space-5); }
}

/* ── Small screens ──────────────────────────────────────────
   Two up. Four across a phone leaves each number about 80px of
   room, which is narrower than "550+" sets at any size worth
   reading. The dividers become a cross rather than three
   verticals. */
@media (max-width: 767px) {

  /* ── THE SEAM IS OFF BELOW 768px ──────────────────────────
     The card stops hanging across the join here and sits between the two
     sections as an ordinary band.

     Why: the seam works by giving this element `height: 0` and lifting the
     card by a percentage of its own height, so the room it needs comes
     entirely from padding its two neighbours were given by the composing
     template. Every template that runs this card sets the same pair,
     `calc(--section-pad-lg + --space-8)` above and
     `calc(--section-pad + --space-9)` below, which reserves 64px and 80px
     of seam clearance on top of each section's own rhythm.

     That is sized for the DESKTOP card: four cells on one row, about
     130px tall, needing 65px each side at a 50% rise. On a phone the row
     layout drops to one cell per line, so the same four figures make a
     421px card. Even at the reduced 40% rise it wanted 168px above the
     join and 253px below, against the 64px and 80px actually reserved,
     and it landed on the hero above it and straight through the heading
     of the section below. Measured at 375px on 27 Aug 2026: a 113px
     overlap into the next section's head, on all seven pages running the
     card, not just the one it was reported on.

     Raising the reserved padding instead would mean a 400px hole on every
     one of those pages at every width where the card is NOT that tall.
     Dropping to two columns would fix the height but re-creates the 80px
     cells this breakpoint exists to avoid.

     So on a phone the card is simply a band. The negative margins take
     back exactly the two clearance values above, so each neighbour keeps
     its own `--section-pad` rhythm around the card and no template needs
     to know this happened. Anything that sets a different clearance still
     renders correctly, just with more air.

     ── WHAT THAT MEANS FOR THE SECTION BELOW ────────────────
     It means it needs no phone boost, and every template that ran this
     card had one anyway. `-space-9` here already cancels the `space-9` in
     `calc(--section-pad + --space-9)`, so the desktop expression alone
     leaves precisely one `--section-pad` under the card. The seven
     templates were each adding `space-11 + space-6` on top of that, 160px
     of surplus sized for the version of this component where the seam
     still lifted the card on a phone. Measured at 430px on the App
     Development page: a 204px gap between the card and the next section's
     eyebrow, against the 44px the rhythm asks for. Those lines are gone.

     The section ABOVE still gets its boost, and still needs it: `-space-8`
     cancels only the `space-8` term, and the card is 421px tall here
     against 130px on a desktop, so the room above it is real.

     `height: 0` and the transform are both undone here, or the band would
     take its natural height AND still be lifted out of it. */
  .es-stats--seam {
    height: auto;
    margin-block: calc(var(--space-8) * -1) calc(var(--space-9) * -1);
  }

  .es-stats--seam > .es-container { transform: none; }

  /* The gap and padding apply to both layouts, but the column count does
     not: the row layout drops to ONE up below 576px, and this rule sits
     later in the sheet, so without the guard it would put it back to two. */
  .es-stats__card {
    gap: var(--space-5);
    padding: var(--gap-fluid-md) var(--space-5);
  }

  .es-stats__card:not(.es-stats__card--row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* :not(--row) throughout: the row layout sets its own column count and
     divider pattern at these widths, and without the guard these rules would
     win on source order and put it back to two-up with the wrong borders. */
  .es-stats__card:not(.es-stats__card--row) .es-stat {
    padding-left: 0;
    border-left: 0;
  }

  .es-stats__card:not(.es-stats__card--row) .es-stat:nth-child(even) {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border-subtle);
  }

  .es-stats__card:not(.es-stats__card--row) .es-stat:nth-child(n + 3) {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
  }
}