/**
 * Animated statistic numbers (Heading / Paragraph mode).
 * Sizer holds final width so prefix/suffix never shift during count-up.
 */

.sohk-animated-number {
	/* Inherit typography from the heading/paragraph block styles. */
}

/* Big impact figures use Display size — pair with Black (900). */
.sohk-animated-number.has-display-font-size {
	font-weight: 900;
}

/* <strong> wrapper restores editor bold; children inherit that weight. */
.sohk-animated-number__shell {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	white-space: nowrap;
	font-weight: inherit;
	color: inherit;
}

.sohk-animated-number__prefix,
.sohk-animated-number__suffix,
.sohk-animated-number__value,
.sohk-animated-number__sizer {
	flex: 0 0 auto;
	font-weight: inherit;
	color: inherit;
}

.sohk-animated-number__digits {
	display: inline-grid;
	justify-items: end;
	font-variant-numeric: tabular-nums;
}

.sohk-animated-number__sizer,
.sohk-animated-number__value {
	grid-area: 1 / 1;
}

/* Invisible final value — reserves width for the full number (e.g. 1,502). */
.sohk-animated-number__sizer {
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

.sohk-animated-number__value {
	display: block;
	text-align: inherit;
}

/* Editor: show final number statically (no animation in canvas). */
.editor-styles-wrapper .sohk-animated-number__value {
	/* content is the heading text itself in editor */
}