/**
 * Werte-Stripe — Editorial-Layout, KEINE Cards (DESIGN.md §7.7)
 *
 * Vier Werte in vier Spalten auf Desktop, mit dünnen vertikalen Trennlinien.
 * Zwei Spalten auf Tablet, eine Spalte auf Mobile. Keine Cards, keine Schatten.
 */

.values-stripe {
	background-color: var(--color-cream);
	border-block-start: 1px solid var(--color-border-subtle);
	border-block-end: 1px solid var(--color-border-subtle);
}

.values-stripe__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.values-stripe__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.values-stripe__inner {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-8);
	}
}

.values-stripe__item {
	position: relative;
}

@media (min-width: 1024px) {
	.values-stripe__item:not(:last-child) {
		padding-inline-end: var(--space-6);
		border-inline-end: 1px solid var(--color-border-medium);
	}
}

.values-stripe__number {
	font-family: var(--font-sans);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-honey);
	line-height: 1;
	margin-bottom: var(--space-3);
	letter-spacing: var(--letter-spacing-tight);
}

.values-stripe__name {
	font-family: var(--font-sans);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	line-height: var(--line-height-snug);
	margin-bottom: var(--space-2);
}

.values-stripe__description {
	font-size: var(--font-size-body-sm);
	color: var(--color-text-secondary);
	line-height: var(--line-height-relaxed);
	max-width: 32ch;
}