/**
 * Numbered 3-up feature/value card grid — generic, reusable "why us"
 * pattern. Values confirmed directly from Design Refrance's `.val-grid`/
 * `.val` in TSI About.html. The page-level wrapper's own padding (e.g.
 * About page's `.ab-values`) lives in about-page.css, not here — this
 * file only styles the grid/cards themselves so the component is reusable
 * regardless of which page-level wrapper spacing surrounds it.
 */

.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.values-grid .val {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-top: 3px solid var(--color-primary);
	border-radius: 10px;
	padding: 26px 24px;
	transition: .18s;
}

.values-grid .val:hover {
	border-color: var(--color-line-mid);
}

.values-grid .vn {
	font-family: var(--font-secondary);
	font-weight: 900;
	font-size: 22px;
	color: var(--color-primary-deep);
	line-height: 1;
}

.values-grid .vh {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 19px;
	color: var(--color-ink);
	margin: 14px 0 8px;
}

.values-grid .vt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink-mid);
}

@media (max-width: 768px) {
	.values-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}