/**
 * „Kategorie in Zahlen“ - ruhig auf jeder Breite.
 *
 * Die Zeilen stammen aus dem Steckbrief der Produktseite (`nx-facts__row`):
 * Bezeichnung links, Wert rechts, mit Umbruch. Bei kurzen Werten passt das.
 * Gemeldet an /bad/badausstattung/ am Handy: „Home Deluxe DE (342), Blitec DE
 * (233), NKD DE/AT (47)“ rutschte unter die Bezeichnung und stand dort
 * rechtsbündig über drei Zeilen, die Zeile darüber dagegen nebeneinander -
 * jede Zeile anders.
 *
 * Hier deshalb ein Raster: am Rechner zwei feste Spalten, Werte linksbündig;
 * am Handy die Bezeichnung über dem Wert. Nur für diesen Block (`nx-figures`),
 * der Steckbrief der Produktseite bleibt, wie er ist. Eine eigene Datei, weil
 * `style.css` an ihrer Zeilengrenze steht; geladen nur auf Kategorieseiten.
 */

.nx-figures .nx-facts__row {
	display: grid;
	grid-template-columns: minmax(10rem, 38%) minmax(0, 1fr);
	align-items: baseline;
	gap: 0.25rem 1rem;
}

.nx-figures .nx-facts__label {
	align-items: flex-start;
}

.nx-figures .nx-facts__label svg {
	flex: 0 0 auto;
}

.nx-figures .nx-facts__value {
	text-align: left;
	overflow-wrap: anywhere;
}

/* Material, Farbe, Form führen zum Filter - als Link erkennbar, nicht laut. */
.nx-figures .nx-facts__value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--nx-accent, #6a9a3a);
	text-underline-offset: 0.2em;
}

.nx-figures .nx-facts__value a:hover,
.nx-figures .nx-facts__value a:focus-visible {
	color: var(--nx-accent, #6a9a3a);
}

@media (max-width: 600px) {
	.nx-figures .nx-facts__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}

	.nx-figures .nx-facts__label {
		font-size: 0.85rem;
	}

	.nx-figures .nx-facts__value {
		padding-left: 1.6rem;
	}
}