/**
 * Module: Our Values Section.
 * Loaded only when an `our_values_section` layout is present.
 * Section bg colour/image come from ACF (inline styles).
 */
.values-section {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
}

.values-section .values-title {
	color: #fff;
}
.values-section .values-small {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fuchs-fs-lead, 20px);
	font-weight: var(--fuchs-fw-regular, 400);
	margin-bottom: 1rem;
}
.values-section .values-detail {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.95rem;
}

/* Value cards — white cards on the dark surface. */
.values-section .value-card {
	height: 100%;
	background-color: #fff;
	border-radius: 12px;
	padding: 1.75rem;
	position: relative;
}

.values-section .value-icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--fuchs-teal-300, #70BCBD);
	margin-bottom: 1.1rem;
}
.values-section .value-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.values-section .value-title {
	color: var(--fuchs-text, #231F20);
	font-size: var(--fuchs-fs-h3, 24px);
	font-weight: var(--fuchs-fw-medium, 500);
	letter-spacing: 1px;
	margin-bottom: 0.6rem;
}
.values-section .value-desc {
	color: var(--fuchs-700, #656263);
	font-size: 0.95rem;
	font-weight: var(--fuchs-fw-light, 300);
	margin: 0;
}

@media (min-width: 992px) {
	.values-section .values-intro {
		padding-right: 1.5rem;
	}
}