/**
 * AS Stats — milestone card styling (Salient milestone + utility classes)
 *
 * Inner Row extra class: as-stats-row
 * Column extra class:  as-stat-card
 * Optional:           as-stat-card--suffix-sm  (manji simbol: god., k€+)
 *
 * Breakpoints: mobile ≤480px | tablet 481–999px | desktop ≥1000px
 */

:root {
	--as-stat-gap: 16px;
	--as-stat-card-radius: 8px 0 0 8px;
	--as-stat-card-bg: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	--as-stat-card-padding: 10px 16px 16px 32px;
	--as-stat-inner-gap: 8px;
	--as-stat-number-color: #221c1c;
	--as-stat-label-color: #635f5f;
	--as-stat-number-size: 80px;
	--as-stat-number-tracking: -0.04em;
	--as-stat-number-line-height: 1.1;
	--as-stat-label-size: 16px;
	--as-stat-label-tracking: -0.01em;
	--as-stat-label-line-height: 1.5;
	--as-stat-suffix-size: 48px;
	--as-stat-suffix-tracking: -0.04em;
}

@media (max-width: 999px) {
	:root {
		--as-stat-number-size: 64px;
		--as-stat-suffix-size: 40px;
	}
}

@media (max-width: 480px) {
	:root {
		--as-stat-number-size: 48px;
		--as-stat-suffix-size: 32px;
		--as-stat-card-padding: 10px 12px 14px 20px;
	}
}

/* -------------------------------------------------------------------------
   Row — 16px gap između kartica (flex inner row)
   ------------------------------------------------------------------------- */

.inner_row.as-stats-row > .row_col_wrap_12_inner {
	/* column-gap: var(--as-stat-gap); */
	row-gap: var(--as-stat-gap);
}

/* -------------------------------------------------------------------------
   Kartica (column inner)
   ------------------------------------------------------------------------- */

.as-stat-card > .vc_column-inner {
	background: var(--as-stat-card-bg);
	border-radius: var(--as-stat-card-radius);
	box-sizing: border-box;
	height: 100%;
	padding: var(--as-stat-card-padding);
}

/* -------------------------------------------------------------------------
   Milestone — poravnanje i razmaci
   ------------------------------------------------------------------------- */

.as-stat-card .nectar-milestone {
	display: flex;
	flex-direction: column;
	gap: var(--as-stat-inner-gap);
	margin: 0;
	text-align: left;
}

.as-stat-card .nectar-milestone[data-ms-align="default"],
.as-stat-card.force-desktop-text-align-center .nectar-milestone,
.as-stat-card.force-tablet-text-align-center .nectar-milestone,
.as-stat-card.force-phone-text-align-center .nectar-milestone {
	text-align: left;
}

.as-stat-card .nectar-milestone .number {
	color: var(--as-stat-number-color);
	font-family: inherit;
	font-size: var(--as-stat-number-size);
	font-weight: 500;
	letter-spacing: var(--as-stat-number-tracking);
	line-height: var(--as-stat-number-line-height);
	margin: 0;
}

.as-stat-card .nectar-milestone .number h1,
.as-stat-card .nectar-milestone .number h2,
.as-stat-card .nectar-milestone .number h3,
.as-stat-card .nectar-milestone .number h4,
.as-stat-card .nectar-milestone .number h5,
.as-stat-card .nectar-milestone .number h6 {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
}

.as-stat-card .nectar-milestone .number span {
	font-size: inherit;
	line-height: inherit;
}

.as-stat-card .nectar-milestone .subject {
	color: var(--as-stat-label-color);
	font-family: inherit;
	font-size: var(--as-stat-label-size);
	font-weight: 400;
	letter-spacing: var(--as-stat-label-tracking);
	line-height: var(--as-stat-label-line-height);
	margin: 0;
	padding: 0 !important;
}

/* Simbol (npr. +, god., k€+) */
.as-stat-card .nectar-milestone .symbol-wrap {
	display: inline;
	font-size: var(--as-stat-number-size);
	line-height: var(--as-stat-number-line-height);
	vertical-align: baseline;
}

.as-stat-card .nectar-milestone .symbol {
	font-size: inherit;
	line-height: inherit;
}

.as-stat-card--suffix-sm .nectar-milestone .symbol-wrap {
	font-size: var(--as-stat-suffix-size) !important;
	letter-spacing: var(--as-stat-suffix-tracking);
	line-height: var(--as-stat-number-line-height) !important;
}

.as-stat-card--suffix-sm .nectar-milestone .symbol {
	font-size: inherit !important;
}