/**
 * ARC metric cards — editorial restyle of the plugin's .stats-widget tiles
 * (profiles / author / institution metrics). Matches the v2 template:
 * green-tint rounded icon, serif number, uppercase label, hover accent bar,
 * a teal "feature" card (Publications) and proportion bars on % cards.
 *
 * Markup (read-only plugin):
 *   .stats-widget > .row > [ .col-3 > i ] [ .col-9 > .fs-2 (number) + .card-text (label) ]
 * The .arc-mc-bar element is added by arc-metric-cards.js.
 */
.stats-widget {
	--arc-mc-green: #0b3b44;        /* accent: hover bar, icon-on-hover, % bar fill */
	--arc-mc-green-deep: #0b3b44;   /* icon glyph colour */
	--arc-mc-green-tint: #e7eef0;   /* icon badge background (light teal) */
	--arc-mc-ink: #16302e;
	--arc-mc-muted: #5c6b66;
	--arc-mc-muted-2: #93a199;
	--arc-mc-line: #e4e8e0;

	position: relative;
	background: #fff !important;
	border: 1px solid var(--arc-mc-line) !important;
	border-radius: 13px !important;
	padding: 16px 17px 15px !important;
	margin-bottom: 12px !important;
	box-shadow: 0 1px 2px rgba(16, 48, 46, .04) !important;
	overflow: hidden;
	min-height: 108px;          /* uniform card height across all metrics */
	justify-content: center;    /* centre content vertically when shorter */
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Left accent bar that grows in on hover */
.stats-widget::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--arc-mc-green);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .2s ease;
}
.stats-widget:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -20px rgba(16, 48, 46, .45);
	border-color: #b8ccd0;
}
.stats-widget:hover::before { transform: scaleY(1); }

/* Icon on the left, vertically centred against the number + label */
.stats-widget .row {
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
	margin: 0;
	--bs-gutter-x: 0;
}
.stats-widget .col-3 {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	text-align: left !important;
}
.stats-widget .col-9 {
	width: auto;
	max-width: none;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}

/* Icon → rounded-square green-tint badge (overrides plugin's 75px dark circle) */
.stats-widget .col-3 i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	line-height: 1 !important;
	border-radius: 10px !important;
	background: var(--arc-mc-green-tint) !important;
	color: var(--arc-mc-green-deep) !important;
	font-size: 16px !important;
	transition: background .18s ease, color .18s ease;
}
.stats-widget:hover .col-3 i {
	background: var(--arc-mc-green) !important;
	color: #fff !important;
}

/* Number → editorial serif */
.stats-widget .fs-2 {
	font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
	font-weight: 600 !important;
	font-size: 1.8rem !important;
	line-height: 1 !important;
	letter-spacing: -.02em;
	color: var(--arc-mc-ink) !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;   /* keep long numbers on one line so heights match */
}
.stats-widget .arc-mc-u {
	font-size: 1.05rem;
	color: var(--arc-mc-muted-2);
	margin-left: 2px;
}

/* Label → uppercase caption */
.stats-widget .card-text {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--arc-mc-muted) !important;
	margin-top: 7px !important;
	line-height: 1.35;
}

/* Proportion bar (added by JS to % cards). Absolutely positioned at the card
   bottom so it adds no height — keeps every card the same min-height. */
.stats-widget .arc-mc-bar {
	position: absolute;
	left: 17px;
	right: 17px;
	bottom: 14px;
}
.stats-widget .arc-mc-bar .track {
	height: 4px;
	border-radius: 4px;
	background: #eef1ec;
	overflow: hidden;
}
.stats-widget .arc-mc-bar .fill {
	width: 0;
	height: 100%;
	border-radius: 4px;
	background: var(--arc-mc-green);
	transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.stats-widget,
	.stats-widget .col-3,
	.stats-widget::before,
	.stats-widget .arc-mc-bar .fill { transition: none; }
	.stats-widget:hover { transform: none; }
}