/* =========================================================================
   HOME — /  (design/Home.dc.html)
   Every rule is scoped to `.vvpage-home`.
   Sections: hero concept wall · sage stats band · diensten · concepten-teaser
             · proces · prijzen-teaser · CTA band (global chrome).
   ========================================================================= */

/* 0. Layout plumbing — the constrained-wrapper unclamp (max-width + the 24px
   sibling gap) and the full-bleed CTA band now live in style.css §3.6. */

/* =========================================================================
   1. HERO — full-bleed concepten-wand + centred content
   ========================================================================= */
.vvpage-home .vv-hero {
	position: relative;
	overflow: hidden;
	background: #2C2420;
}

/* 1.1 The decorative wall (Query Loop over `concept`, perPage 8).
   Absolutely positioned so the hero height is driven by the copy and can
   never be shorter than the content on an odd viewport. */
.vvpage-home .vv-hero__wall {
	position: absolute;
	inset: 0;
	padding: 14px;
	opacity: .5;
	transform: rotate(-3deg) scale(1.08);
	pointer-events: none;
	user-select: none;
}

.vvpage-home .vv-hero-wall { margin: 0; }

.vvpage-home .vv-hero-wall__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vvpage-home .vv-hero-wall__items .wp-block-post { margin: 0; }

.vvpage-home .vv-hero-wall__shot,
.vvpage-home .vv-hero-wall__items figure { margin: 0; height: 100%; }

.vvpage-home .vv-hero-wall__items img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	border-radius: 10px;
}

