/* =========================================================================
   /prijzen/ — Transparante tarieven, geen verrassingen.
   Design source: design/Tarieven.dc.html (pixel values are authoritative).
   Every rule is scoped to .vvpage-prijzen (BUILD_SPEC §2).

   The price cards, the add-on rows and the FAQ accordion are registered
   patterns (vv/prijskaarten · vv/addon-rij · vv/faq-accordeon), so all of
   their rules — including the responsive counterparts — now live in the
   global style.css §9.9–§9.11 (0.5-N.3). Only the page hero and the page
   resets stay here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Layout resets — core's flow layout injects `> * + * { margin-block-start }`
      and body.vv gives <p> a bottom margin; this page drives spacing itself.
   ------------------------------------------------------------------------- */
.vvpage-prijzen .wp-block-group > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.vvpage-prijzen p {
	margin: 0;
}

/* The full-bleed release of the CTA band and the FAQ band (both direct
   children of the constrained page wrapper) is global — style.css §3.6. */

/* -------------------------------------------------------------------------
   1. Hero
   ------------------------------------------------------------------------- */
.vvpage-prijzen .vvp-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	padding: 88px 32px 64px;
}

.vvpage-prijzen .vvp-hero .vv-label {
	margin: 0;
}

.vvpage-prijzen .vvp-hero__title,
body.vv .vvpage-prijzen .vvp-hero__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.1;
	max-width: 680px;
	text-wrap: balance;
	color: var(--ink);
}

.vvpage-prijzen .vvp-hero__lead {
	max-width: 540px;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}

/* 2. Price cards   → style.css §9.9  (vv/prijskaarten) */
/* 3. Add-on rows   → style.css §9.10 (vv/addon-rij) */
/* 4. FAQ accordion → style.css §9.11 (vv/faq-accordeon) */

/* -------------------------------------------------------------------------
   5. Responsive — hero only; every promoted component keeps its own
      @media counterpart next to it in style.css §9.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vvpage-prijzen .vvp-hero {
		padding: 56px 20px 40px;
	}

	.vvpage-prijzen .vvp-hero__title,
	body.vv .vvpage-prijzen .vvp-hero__title {
		font-size: 34px;
	}

	.vvpage-prijzen .vvp-hero__lead {
		font-size: 15px;
	}
}