/**
 * Value Grid — centred header over compact gold-ruled value cards.
 * Typography via utilities; layout/card styling only here.
 */

.flexible-section.value-grid {
	background: var(--color-bg);
	padding-inline: var(--section-pad-x);
}

.value-grid-inner {
	max-width: var(--container-narrow);
	margin: 0 auto;
}

.value-grid-head {
	text-align: center;
}

.value-grid-head .section-ti {
	margin-block-end: 0;
}

.value-grid-sub {
	max-width: 750px;
	margin: 10px auto 0;
}

.value-grid-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(14px, 0.81vw + 11.1px, 22.5px);
	margin-top: clamp(28px, 2vw + 16px, 55px);
}

.value-grid-card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-gold2);
	border-radius: 10px;
	padding: clamp(20px, 1.09vw + 16.1px, 32.5px) clamp(18px, 1vw + 14.4px, 30px);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.value-grid-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px -20px rgba(0, 0, 128, 0.42);
}

.value-grid-vn {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.16vw + 7.4px, 12.5px);
	margin-bottom: clamp(9px, 0.4vw + 7.6px, 14px);
}

.value-grid-vn .d {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-gold2);
	flex-shrink: 0;
}

.value-grid-vn h3 { margin: 0; }
.value-grid-card p { margin: 0; }

@media (max-width: 1024px) {
	.value-grid-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.value-grid-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.value-grid-card { transition: none; }
	.value-grid-card:hover { transform: none; box-shadow: none; }
}