/* ===========================================================================
   Helios — Stats widget

   `dd` before `dt` in the markup is deliberate: the number reads first, the
   label explains it. HTML allows any order inside a `<div>` in a `<dl>`, and
   this keeps the DOM order matching the visual order for screen readers.
   ======================================================================== */

.hl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	margin: 0;
}

.hl-stats > div {
	padding: 30px 24px 26px;
	border-top: 1px solid var(--hl-w-border, var(--hl-line));
}

.hl-stats__value {
	margin: 0 0 10px;
	font-family: var(--hl-f-display);
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.02em;
	color: var(--hl-w-heading, var(--hl-cream)) !important;
}

.hl-stats__label {
	font-size: .64rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.6;
}

@media (max-width: 720px) {
	.hl-stats { grid-template-columns: 1fr 1fr; }
	.hl-stats > div { padding: 22px 0 20px; }
}