/*
 * Key figures (HANDOFF §5.5; Figma 8:122, row 35:928; Home 26:2688 / 35:1099). Four Ink cards, 2 × 2 below 1024.
 * Each card is a subgrid of the row, so the cards and their label bars are equal height in each row: the bar is
 * 40 for one line, 56 for two, and grows for longer translations, with its Notch. The card: the icon (48, white,
 * in Figma's 1 px frame), the figure, the Cement label bar. Figures count up (figures.js); the icons draw in.
 */

/* Home: Silo White; Figma 120 above, 60 below on desktop (here 64), 72 on mobile. */
.figures-band {
	padding-block: var(--space-section);
}

@media (min-width: 768px) {
	.figures-band {
		padding-bottom: var(--space-64);
	}
}

/* About us: on Cement, Figma 96 above and below on desktop, 72 on mobile (the section padding, at most 96). The label
   bars are Cement too, so they blend into the band and only the Notch shows, as in Figma. */
.figures-band--cement {
	padding-block: min(var(--space-section), var(--space-96));
	background: var(--color-cement);
}

.key-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gutter);
	margin: 0;
}

@media (min-width: 1024px) {
	.key-figures {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The card's column never grows with its content: "2007" may run into the body's right padding (as Figma at 375),
   and the label bar stays the card's width, wrapping as needed. */
.key-figure {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
	background: var(--color-ink);
	color: var(--color-white);
}

/* Figma: 32 padding and 24 gaps on desktop, 20 and 16 on mobile. */
.key-figure__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--grid-gutter);
	padding: min(var(--space-margin), var(--space-32));
	container-type: inline-size;
}

.key-figure__icon {
	position: relative;
	width: var(--icon-size);
	height: var(--icon-size);
	border: var(--border-hairline) solid;
}

.key-figure__drawing {
	position: absolute;
	inset: calc(var(--border-hairline) * -1);
	width: var(--icon-size);
	height: var(--icon-size);
}

/* Below 375 the cards are narrower than Figma's and "2007" would run out of its card: there the figure shrinks with
   the card (43.6cqi of the body's content width is just over the token's 52 at 375). From 375 up the token rules. */
.key-figure__value {
	font-size: min(var(--font-size-figure), 43.6cqi);
	white-space: nowrap;
}

/* The label bar (Figma 5:55): 40 tall for one line (12 above and below the 16 px line), the text 28 from the left. */
.key-figure__label {
	display: flex;
	align-items: center;
	min-height: var(--label-bar-height);
	padding: calc((var(--label-bar-height) - var(--line-height-eyebrow)) / 2) var(--space-16) calc((var(--label-bar-height) - var(--line-height-eyebrow)) / 2) var(--label-bar-text-inset);
	overflow-wrap: anywhere;
	background: var(--color-cement);
	color: var(--color-ink);
}

/* The Notch in Signal Green (the owner, 14 October 2026: "make the arrows green"). The cut shows the Ink card behind it, so the
   Cement bar moves to ::before (still masked by the brand's notch bar, as .notch in theme.css) and a green V, as deep as the
   cut (0.25 x the height) and as tall as the bar, fills it from ::after; the text sits above both. Decoration only. */
.key-figure__label.notch {
	position: relative;
	isolation: isolate;
	background: none;
	-webkit-mask: none;
	mask: none;
}

.key-figure__label.notch::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-cement);
	-webkit-mask:
		url('/assets/brand/notch/praspekt-notch-bar-40-ink.svg') left / auto 100% no-repeat,
		linear-gradient(var(--color-ink) 0 0) right / 50% 100% no-repeat;
	mask:
		url('/assets/brand/notch/praspekt-notch-bar-40-ink.svg') left / auto 100% no-repeat,
		linear-gradient(var(--color-ink) 0 0) right / 50% 100% no-repeat;
}

.key-figure__label.notch::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	height: 100%;
	aspect-ratio: 1 / 4;
	background: var(--color-signal-green);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The icons draw their strokes as the cards come in (1.2 s); the calendar's Dart appears when its lines are done. */
@media (prefers-reduced-motion: no-preference) {
	.motion-ready .key-figure__drawing path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		transition: stroke-dashoffset var(--motion-route-draw) var(--motion-ease) calc(var(--i, 0) * var(--motion-stagger));
	}

	.motion-ready .key-figure__drawing polygon {
		opacity: 0;
		transition: opacity var(--motion-reveal-duration) var(--motion-ease) calc(var(--i, 0) * var(--motion-stagger) + var(--motion-route-draw));
	}

	.motion-ready .key-figures.is-in .key-figure__drawing path {
		stroke-dashoffset: 0;
	}

	.motion-ready .key-figures.is-in .key-figure__drawing polygon {
		opacity: 1;
	}
}