/**
 * Canvas Counter: presentation variants.
 *
 * The optional card / bordered / accent / circle-icon / horizontal shells a
 * counter can sit in. The counter itself (`.counter`) is styled by the theme's
 * style.css; these are wrappers a layout composes around it, so they are plain
 * classes rather than block options: any group can carry them.
 *
 * Registered per-block in Blocks\AssetRegistry against the counter slug, so the
 * sheet only loads on pages that render a counter.
 *
 * @package Canvas_Core
 * @since   1.0.0
 */

/* ── Card ─────────────────────────────────────────────────────────────────── */

.counter-card {
	background: var(--cnvs-contrast-0, #fff);
	border-radius: 0.75rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	padding: 2rem 1.5rem;
	transition: var(--cnvs-transition, all 0.3s ease);
}

.counter-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	transform: translateY(-4px);
}

/* ── Bordered ─────────────────────────────────────────────────────────────── */

.counter-bordered {
	border: 2px solid var(--bs-gray-300);
	border-radius: 0.5rem;
	padding: 2rem 1rem;
	transition: border-color 0.3s ease;
}

.counter-bordered:hover {
	border-color: var(--cnvs-themecolor);
}

/* ── Left accent ──────────────────────────────────────────────────────────── */

.counter-accent {
	border-left: 4px solid var(--cnvs-themecolor);
	padding: 1rem 1.5rem;
	text-align: left;
}

.counter-accent-danger {
	border-left-color: var(--bs-danger);
}

.counter-accent-success {
	border-left-color: var(--bs-success);
}

.counter-accent-warning {
	border-left-color: var(--bs-warning);
}

/* ── Circle icon ──────────────────────────────────────────────────────────── */

.counter-circle-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 1.75rem;
}

/* ── Horizontal ───────────────────────────────────────────────────────────── */

.counter-horizontal {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	background: var(--bs-light);
	border-radius: 0.5rem;
}

.counter-horizontal .counter-h-icon {
	width: 60px;
	height: 60px;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.counter-horizontal .counter-h-text {
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {

	.counter-card,
	.counter-bordered {
		transition: none;
	}

	.counter-card:hover {
		transform: none;
	}
}