/*
 * Block: Cijfers (.figures-block). Measured figures in columns under a green rule, like the promises row.
 * Padding only at the top, as the cases block does: the next block (often the Otto line) follows close.
 */

.figures-block { padding-block: var(--sp-section) 0; }

.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--green); }
.figures--1 { grid-template-columns: minmax(0, 1fr); }
.figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.figure { padding: 28px 28px 4px 0; display: grid; gap: 10px; align-content: start; }
.figure + .figure { padding-left: 28px; border-left: 1px solid var(--line); }

.figure-value { display: flex; align-items: baseline; gap: 6px; min-height: clamp(64px, 6.6vw, 100px); font-family: var(--serif); font-weight: 300; letter-spacing: -0.025em; line-height: 0.95; }
.figure-value .num { font-size: var(--t-closer); }
.figure-value .unit { font-size: var(--fs-h3); }
.figure-label { font-weight: 400; max-width: 22em; }
.figure-period { font-size: var(--fs-small); color: var(--ink-soft); }


@media (max-width: 1180px) {
	.figures, .figures--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.figures .figure:nth-child(3) { padding-left: 0; border-left: 0; }
	.figures .figure:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 8px; }
}
@media (max-width: 560px) {
	.figures, .figures--2, .figures--3 { grid-template-columns: 1fr; }
	.figure, .figure + .figure { padding-left: 0; border-left: 0; }
	.figure + .figure { border-top: 1px solid var(--line); margin-top: 8px; }
}

.figures-block:last-child { padding-bottom: var(--sp-block); }