/**
 * MRMVR Elements — Stat Band.
 *
 * A row of figures under an optional heading, divided by clay hairlines and
 * counted up as the band scrolls into view.
 *
 * Sizes itself against its own container rather than the viewport, so it
 * behaves correctly inside a narrow Elementor column.
 *
 * @package MRMVR\Elements
 * @since   1.20.0
 */

.mrx-stat-wrap {
	container-type: inline-size;
	container-name: mrxs;
	min-height: 0;
}

.mrx-stat {
	/* Surface */
	--mrx-s-bg: transparent;
	--mrx-s-radius: 24px;

	/* Layout */
	--mrx-s-cols: 4;
	--mrx-s-gap: clamp(24px, 3cqi, 48px);
	--mrx-s-head-gap: clamp(28px, 3.6cqi, 56px);
	--mrx-s-align: center;

	/* Rule between figures */
	--mrx-s-rule: rgba(207, 161, 144, 0.45);
	--mrx-s-rule-width: 1px;

	/* Colour */
	--mrx-s-eyebrow: var(--mrmvr-amber, #f57528);
	--mrx-s-title: var(--mrmvr-navy, #1a2142);
	--mrx-s-accent: var(--mrmvr-amber, #f57528);
	--mrx-s-value: var(--mrmvr-navy, #1a2142);
	--mrx-s-affix: var(--mrmvr-amber, #f57528);
	--mrx-s-label: var(--mrmvr-navy, #1a2142);
	--mrx-s-icon: var(--mrmvr-amber, #f57528);

	padding: clamp(24px, 3.4cqi, 56px);
	background-color: var(--mrx-s-bg);
	border-radius: var(--mrx-s-radius);
	text-align: var(--mrx-s-align);
	font-family: var(--mrmvr-font-body);
}

/* -------------------------------------------------------------------------
 * Heading
 * ---------------------------------------------------------------------- */

.mrx-stat__head {
	margin: 0 0 var(--mrx-s-head-gap);
}

.mrx-stat__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.4px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--mrx-s-eyebrow);
}

.mrx-stat__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background-color: currentColor;
}

.mrx-stat__title {
	margin: 0;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(26px, 3.2vw, 42px);
	font-size: clamp(26px, 4.6cqi, 42px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.4px;
	text-wrap: balance;
	color: var(--mrx-s-title);
}

.mrx-stat__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--mrx-s-accent);
}

/* -------------------------------------------------------------------------
 * The row of figures
 * ---------------------------------------------------------------------- */

.mrx-stat__row {
	display: grid;
	grid-template-columns: repeat(var(--mrx-s-cols), minmax(0, 1fr));
	gap: var(--mrx-s-gap);
	align-items: start;
}

.mrx-stat__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-align: center;
}

/*
 * The rule is drawn in the gap to the item's left, so it sits exactly midway
 * between two figures whatever the gap is set to. Items that begin a row have
 * no neighbour on that side, and the rules for each column count below turn
 * theirs off — which is why the count is a class rather than a variable, since
 * a selector cannot read one.
 */
.mrx-stat__item::before {
	content: "";
	position: absolute;
	top: 6%;
	bottom: 6%;
	left: calc(var(--mrx-s-gap) / -2);
	width: var(--mrx-s-rule-width);
	background-color: var(--mrx-s-rule);
}

.mrx-scols-2 .mrx-stat__item:nth-child(2n + 1)::before,
.mrx-scols-3 .mrx-stat__item:nth-child(3n + 1)::before,
.mrx-scols-4 .mrx-stat__item:nth-child(4n + 1)::before,
.mrx-scols-5 .mrx-stat__item:nth-child(5n + 1)::before,
.mrx-scols-6 .mrx-stat__item:nth-child(6n + 1)::before {
	display: none;
}

.mrx-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--mrx-s-icon);
}

.mrx-stat__icon svg,
.mrx-stat__icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
	fill: currentColor;
}

.mrx-stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	margin: 0;
	font-family: var(--mrmvr-font-display);
	font-size: clamp(34px, 5.6cqi, 58px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1px;
	/* Digits must not shuffle sideways while the figure counts up. */
	font-variant-numeric: tabular-nums;
	color: var(--mrx-s-value);
}

.mrx-stat__prefix,
.mrx-stat__suffix {
	font-size: 0.55em;
	font-weight: 500;
	color: var(--mrx-s-affix);
}

.mrx-stat__label {
	max-width: 22ch;
	margin: 0;
	font-family: var(--mrmvr-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.4;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--mrx-s-label);
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These set properties rather than the custom properties the Elementor
 * controls write to, so they stay authoritative without an !important.
 * ---------------------------------------------------------------------- */

@container mrxs (max-width: 860px) {
	/* Two across, and the rule follows the new column count. */
	.mrx-stat-wrap .mrx-stat__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mrx-stat-wrap .mrx-stat__item::before {
		display: block;
	}

	.mrx-stat-wrap .mrx-stat__item:nth-child(2n + 1)::before {
		display: none;
	}
}

@container mrxs (max-width: 420px) {
	.mrx-stat-wrap .mrx-stat__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	/* One to a row: a vertical rule between them has nothing to divide. */
	.mrx-stat-wrap .mrx-stat__item::before {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.mrx-stat__item::before {
		display: none;
	}
}