/**
 * Counters 2.0 — modern layouts (vanilla CSS)
 * Copyright (C) 2011 - 2026 JoomlaX
 */

.jx-counters {
	--jx-gap: 24px;
	--jx-align: center;
	--jx-number-color: #0f172a;
	--jx-title-color: #475569;
	--jx-desc-color: #64748b;
	--jx-card-bg: #ffffff;
	--jx-accent: #0d9488;
	--jx-border: rgba(15, 23, 42, 0.08);
	--jx-radius: 16px;
	--jx-number-size: 36px;
	--jx-title-size: 15px;
	--jx-title-weight: 600;
	--jx-number-weight: 700;
	--jx-card-padding: 28px 20px;
	--jx-icon-size: 36px;
	--jx-item-accent: var(--jx-accent);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--jx-gap);
	width: 100%;
	box-sizing: border-box;
	text-align: var(--jx-align);
}

.jx-counters[style*="--jx-cols: 2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jx-counters[style*="--jx-cols: 3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jx-counters[style*="--jx-cols: 4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jx-counters[style*="--jx-cols: 5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jx-counters[style*="--jx-cols: 6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.jx-counter-item,
.jx-counter-card {
	box-sizing: border-box;
	min-width: 0;
}

.jx-counter-card {
	height: 100%;
	padding: var(--jx-card-padding);
	background: var(--jx-card-bg);
	border: 1px solid transparent;
	border-radius: var(--jx-radius);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.jx-counter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--jx-icon-size) + 18px);
	height: calc(var(--jx-icon-size) + 18px);
	margin-bottom: 14px;
	border-radius: calc(var(--jx-radius) * 0.75);
	color: var(--jx-item-accent);
	background: color-mix(in srgb, var(--jx-item-accent) 12%, transparent);
}

.jx-counters--align-left .jx-counter-icon { margin-left: 0; margin-right: auto; }
.jx-counters--align-right .jx-counter-icon { margin-left: auto; margin-right: 0; }
.jx-counters--align-center .jx-counter-icon { margin-left: auto; margin-right: auto; }

.jx-counter-icon-svg,
.jx-counter-icon--fa i {
	width: var(--jx-icon-size);
	height: var(--jx-icon-size);
	font-size: var(--jx-icon-size);
	line-height: 1;
}

.jx-counters--no-icons .jx-counter-icon { display: none; }

.jx-counter-value {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: var(--jx-align);
	gap: 0.06em;
	color: var(--jx-number-color);
	font-size: var(--jx-number-size);
	font-weight: var(--jx-number-weight);
	line-height: 1.1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	white-space: nowrap;
}

.jx-counter-number {
	display: inline-block;
	min-width: var(--jx-num-min, auto);
	text-align: inherit;
	font-variant-numeric: inherit;
	font-feature-settings: inherit;
}

.jx-counter-prefix,
.jx-counter-suffix {
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0;
	opacity: 0.85;
	color: var(--jx-item-accent);
}

.jx-counter-copy {
	margin-top: 10px;
}

.jx-counter-title {
	margin: 0;
	color: var(--jx-title-color);
	font-size: var(--jx-title-size);
	font-weight: var(--jx-title-weight);
	line-height: 1.35;
}

.jx-counter-desc {
	margin: 6px 0 0;
	color: var(--jx-desc-color);
	font-size: calc(var(--jx-title-size) * 0.9);
	line-height: 1.45;
	opacity: 0.95;
}

/* Layout: classic */
.jx-counters--classic .jx-counter-card {
	background: transparent;
	padding: 12px 8px;
}

.jx-counters--classic .jx-counter-icon {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
	margin-bottom: 8px;
}

/* Layout: cards */
.jx-counters--cards .jx-counter-card {
	border-color: var(--jx-border);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.jx-counters--cards.jx-counters--hover .jx-counter-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
	border-color: color-mix(in srgb, var(--jx-item-accent) 35%, var(--jx-border));
}

/* Layout: glass */
.jx-counters--glass .jx-counter-card {
	background: color-mix(in srgb, var(--jx-card-bg) 72%, transparent);
	border-color: color-mix(in srgb, #ffffff 55%, var(--jx-border));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.jx-counters--glass.jx-counters--hover .jx-counter-card:hover {
	transform: translateY(-3px);
}

/* Layout: minimal */
.jx-counters--minimal .jx-counter-card {
	background: transparent;
	border-radius: 0;
	padding: 8px 4px 16px;
	border-bottom: 2px solid color-mix(in srgb, var(--jx-item-accent) 55%, transparent);
}

.jx-counters--minimal .jx-counter-icon {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
}

/* Layout: pill */
.jx-counters--pill .jx-counter-card {
	border-radius: 999px;
	border-color: var(--jx-border);
	padding: 22px 28px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.jx-counters--pill .jx-counter-icon {
	border-radius: 999px;
}

/* Layout: split */
.jx-counters--split .jx-counter-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon value"
		"icon copy";
	align-items: center;
	column-gap: 16px;
	row-gap: 4px;
	text-align: left;
	border: 1px solid var(--jx-border);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.jx-counters--split .jx-counter-icon {
	grid-area: icon;
	margin: 0;
}

.jx-counters--split .jx-counter-value {
	grid-area: value;
	justify-content: flex-start;
}

.jx-counters--split .jx-counter-copy {
	grid-area: copy;
	margin-top: 0;
	text-align: left;
}

.jx-counters--split.jx-counters--hover .jx-counter-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--jx-item-accent) 40%, var(--jx-border));
}

/* Motion */
.jx-counter-item.is-visible .jx-counter-card {
	animation: jx-counter-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: var(--jx-stagger, 0ms);
}

@keyframes jx-counter-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jx-counter-item.is-visible .jx-counter-card,
	.jx-counters--hover .jx-counter-card {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

@media (max-width: 992px) {
	.jx-counters[style*="--jx-cols: 5"],
	.jx-counters[style*="--jx-cols: 6"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.jx-counters,
	.jx-counters[style*="--jx-cols: 3"],
	.jx-counters[style*="--jx-cols: 4"],
	.jx-counters[style*="--jx-cols: 5"],
	.jx-counters[style*="--jx-cols: 6"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jx-counters {
		--jx-number-size: calc(var(--jx-number-size) * 0.85);
	}
}

@media (max-width: 480px) {
	.jx-counters,
	.jx-counters[style*="--jx-cols: 2"],
	.jx-counters[style*="--jx-cols: 3"],
	.jx-counters[style*="--jx-cols: 4"],
	.jx-counters[style*="--jx-cols: 5"],
	.jx-counters[style*="--jx-cols: 6"] {
		grid-template-columns: 1fr;
	}

	.jx-counters--pill .jx-counter-card {
		border-radius: var(--jx-radius);
	}
}