/*
 * Heidesee Kennzahlen-Kreise widget — outline circles clustered as a pyramid
 * (fewer on top, more below; rows overlap and circles touch), with a staggered
 * fade-in-up reveal on scroll. Built for dark sections (light text/strokes).
 */

.hd-metrics {
	--hd-metrics-d: 300px; /* circle diameter (Figma desktop; set by the widget size control) */
	width: fit-content;
	margin-inline: auto;
	color: var(--c-kalkstein);
}

.hd-metrics__row {
	display: flex;
	justify-content: center;
	gap: calc(var(--hd-metrics-d) * 0.09); /* spacing between circles */
}

/* Bottom row sits just below the top row; top circles nestle above the gaps */
.hd-metrics__row--bottom {
	margin-top: calc(var(--hd-metrics-d) * -0.05);
}

.hd-metrics__circle {
	width: var(--hd-metrics-d);
	height: var(--hd-metrics-d);
	flex: 0 0 auto;
	margin: 0; /* neutralise the <dl> default block margin */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	border: 2px solid currentColor; /* line strength matches the FAQ rules (2px) */
	border-radius: 50%;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* Hover/focus: the outline circle fills with Kalkstein and the text flips to
   Graphit (value + label both use currentColor), matching the Figma active
   state. Also on keyboard focus for accessibility. */
.hd-metrics__circle:hover,
.hd-metrics__circle:focus-within,
.hd-metrics__circle.is-active {
	background-color: var(--c-kalkstein);
	border-color: var(--c-kalkstein);
	color: var(--c-graphit);
}

.hd-metrics__value {
	font-family: var(--font-base);
	font-weight: var(--fw-bold);
	/* Figma: 45px (--fs-h3) at the 1440 desktop; scales down on narrower widths. */
	font-size: clamp(32px, 3.13vw, 45px);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hd-metrics__label {
	margin: 8px 0 0; /* incl. reset of the <dd> default inline indent */
	/* Figma: 18px at the 1440 desktop. */
	font-size: clamp(14px, 1.25vw, 18px);
	font-weight: var(--fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* --- Fade-in-up reveal (JS adds .hd-metrics--anim so no-JS stays visible) --- */
.hd-metrics--anim .hd-metrics__circle {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: calc(var(--i, 0) * 90ms);
}

.hd-metrics--anim.is-in .hd-metrics__circle {
	opacity: 1;
	transform: none;
}

/* --- Mobile: 2 circles per row (Figma mobile). All five flow into one grid
       via display:contents on the rows, so the last one sits alone left. --- */
@media (max-width: 767px) {
	.hd-metrics {
		--m-gap: clamp(12px, 3.5vw, 20px);
		width: 100%;
		/* The section container has no horizontal padding, so inset the circles
		   here — otherwise they sit flush against the screen edges. */
		padding-inline: clamp(20px, 6vw, 32px);
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--m-gap);
	}

	.hd-metrics__row {
		display: contents;
	}

	.hd-metrics__row--bottom {
		margin-top: 0;
	}

	.hd-metrics__circle {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		/* Grid items default to min-width:auto, which keeps the column as wide as
		   the longest label (e.g. "Bruttogeschossfläche") and overflows the page
		   on mobile. Allow the circle to shrink to the 1fr column instead. */
		min-width: 0;
	}

	/* First metric (Grundstücksfläche) sits centered on its own row; the other
	   four pair up 2-up below it (matches the Figma mobile frame, where the
	   circles are centered rather than flush left). */
	.hd-metrics__row--top .hd-metrics__circle:first-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--m-gap)) / 2);
	}

	/* Scale the type down so the long single-word labels fit the narrow circles
	   (and wrap/hyphenate rather than spill, which would re-introduce overflow).
	   The label needs its own tight line-height: it would otherwise inherit the
	   body's absolute 28px, which blows up an 11px label's line boxes and made
	   the text blocks look off-center in the circles (customer note 2026-08). */
	.hd-metrics__value {
		font-size: clamp(20px, 6vw, 24px);
	}

	.hd-metrics__label {
		margin-top: 2px;
		font-size: 11px;
		line-height: 1.2;
		letter-spacing: 0.3px;
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-metrics--anim .hd-metrics__circle {
		opacity: 1;
		transform: none;
		transition: none;
	}
}