/*
 * Key figures: heading, text and action in columns 1–5, the facts in
 * columns 6–12 as open columns of three (beneath the text below 80rem). Measured from the
 * reference at 1905 px: values 32 px serif, text 12/23 px, 146 px from one
 * row of values to the next; the frame 20 px inside the upper right corner,
 * its top line starting above the first column of facts.
 */
@layer blocks {
	.key-figures {
		position: relative;
		isolation: isolate;
		overflow: hidden;
	}

	.key-figures__surface {
		position: absolute;
		inset: 0;
		z-index: -1;
	}

	.key-figures__frame {
		display: none;
	}

	.key-figures__layout {
		display: grid;
		gap: var(--space-12) var(--grid-gap);
	}

	.key-figures__intro {
		display: grid;
		align-content: start;
	}

	.key-figures .section-head__standfirst {
		color: var(--muted-foreground);
	}

	.key-figures__action {
		margin-top: var(--space-8);
	}

	.key-figures__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-10) var(--grid-gap);
	}

	.key-figures__item {
		display: grid;
		align-content: start;
		gap: var(--space-4);
		min-width: 0;
	}

	.key-figures__value {
		font-family: var(--font-heading);
		font-size: var(--type-h4-size);
		line-height: var(--type-h4-line);
		font-variant-numeric: lining-nums;
		color: var(--detail);
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.key-figures__value--numeric {
		font-size: var(--type-h2-size);
		line-height: var(--type-h2-line);
	}

	.key-figures__text {
		max-width: 26ch;
		color: var(--muted-foreground);
		font-size: var(--type-caption-size);
		line-height: 1.5rem;
	}

	.key-figures__note {
		max-width: none;
		margin-top: var(--space-10);
		color: var(--subtle-foreground);
	}

	@media (min-width: 48rem) {
		.key-figures__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.key-figures__frame {
			display: block;
			top: var(--space-5);
			right: var(--space-5);
			bottom: var(--space-20);
			left: 22%;
		}

		.key-figures__layout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			align-items: start;
		}

		.key-figures__intro {
			grid-column: 1 / 6;
			padding-right: var(--space-10);
		}

		.key-figures__facts {
			grid-column: 6 / -1;
		}

		.key-figures--row .key-figures__facts {
			grid-column: 1 / -1;
		}

		.key-figures__list {
			row-gap: var(--space-14);
		}

		.key-figures--row .key-figures__list {
			grid-template-columns: repeat(var(--figure-count, 4), minmax(0, 1fr));
		}

		.key-figures__item {
			padding-right: var(--space-6);
		}
	}

	/* Small desktops: three columns beside the text would break the serif
	   values, so the facts run beneath it, as on tablets. */
	@media (min-width: 64rem) and (max-width: 79.99rem) {
		.key-figures__intro {
			grid-column: 1 / 8;
			padding-right: 0;
		}

		.key-figures__facts {
			grid-column: 1 / -1;
		}
	}
}