/**
 * Block 2 - DLS Home: KPI Strip (DLS-142)
 * Ported from Homepage.html `.kpi` (r61). Variables come from ss-brand-tokens.css.
 */
.dls-kpi {
	background: var(--surface-neutral);
	display: flex;
	gap: var(--s-xxl);
	align-items: center;
	justify-content: center;
	padding: var(--s-xl) max(var(--pad), calc((100% - var(--content)) / 2));
	min-height: 105px;
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dls-kpi *, .dls-kpi *::before, .dls-kpi *::after { box-sizing: border-box; }

.dls-kpi .dls-kpi__item { display: flex; gap: 12px; align-items: flex-start; }
.dls-kpi .dls-kpi__num {
	margin: 0;
	color: var(--discovery-purple);
	font-size: var(--fs-xxl);
	line-height: var(--lh-xxl);
	font-weight: 400;
	text-align: right;
	min-width: 110px;
	flex: none;
	font-variant-numeric: tabular-nums;
}
.dls-kpi .dls-kpi__lbl {
	margin: 0;
	color: var(--para);
	font-size: var(--fs-xxs);
	line-height: var(--lh-xxs);
	font-weight: 400;
	width: 220px;
}
/* template: first number column 115px, the others 110px */
.dls-kpi .dls-kpi__item:first-child .dls-kpi__num { min-width: 115px; }
/* the longest label (3rd item in the design) gets the wider column */
.dls-kpi .dls-kpi__item:nth-child(3) .dls-kpi__lbl { width: 300px; }

@media (max-width: 1500px) {
	.dls-kpi { gap: 40px; }
}
@media (max-width: 1240px) {
	.dls-kpi { flex-wrap: wrap; gap: 28px 40px; padding: var(--s-lg) var(--pad); align-items: flex-start; }
	.dls-kpi .dls-kpi__num,
	.dls-kpi .dls-kpi__item:first-child .dls-kpi__num { width: auto; min-width: 96px; }
	.dls-kpi .dls-kpi__lbl,
	.dls-kpi .dls-kpi__item:nth-child(3) .dls-kpi__lbl { width: min(240px, 42vw); }
}

/* label is rich text now (a <div> holding the editor's own paragraphs): keep the look of the old plain label */
.dls-kpi .dls-kpi__lbl p { margin: 0; font: inherit; color: inherit; }
.dls-kpi .dls-kpi__lbl p + p { margin-top: var(--s-xxs); }
.dls-kpi .dls-kpi__lbl strong, .dls-kpi .dls-kpi__lbl b { font-weight: 700; }
.dls-kpi .dls-kpi__lbl a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-kpi .dls-kpi__lbl a:hover { color: var(--orange); }