/* Per-position geometry — the documented fidelity exception (SITE_PLAN §3):
   heights and offsets come from nth-child, never from 8 hardcoded images. */
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(1) { height: 250px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(2) { height: 320px; margin-top: 40px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(3) { height: 250px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(4) { height: 320px; margin-top: 40px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(5) { height: 290px; margin-top: -48px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(6) { height: 240px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(7) { height: 290px; margin-top: -48px; }
.vvpage-home .vv-hero-wall__items .wp-block-post:nth-child(8) { height: 240px; }

/* 1.2 Radial darkening veil */
.vvpage-home .vv-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center,
		rgba(44, 36, 32, .88) 30%,
		rgba(44, 36, 32, .55) 70%,
		rgba(44, 36, 32, .75) 100%);
}

/* 1.3 Hero content */
.vvpage-home .vv-hero__content {
	position: relative;
	z-index: 2;
	min-height: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 118px var(--gutter);
}
.vvpage-home .vv-hero__content > * { margin-block-start: 0; margin-block-end: 0; }

.vvpage-home .vv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 20px;
	color: var(--terra-2);
}
.vvpage-home .vv-hero__eyebrow p,
.vvpage-home .vv-hero__eyebrow .vv-figure { margin: 0; }

.vvpage-home .vv-hero__title {
	margin: 0 0 22px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 62px;
	line-height: 1.06;
	color: var(--sand);
	max-width: 720px;
	text-wrap: balance;
}
.vvpage-home .vv-hero__title em { font-style: italic; color: var(--sage-lt); }

.vvpage-home .vv-hero__lead {
	margin: 0 0 32px;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(247, 243, 238, .8);
	max-width: 480px;
}

.vvpage-home .vv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 26px;
}
.vvpage-home .vv-hero__actions p { margin: 0; }
.vvpage-home .vv-hero__actions .vv-btn--outline-light:hover {
	border-color: var(--sage-lt);
	color: var(--sage-lt);
}

.vvpage-home .vv-hero__proof {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .32em;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--on-ink);
}
.vvpage-home .vv-hero__proof p,
.vvpage-home .vv-hero__proof .vv-figure { margin: 0; }
.vvpage-home .vv-hero__stars {
	color: var(--terra-2);
	letter-spacing: 1px;
	margin-right: .4em;
}
.vvpage-home .vv-hero__proof-rule {
	display: block;
	width: 1px;
	height: 16px;
	background: rgba(247, 243, 238, .25);
	margin: 0 .6em;
}

.vvpage-home .vv-hero__note {
	margin: 22px 0 0;
	font-size: 13.5px;
	font-weight: 300;
	color: var(--on-ink-soft);
}
.vvpage-home .vv-hero__note a { color: var(--terra-2); font-weight: 600; }
.vvpage-home .vv-hero__note a:hover { color: var(--terra-lt); }

/* =========================================================================
   2. SAGE STATS BAND
   ========================================================================= */
/* vv/stats-band — promoted to style.css §9 (0.5-N.3). */

/* =========================================================================
   3. DIENSTEN — split intro + 3 service cards
   ========================================================================= */
.vvpage-home .vv-services { background: var(--sand); }

.vvpage-home .vv-services__inner {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
	padding: 110px var(--gutter) 90px;
}
.vvpage-home .vv-services__inner > * { margin-block-start: 0; margin-block-end: 0; }

/* vv/split-intro — promoted to style.css §9 (0.5-N.3). */

/* vv/service-cards — promoted to style.css §9 (0.5-N.3). */

/* =========================================================================
   4. CONCEPTEN-TEASER — text + dynamic 2×2 (Query Loop, perPage 4)
   ========================================================================= */
.vvpage-home .vv-concepts { background: #fff; }

.vvpage-home .vv-concepts__inner {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
	padding: 96px var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: center;
}
.vvpage-home .vv-concepts__inner > * { margin-block-start: 0; margin-block-end: 0; }

.vvpage-home .vv-concepts__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.vvpage-home .vv-concepts__text > * { margin-block-start: 0; margin-block-end: 0; }
.vvpage-home .vv-concepts__text .vv-label { margin: 0 0 16px; }
.vvpage-home .vv-concepts__title {
	margin: 0 0 18px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
}
.vvpage-home .vv-concepts__lead {
	margin: 0 0 30px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}
.vvpage-home .vv-concepts__action { margin: 0; }

.vvpage-home .vv-concepts__tiles { display: block; text-decoration: none; }
.vvpage-home .vv-concept-teaser { margin: 0; }

.vvpage-home .vv-concept-teaser__items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vvpage-home .vv-concept-teaser__items .wp-block-post {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(44, 36, 32, .08);
	box-shadow: var(--shadow-card);
	transition: box-shadow .3s, transform .3s;
}
/* Design: the 2nd and 4th tile drop 26px */
.vvpage-home .vv-concept-teaser__items .wp-block-post:nth-child(2n) { margin-top: 26px; }
.vvpage-home .vv-concept-teaser__items figure { margin: 0; }
.vvpage-home .vv-concept-teaser__items img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: top;
}
.vvpage-home .vv-concepts__tiles:hover .wp-block-post {
	box-shadow: var(--shadow-lift);
	transform: translateY(-3px);
}

/* =========================================================================
   5. PROCES — text + 3 steps
   ========================================================================= */
.vvpage-home .vv-process { background: var(--sand-2); }

.vvpage-home .vv-process__inner {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
	padding: 96px var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}
.vvpage-home .vv-process__inner > * { margin-block-start: 0; margin-block-end: 0; }

.vvpage-home .vv-process__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.vvpage-home .vv-process__text > * { margin-block-start: 0; margin-block-end: 0; }
.vvpage-home .vv-process__text .vv-label { margin: 0 0 16px; }
.vvpage-home .vv-process__title {
	margin: 0 0 18px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
}
.vvpage-home .vv-process__lead {
	margin: 0 0 30px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}
.vvpage-home .vv-process__action { margin: 0; }

/* vv/process-steps — promoted to style.css §9 (0.5-N.3). */

/* =========================================================================
   6. PRIJZEN-TEASER — text + 3 rows (amounts via vv/figure)
   ========================================================================= */
.vvpage-home .vv-pricing { background: var(--sand); }

.vvpage-home .vv-pricing__inner {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
	padding: 96px var(--gutter);
}
.vvpage-home .vv-pricing__inner > * { margin-block-start: 0; margin-block-end: 0; }

/* vv/prijzen-teaser (eyebrow + heading + cards + Zorgplan band) — promoted to style.css §9 (0.5-N.3). */

/* =========================================================================
   7. RESPONSIVE — ≤ 900px : stack every grid, hide the hero wall,
      shrink the display type, zero horizontal overflow.
   ========================================================================= */
@media (max-width: 900px) {

	.vvpage-home .vv-hero__wall,
	.vvpage-home .vv-hero__veil { display: none; }

	.vvpage-home .vv-hero__content {
		min-height: 0;
		padding: 72px var(--gutter);
	}
	.vvpage-home .vv-hero__title { font-size: 36px; line-height: 1.1; }
	.vvpage-home .vv-hero__lead { font-size: 15px; }
	.vvpage-home .vv-hero__actions .vv-btn { min-height: 44px; }

	.vvpage-home .vv-services__inner { padding: 64px var(--gutter) 56px; }

	.vvpage-home .vv-concepts__inner,
	.vvpage-home .vv-process__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 64px var(--gutter);
	}
	.vvpage-home .vv-pricing__inner { padding: 64px var(--gutter); }
	.vvpage-home .vv-concepts__title,
	.vvpage-home .vv-process__title { font-size: 31px; }

	.vvpage-home .vv-concept-teaser__items { gap: 12px; }
	.vvpage-home .vv-concept-teaser__items .wp-block-post:nth-child(2n) { margin-top: 0; }
	.vvpage-home .vv-concept-teaser__items img { height: 150px; }
}

@media (max-width: 600px) {

	.vvpage-home .vv-hero__title { font-size: 30px; }
	.vvpage-home .vv-hero__actions { width: 100%; flex-direction: column; align-items: stretch; }
	.vvpage-home .vv-hero__actions .vv-btn { display: block; text-align: center; }
	.vvpage-home .vv-hero__proof { font-size: 12px; }
	.vvpage-home .vv-hero__proof-rule { display: none; }

}