/* ============================================================================
   Stories band 5 — the four-up numbers strip.
   Figma 705:524674 "Frame 2147259240" (1512 x 405), child of the desktop
   frame 705:463416 at y = 4155. Markup: fragments/st2-nums.html.

   Requires, in this order:
     assets/atlas-tokens.css     custom properties
     assets/atlas-st2-nums.css   this file

   The pair to atlas-st2-spot.css and the same kind of band: LIGHT, on a dark
   page, so `isolation: isolate` keeps anything blending from above off it.
   The spotlight band ends on #FFFFFF and this one opens there, which is why
   the seam between them is invisible and must stay that way.

   Every gradient was RE-DERIVED from the raw gradientHandlePositions against
   the real box. The four numbers share one pair of handles and one pair of
   colours but have four different box widths, so they get four different
   angles and four different stop pairs — a single shared ramp would land the
   fade in a different place on every number.

   Where a node carries two stacked paints, Figma paints the array in order
   and the LAST is on top. Each value stacks #0D0D0D -> #CECECE and then
   #263F42 -> #738C89; only the upper one renders and only it is reproduced.
   This is the same call atlas-comm-stats.css makes on the identical component.

   HEIGHT: 100 + 145 + 160 = 405, and 145 = 0 (the rule is a zero-height
   vector) + 32 + 21 + 12 + 80. Nothing sets an explicit height.
   ========================================================================= */

/* 705:524674 — 1512x405, row, padding 100/40/160/40, gap 32, align MIN,
   clipsContent. Fill handles (0.5, 0) -> (0.5, 1) are exactly vertical, so
   180deg with the stops where they are drawn — no re-derivation needed and
   none applied. */
.afxs-nums {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box; min-height: 405px;
  padding: 100px var(--gutter) 160px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEDF2 100%);
  font-family: var(--font-sans);
}

/* the 1432 content column the 40px frame padding leaves.
   4 x 334 + 3 x 32 = 1432 exactly. */
.afxs-nums__inner {
  width: 100%; max-width: var(--page); margin: 0 auto;
  display: flex; flex-direction: row; gap: 32px; align-items: flex-start;
}

/* 705:524675 etc — 334x145, column, gap 32 */
.afxs-nums__stat {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 32px;
}

/* 705:524676 etc "Vector 3168" — a 334-wide vector of height 0 carrying a 1px
   CENTER stroke at rgba(0,0,0,.25), corner radius 3.99. The light-band mirror
   of the hero strip's rgba(255,255,255,.25).
   The node is ZERO tall, so the 32 gap below it is measured from the vector's
   own baseline; the -1px margin gives the rule a paintable pixel without
   spending one of those 32. */
.afxs-nums__rule {
  width: 100%; height: 1px; margin-bottom: -1px;
  background: rgba(0,0,0,.25); border-radius: 3.99px;
}

/* 705:524677 etc — 113 tall, column, gap 12 */
.afxs-nums__body { display: flex; flex-direction: column; gap: 12px; }

/* 705:524678 etc — Saans 400 / 14 / 21px, ls 0, #000000 at node opacity .8.
   Saans ships only under a trial licence, so --font-alt maps onto the primary
   stack until it is bought. */
.afxs-nums__label {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; letter-spacing: 0;
  color: var(--af-black); opacity: .8;
}

/* 705:524679 etc — SF Pro 510 / 80 / 80px / ls -2.4px, one line.
   fit-content keeps the background box on the ink: background-clip:text paints
   only inside the element's background box, and a full-width box would push
   the fade off the end of every number. */
.afxs-nums__value {
  width: fit-content;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}
/* 705:524679 — 253x80 */
.afxs-nums__stat:nth-child(1) .afxs-nums__value { background-image: linear-gradient(139.1deg, #263F42 38.51%, #738C89 77.82%); }
/* 705:524684 — 240x80 */
.afxs-nums__stat:nth-child(2) .afxs-nums__value { background-image: linear-gradient(140.6deg, #263F42 36.97%, #738C89 77.57%); }
/* 705:524689 — 302x80 */
.afxs-nums__stat:nth-child(3) .afxs-nums__value { background-image: linear-gradient(134deg,   #263F42 43.13%, #738C89 78.57%); }
/* 705:524694 — 126x80 */
.afxs-nums__stat:nth-child(4) .afxs-nums__value { background-image: linear-gradient(156.7deg, #263F42 14.62%, #738C89 73.93%); }

/* ============================================================================
   Narrow viewports. The file draws no desktop-narrow state for this band, so
   these only stop the 80px numbers from colliding; nothing is re-designed.
   ========================================================================= */
@media (max-width: 1180px) {
  .afxs-nums { min-height: 0; padding-bottom: 80px; }
  .afxs-nums__inner { flex-wrap: wrap; }
  .afxs-nums__stat { flex: 1 1 40%; }
  .afxs-nums__value { font-size: 56px; line-height: 60px; letter-spacing: -1.68px; }
}
@media (max-width: 720px) {
  .afxs-nums { padding: 80px var(--gutter) 48px; }
  .afxs-nums__inner { flex-direction: column; gap: 32px; }
  .afxs-nums__stat { flex: none; }
  .afxs-nums__value { font-size: 48px; line-height: 52px; letter-spacing: -1.44px; }
}