/**
 * RSI Toolkit — Stats Counters widget.
 *
 * Updated to the 2026 Figma "Stats" section: white band, 3 figures separated by
 * thin divider lines, red Alexandria-Bold 16px label, big Alexandria-Light
 * numeral with a word unit (e.g. "Million readers", "Years"), black copy below.
 * Numbers count up on scroll (stats.js). Columns / colours are controls.
 */

.rsi-stats {
	/* Background + padding come from the Elementor container, not the widget. */
}

.rsi-stats__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.rsi-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.rsi-stats__item {
	display: flex;
	flex-direction: column;
	padding: 0 40px;
}

/*
 * Outer edges and dividers are INLINE-relative, so they must be stated with
 * logical properties. Physical `padding-left` / `border-left` here flipped in
 * Arabic: `:first-child` renders right-most under `direction: rtl`, so the
 * left-side reset landed on the wrong edge and the divider on the last column
 * fell OUTSIDE the band (measured: a stray line at x=75 and none at x=935 on
 * /ar/who-we-are/). `-inline-start` follows the direction, so one rule is
 * correct in both languages and rtl.css needs no override.
 */
.rsi-stats__item:first-child {
	padding-inline-start: 0;
}

.rsi-stats__item:last-child {
	padding-inline-end: 0;
}

.rsi-stats__item:not(:first-child) {
	border-inline-start: 1px solid rgba(0, 0, 0, .12);
}

.rsi-stats__label {
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .15px;
	color: #bf0031;
	margin: 0 0 30px;
}

.rsi-stats__num {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .18em;
	font-family: 'Alexandria', sans-serif;
	font-weight: 300;
	font-size: 62px;
	line-height: 72px;
	color: #0a0a0a;
	margin: 0 0 20px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.rsi-stats__value {
	display: inline-block;
}

.rsi-stats__unit--large,
.rsi-stats__unit--small {
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
}

.rsi-stats__desc {
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .15px;
	color: #0a0a0a;
	margin: 0;
}

@media (max-width: 767px) {
	.rsi-stats__grid {
		grid-template-columns: 1fr;
	}

	.rsi-stats__item {
		padding: 40px 0 0;
	}

	.rsi-stats__item:first-child {
		padding-top: 0;
	}

	/* Stacked: the divider becomes horizontal. The reset has to name the same
	   logical side the desktop rule set, or in Arabic it would zero the opposite
	   edge and leave the vertical line behind. */
	.rsi-stats__item:not(:first-child) {
		border-inline-start: 0;
		border-top: 1px solid rgba(0, 0, 0, .12);
	}

	.rsi-stats__num {
		font-size: 56px;
		line-height: 64px;
	}
}