/* ===== assets/css/components/figures.css ===== */
/* =============================================================================
   figures.css — Varedat.io · 03 Positioning + figures
   Two columns, mirrored for RTL by logical properties: the statement and the body
   copy at the inline start, the figures at the inline end, separated by hairlines.
   White on both sides of it, so it carries no transition of its own.
   WP mapping: assets/css/components/figures.css + template-parts/sections/figures.php
   ============================================================================= */
.figures {
  --figures-overlap: 88vh;
  position: relative;
  /* v43 — PULLED UP ONE SCREEN AND UNCOVERED BY A WIPE.
     A 100dvh overlay that has been pinned needs a screen of scrolling to get off the screen,
     and until v43 that screen was white at the top no matter how short the blue chapter was
     made. So the overlay is not scrolled away any more, it is WIPED away: --tq runs 0 to 1
     across exactly that screen and clips the pinned pair from the top down, which uncovers
     this section from ITS top rather than from the bottom edge upward. The pull-up puts the
     section behind them so there is something to uncover.
     It is not a fade — the section never changes opacity, an edge travels across it. */
  /* v52 — MEASURED: the pull-up was eating the section.
     The stage is 1440px of scroll at 1440x900. Pulling this section up a full
     viewport put 900 of its 1198 pixels behind the curtain, so by the time --tq
     reached 1 the body copy was already at top -960: the reader met the section
     already scrolled past and never saw the copy at all. That is the "text fades
     out and one paragraph never appears" the client reported, and it is not an
     animation bug -- the copy was simply consumed by somebody else's scroll.

     Half a viewport keeps the uncover (there is still something behind the
     curtain for the edge to travel across) while leaving the section most of its
     own scroll length to be read in. The stage spacer loses the same amount
     below, so the total page length is unchanged. */
  margin-block-start: calc(-1 * var(--figures-overlap));
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0) 0,
    rgb(255 255 255 / 0) 34vh,
    rgb(255 255 255 / 0.82) 60vh,
    #ffffff 84vh,
    #ffffff 100%
  );
  color: var(--color-ink);
  /* v39: asymmetric. The white above this section is the pinned pair scrolling away, so the
     section's own top padding is stacked on top of a screen of white and reads as a gap. */
  /* v40: nothing at the top. The first line of copy is then on the section's own edge, so it
     appears the moment that edge crosses into the window rather than a padding later. */
  /* v52 — the copy starts one viewport DOWN inside the section.
     The section box still begins a viewport early, because that is what gives
     the wipe something to uncover. What was wrong was the COPY beginning there
     too: measured at 1440x900, the body paragraph was at top -960 by the time
     --tq reached 1, so the reader arrived at a section that had already scrolled
     past them. The v40 note said "nothing at the top, so the first line appears
     the moment the edge crosses into the window" -- but the reader cannot see
     that edge; it is behind the curtain.

     Padding equal to the pull-up cancels it for the content while leaving it in
     place for the box. The uncovered band above the copy is this section's own
     white, which is what the wipe is meant to reveal. */
  padding-block: var(--figures-uncover) clamp(3rem, 6vw, 6rem);
}
.figures__inner { display: grid; gap: var(--space-7); }

.figures__title {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  /* v41: 1.06 -> 1.24. Morabba at 900 puts the hamza of «تأمین» and the descenders of «ج/ن»
     outside a line box that tight, and the browser clips them — the client's "the text is
     cut". Persian display faces need materially more leading than a Latin one at the same
     size; this is the one place in the sheet where the Latin instinct is wrong. */
  line-height: 1.26;
  padding-block: 0.06em;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-family: "Morabba", var(--font-sans);
  margin: 0 0 var(--space-6);
}
/* the two-tone statement: the first line steps back so the second one lands */
.figures__line { display: block; }
.figures__line--dim { color: var(--color-line-strong); }

.figures__text {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-ink-2);
  max-inline-size: 52ch;
  text-wrap: pretty;
  margin: 0 0 var(--space-6);
}
.figures__values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-inline-size: 46ch; }
.figures__values li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-size: var(--text-small);
  line-height: 1.8;
  color: var(--color-ink-2);
}
.figures__values li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

.figures__kicker { margin: var(--space-8) 0 var(--space-5); color: var(--color-ink-2); }
.figures__list { display: grid; }
.figure { padding-block: clamp(1.75rem, 4vw, 3rem); border-block-start: 1px solid var(--color-line); }
.figure:last-child { border-block-end: 1px solid var(--color-line); }
.figure__n {
  font-size: clamp(3.25rem, 2rem + 5.2vw, 6.5rem);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-family: "Morabba", var(--font-sans);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-4);
}
.figure__l {
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--color-ink-2);
  max-inline-size: 34ch;
  text-wrap: pretty;
  margin: 0;
}
/* v33: the pending slot is gone — the client supplied the value (15 years, 2026-09-06).
   The rule is kept for the next unfilled figure rather than re-derived. */
.figure--pending .figure__n { color: var(--color-line-strong); }

@media (min-width: 64em) {
  .figures__inner {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  /* the statement holds at the top of the viewport while the body and the figures run past
     it. `align-self: start` is required — a stretched grid item is as tall as the row and
     sticky then has nothing to travel inside. */
  .figures__lede { position: sticky; inset-block-start: clamp(3rem, 12vh, 8rem); align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .figures__lede { position: static; }
}

/* Mobile follows the Hero directly; there is no curtain or pulled-up section. */
@media (max-width: 63.99em) {
  .figures {
    margin-block-start: 0;
    padding-block-start: clamp(3rem, 9vw, 5rem);
    background: #ffffff;
    z-index: 1;
  }
  .figures__inner { opacity: 1; transform: none; }
  .figures__stats { margin-block-start: 0; }
}