/**
 * Simorgh Counter — بلوک‌های آمار (آیکن گرد + عدد شمارنده + برچسب).
 * همه‌چیز زیر .smg-counter اسکوپ شده. متغیرهای --smg-cnt-* از تب «استایل» ویجت می‌آیند.
 */

.smg-counter {
	--smg-cnt-cols: 4;
	--smg-cnt-cols-t: 2;
	--smg-cnt-cols-m: 1;
	--smg-cnt-gap: 30px;
	--smg-cnt-circle: 64px;
	--smg-cnt-icon: 26px;
	--smg-cnt-num-size: 40px;
	--smg-cnt-num-color: #5b6b9c;
	--smg-cnt-label-size: 13px;
	--smg-cnt-label-color: #8f9cc0;
	--smg-cnt-align: flex-start;
	--smg-cnt-text-align: start;

	display: grid;
	grid-template-columns: repeat(var(--smg-cnt-cols), minmax(0, 1fr));
	gap: var(--smg-cnt-gap);
	box-sizing: border-box;
}

.smg-counter *,
.smg-counter *::before,
.smg-counter *::after {
	box-sizing: border-box;
}

.smg-counter__item {
	display: flex;
	flex-direction: column;
	align-items: var(--smg-cnt-align);
	text-align: var(--smg-cnt-text-align);
	min-width: 0;
}

.smg-counter__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--smg-cnt-circle);
	height: var(--smg-cnt-circle);
	margin-bottom: 14px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--smg-c1, #4fc3e8) 0%, var(--smg-c2, #3a9fe3) 100%);
}

.smg-counter__icon svg,
.smg-counter__icon img {
	width: var(--smg-cnt-icon);
	height: var(--smg-cnt-icon);
	display: block;
}

.smg-counter__icon svg {
	fill: currentColor;
}

.smg-counter__icon i {
	font-size: var(--smg-cnt-icon);
	line-height: 1;
	color: #fff;
}

.smg-counter__num {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-size: var(--smg-cnt-num-size);
	font-weight: 600;
	line-height: 1.1;
	color: var(--smg-cnt-num-color);
	font-variant-numeric: tabular-nums;
}

.smg-counter__value {
	white-space: nowrap;
}

.smg-counter__affix {
	font-size: 0.55em;
	font-weight: 600;
	opacity: 0.9;
}

.smg-counter__label {
	margin-top: 6px;
	font-size: var(--smg-cnt-label-size);
	line-height: 1.5;
	font-weight: 500;
	color: var(--smg-cnt-label-color);
}

/* ---------- ریسپانسیو ---------- */

@media (max-width: 1024px) {
	.smg-counter {
		grid-template-columns: repeat(var(--smg-cnt-cols-t), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.smg-counter {
		grid-template-columns: repeat(var(--smg-cnt-cols-m), minmax(0, 1fr));
	}
}