/* ==========================================================================
   Counter Block — novafolio/counter
   Circular progress rings with count-up animation.
   ========================================================================== */

.nvf-counter {
	--nvf-counter-label-color: var(--nvf-color-gray, #555555);
	--nvf-counter-value-color: var(--nvf-color-ink, #111111);
	--nvf-counter-bg: transparent;
	background: var(--nvf-counter-bg);
	max-width: var(--nvf-layout-max-width, 1440px);
	margin-inline: auto;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.nvf-counter__grid {
	display: grid;
	gap: var(--nvf-space-l, 32px);
	justify-items: center;
}
.nvf-counter--cols-1 .nvf-counter__grid { grid-template-columns: 1fr; }
.nvf-counter--cols-2 .nvf-counter__grid { grid-template-columns: repeat(2, 1fr); }
.nvf-counter--cols-3 .nvf-counter__grid { grid-template-columns: repeat(3, 1fr); }
.nvf-counter--cols-4 .nvf-counter__grid { grid-template-columns: repeat(4, 1fr); }
.nvf-counter--cols-5 .nvf-counter__grid { grid-template-columns: repeat(5, 1fr); }
.nvf-counter--cols-6 .nvf-counter__grid { grid-template-columns: repeat(6, 1fr); }

/* ── Item ──────────────────────────────────────────────────────────────── */
.nvf-counter__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nvf-space-s, 12px);
	text-align: center;
}

/* ── Ring ──────────────────────────────────────────────────────────────── */
.nvf-counter__ring {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nvf-counter__ring svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
	overflow: visible !important;
	position: static !important;
}
.nvf-counter__track,
.nvf-counter__progress {
	transition: stroke-dashoffset 0.1s ease;
}
.nvf-counter__progress {
	will-change: stroke-dashoffset;
}

/* animated class applied by JS */
.nvf-counter.is-animated .nvf-counter__progress {
	transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Value ─────────────────────────────────────────────────────────────── */
.nvf-counter__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--nvf-counter-value-color);
	line-height: 1;
	pointer-events: none;
}

/* ── Label ─────────────────────────────────────────────────────────────── */
.nvf-counter__label {
	font-size: var(--nvf-counter-label-fs, 0.9rem);
	font-weight: var(--nvf-counter-label-fw, 400);
	letter-spacing: var(--nvf-counter-label-ls, normal);
	text-transform: var(--nvf-counter-label-tt, none);
	color: var(--nvf-counter-label-color);
	max-width: 180px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.nvf-counter--cols-5 .nvf-counter__grid,
	.nvf-counter--cols-6 .nvf-counter__grid { grid-template-columns: repeat(3, 1fr); }
	.nvf-counter--cols-4 .nvf-counter__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.nvf-counter__grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--nvf-space-m, 24px); }
}
@media (max-width: 400px) {
	.nvf-counter__grid { grid-template-columns: 1fr !important; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.nvf-counter.is-animated .nvf-counter__progress {
		transition: none;
	}
}