/*
 * AH Counter Stats: headline numbers with label and source. Digits roll in (.ah-odo, rolled by
 * ah-motion.js when the item is seen); the value is plain text without JS.
 * Columns come from a CSS variable so the responsive control and these defaults agree.
 */
.ah-cstats,
.ah-cstats *,
.ah-cstats *::before,
.ah-cstats *::after { box-sizing: border-box; }

.ah-cstats.ah-cstats {
	--ah-cstats-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--ah-cstats-cols), minmax(0, 1fr));
	gap: 36px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
}
.ah-cstats .ah-cstats__item {
	display: grid;
	gap: 4px;
	align-content: start;
	justify-items: start;
	min-width: 0;
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--ah-line);
}
.ah-cstats .ah-cstats__item::marker { content: none; }
.ah-motion .ah-cstats .ah-cstats__item.ah-rv--up { transition-delay: calc(var(--i, 0) * 70ms); }

.ah-cstats .ah-cstats__value {
	display: flex;
	justify-self: start;
	max-width: 100%;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(2.1rem, 4vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--ah-navy);
	/* numbers read left to right ("600K+", "SAR 7M+") on RTL pages too; the box still sits on the label's side */
	direction: ltr;
	unicode-bidi: isolate;
}
.ah-cstats.ah-cstats--end .ah-cstats__value { justify-self: end; }
/* the odometer splits the value into spans; keep the spaces ("SAR 7M+") */
.ah-cstats .ah-cstats__value > span { white-space: pre; }
.ah-cstats .ah-cstats__label { font-weight: 700; font-size: .98rem; line-height: 1.6; }
.ah-cstats .ah-cstats__src { font-size: .82rem; line-height: 1.6; color: var(--ah-soft); }

/* on navy (default) */
.ah-cstats.ah-on-dark { color: var(--ah-on-navy); }
.ah-cstats.ah-on-dark .ah-cstats__item { border-top-color: var(--ah-line-navy); }
.ah-cstats.ah-on-dark .ah-cstats__value { color: var(--ah-gold-hi); }
.ah-cstats.ah-on-dark .ah-cstats__src { color: var(--ah-on-navy-muted); }

@media (max-width: 1024px) {
	.ah-cstats.ah-cstats { --ah-cstats-cols: 2; }
}
@media (max-width: 767px) {
	.ah-cstats.ah-cstats { --ah-cstats-cols: 1; gap: 26px; }
	.ah-cstats .ah-cstats__item { padding-top: 14px; }
}