/* Block: Waarden en mensen. Three looks on one grid:
 * values = ruled columns (like the promises), people = name and role on a rule, no photo (B7),
 * cards  = filled rounded tiles. The tone tints the cards or a small band mark, never the text area. */
.values {
	--v-cols: 3;
	--v-bg: var(--beige);
	--v-c: var(--green);
}
.values--cols-2 { --v-cols: 2; }
.values--cols-4 { --v-cols: 4; }
.values.tone-web { --v-bg: var(--web-tint); --v-c: var(--web); }
.values.tone-dm { --v-bg: var(--dm-tint); --v-c: var(--dm); }
.values.tone-camp { --v-bg: var(--camp-tint); --v-c: var(--camp); }
.values.tone-culture { --v-bg: var(--culture-tint); --v-c: var(--culture); }
/* A card that links to another service carries that service's colour (values.php sets it). */
.values .value.tone-web { --v-bg: var(--web-tint); --v-c: var(--web); }
.values .value.tone-dm { --v-bg: var(--dm-tint); --v-c: var(--dm); }
.values .value.tone-camp { --v-bg: var(--camp-tint); --v-c: var(--camp); }

.values-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--v-cols), minmax(0, 1fr));
}
.value { display: grid; gap: 14px; align-content: start; justify-items: start; }
.value h3 { font-size: var(--fs-h3); line-height: 1.1; }
.value-body { font-size: var(--fs-small); color: var(--ink-soft); max-width: 30em; }
.value .textlink { margin-top: 8px; }

/* An item with a link is clickable as a whole: the textlink stretches over the card (still one link for
 * screen readers and the keyboard). Hovering anywhere moves the arrow; focus outlines the whole card. */
.value--link { position: relative; }
.value--link .textlink::after { content: ""; position: absolute; inset: 0; }
.value--link .textlink:focus-visible { outline: 0; }
.value--link:has(.textlink:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }

/* Values: a green rule on top, thin dividers between the columns. */
.values--values .values-grid { border-top: 1px solid var(--green); row-gap: 40px; }
.values--values .value { padding: 28px 28px 8px; border-left: 1px solid var(--line); }
.values--values .value h3 { font-size: clamp(30px, 2.8vw, 40px); }
.value-mark {
	display: block;
	width: 40px;
	height: 14px;
	background: var(--v-c);
	transform: skewX(var(--band-skew));
	margin-bottom: 4px;
}

/* People: name in the serif, role underneath, a rule above each person. */
.values--people .values-grid { column-gap: var(--gap); row-gap: 48px; }
.values--people .value { border-top: 1px solid var(--green); padding-top: 22px; gap: 8px; }
.value-role { color: var(--ink-soft); }
.values--people .value-body { margin-top: 8px; }

/* Cards: filled tiles in beige or the chosen tone. */
.values--cards .values-grid { gap: var(--gap); }
.values--cards .value {
	background: var(--v-bg);
	border-radius: var(--radius-l);
	padding: clamp(24px, 2.4vw, 36px);
	min-height: 220px;
	grid-template-rows: auto 1fr auto;
}
.values--cards .value-body { color: var(--green); }
.values--cards .value .textlink { align-self: end; }

/* The studio line brings its own rule and top space (as after the cases block on home): no double gap. */
.values:has(+ .studio-line) { padding-bottom: 0; }

/* Cards in three columns: an unfinished last row is centred (5 cards = 3 + 2), no hole on the right.
 * A six-track grid where every card spans two tracks; the first card of a short last row shifts in. */
@media (min-width: 901px) {
	.values--cards.values--cols-3 .values-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.values--cards.values--cols-3 .value { grid-column: span 2; }
	.values--cards.values--cols-3 .value:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
	.values--cards.values--cols-3 .value:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
/* Same idea in two columns (tablet): a single last card sits in the middle. */
@media (min-width: 601px) and (max-width: 900px) {
	.values--cards.values--cols-3 .values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.values--cards.values--cols-3 .value { grid-column: span 2; }
	.values--cards.values--cols-3 .value:nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}

/* Column rules per row: the first column of each row has no left divider. */
.values--cols-2.values--values .value:nth-child(2n+1),
.values--cols-3.values--values .value:nth-child(3n+1),
.values--cols-4.values--values .value:nth-child(4n+1) { border-left: 0; padding-left: 0; }

@media (max-width: 1180px) {
	.values--cols-4 { --v-cols: 2; }
	.values--cols-4.values--values .value:nth-child(n) { border-left: 1px solid var(--line); padding-left: 28px; }
	.values--cols-4.values--values .value:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
	.values--cols-3 { --v-cols: 2; }
	.values--cols-3.values--values .value:nth-child(n) { border-left: 1px solid var(--line); padding-left: 28px; }
	.values--cols-3.values--values .value:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
	.values { --v-cols: 1; }
	.values .values-grid { grid-template-columns: 1fr; }
	.values--values .values-grid { row-gap: 0; }
	.values.values--values .value:nth-child(n) { border-left: 0; padding: 24px 0 28px; }
	.values--values .value + .value { border-top: 1px solid var(--line); }
	.values--cards .value { min-height: 0; }
}