/*
 * Animated number counter — visibility split between two child spans.
 *
 * Render-side, the plugin wraps each .pst-counter's content in two
 * siblings:
 *   <span class="pst-counter">
 *     <span class="pst-counter__seo">91.6</span>
 *     <span class="pst-counter__live" aria-hidden="true">0</span>
 *   </span>
 *
 * Default (no .pst-counters-active): the SEO span shows the real end
 * value so crawlers, JS-disabled visitors, AND anyone for whom
 * pst-runtime.js never executed (blocked by a proxy, a JS-delaying cache,
 * a script-blocking extension, or an early throw) all see correct
 * numbers. The live span stays hidden — its "0" placeholder never appears.
 *
 * With .pst-counters-active (added by pst-runtime.js itself, only once it is
 * actually running): the SEO span is hidden and the live span takes over,
 * showing the start value that pst-runtime.js animates up to the end. Gating
 * on a class pst-runtime.js sets — rather than the global .has-js boot — is
 * deliberate: the real number is never hidden until the script that
 * animates it has proven it can run, so a failed/blocked pst-runtime.js
 * degrades to the correct static number instead of a frozen "0".
 *
 * Trade-off: because the class is set by a deferred script rather than
 * before first paint, an ABOVE-the-fold counter can briefly show the end
 * value before the swap kicks in (a short "real → 0 → count up" flash).
 * That flash shows the correct number and only affects above-fold
 * counters; it is the accepted cost of never freezing on a wrong "0".
 */

.pst-counter__live {
	display: none;
}

.pst-counters-active .pst-counter__seo {
	display: none;
}

.pst-counters-active .pst-counter__live {
	display: inline;
}

/*
 * Glue counter + adjacent non-space text into one nowrap cluster. The
 * render filter wraps each counter (plus any non-whitespace tail or
 * sibling counters joined by a separator like "/") in a
 * <span class="pst-stat-cluster"> so that "24/7", "91.6%", "20+",
 * "260,000" never break apart mid-pattern. Whitespace OUTSIDE the
 * cluster is left alone, so "65000 clients" can wrap normally between
 * the counter and the label, and "260,000 t" can wrap before the
 * unit. Combined with the fluid font-size, this means columns shrink
 * gracefully without splitting a stat in half.
 */
.pst-stat-cluster {
	white-space: nowrap;
}

/*
 * Stat-heading block styles — two design archetypes the client uses:
 *
 *   .is-style-pst-stat-display  → big, single stat dominating its
 *      panel (case A: "24/7", "91.6%"). Big floor so it stays
 *      prominent on mobile, big ceiling for desktop. The fluid range
 *      between handles every viewport in the middle. !important
 *      because the editor's font-size picker writes inline styles
 *      that would otherwise outweigh a class rule.
 *
 *   .is-style-pst-stat-row  → smaller stat, sized to share a row
 *      with siblings (case B: "20+ RAS projects", "260,000 t").
 *      Lower floor and ceiling so multiple stats fit horizontally.
 *
 * Editors apply one of these from the heading block's "Styles"
 * panel; if neither is selected, the heading falls through to the
 * theme's default heading sizing.
 *
 * Tweak the clamp() values here when checking real devices — the
 * three numbers are floor / preferred (vw) / ceiling.
 */
.is-style-pst-stat-display {
	font-size: clamp( 4rem, 14vw, 9rem ) !important;
	line-height: 1;
}

.is-style-pst-stat-row {
	font-size: clamp( 2.5rem, 8vw, 4.5rem ) !important;
	line-height: 1;
}