/* =============================================================
   Et Vincam — gedeelde interieur-pagina componenten (pages.css)
   Gebruikt door Over mij, Werkwijze, Tarieven en Contact.
   Globale tokens/nav/footer/knoppen/foto's staan in theme.css.
   ============================================================= */

/* ---- Pagina-header (groene band) ---- */
.vc-pagehead {
	position: relative; padding: 72px 44px; text-align: center;
	min-height: 360px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg,#3D4B3C,#5C6E55); /* fallback; foto+overlay via inline style */
}
.vc-pagehead__inner { position: relative; z-index: 1; color: var(--vc-on-dark); max-width: 700px; margin-inline: auto; }
.vc-pagehead__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: rgba(247,244,236,.72); }
.vc-pagehead__title { font-size: 38px; line-height: 1.3; margin: 18px 0 0; color: var(--vc-on-dark); }
.vc-pagehead__text { font-size: 17px; line-height: 1.7; color: rgba(247,244,236,.85); margin: 18px auto 0; max-width: 560px; }
.vc-pagehead__caption {
	position: absolute; left: 20px; bottom: 14px; z-index: 1;
	font-family: var(--vc-mono); font-size: 11px; color: rgba(255,255,255,.5);
}

/* ---- Secties & containers ---- */
.vc-section { padding-block: 84px; }
.vc-section--72 { padding-block: 72px; }
.vc-section--80 { padding-block: 80px; }
.vc-section--76 { padding-block: 76px; }
.vc-section--pb { padding: 0 0 84px; }
.vc-container--narrow { max-width: 760px; }
.vc-band-cream { background: var(--vc-cream-card); border-top: 1px solid var(--vc-border); border-bottom: 1px solid var(--vc-border); }
.vc-band-cream--single { border-bottom: 0; }
.vc-band-green { background: var(--vc-green-700); color: var(--vc-on-dark); }

/* ---- Sectiekop (eyebrow + titel) ---- */
.vc-sectiontitle { font-size: 28px; line-height: 1.35; margin: 14px 0 0; color: var(--vc-text); }
.vc-sectionhead { margin-bottom: 36px; }
.vc-prose { font-size: 16px; line-height: 1.8; color: var(--vc-body); }
.vc-prose p + p { margin-top: 16px; }

/* ---- Media-hoogtes ---- */
.vc-h240 { min-height: 240px; }
.vc-h280 { min-height: 280px; }
.vc-h300 { min-height: 300px; }
.vc-h440 { min-height: 440px; }

/* ---- Split-layouts (tekst + media / twee kolommen) ---- */
.vc-split { max-width: 1080px; margin-inline: auto; padding: 84px var(--vc-pad-x); display: grid; gap: 56px; align-items: start; }
.vc-split--text-media { grid-template-columns: 1fr 380px; }
.vc-split--media-text { grid-template-columns: 380px 1fr; align-items: center; }
.vc-split--40-60 { grid-template-columns: 360px 1fr; }
.vc-split--60-40 { grid-template-columns: 400px 1fr; }
.vc-split--half { grid-template-columns: 1fr 1fr; }
.vc-split__media { position: relative; border-radius: 4px; overflow: hidden; min-height: 300px; }

/* ---- Kaarten (3-up), herbruikt van home ---- */
.vc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vc-card { background: #fff; border: 1px solid var(--vc-border-2); border-radius: 4px; overflow: hidden; }
.vc-card__media { height: 150px; }
.vc-card__body { padding: 24px; }
.vc-card__title { font-size: 18px; font-weight: 700; color: var(--vc-green-700); }
.vc-card__text { font-size: 14px; line-height: 1.65; color: var(--vc-muted); margin-top: 8px; }

/* ---- Info-kaarten (crème blokken, 2-up) ---- */
.vc-infocards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vc-infocard { background: var(--vc-cream-nav); border: 1px solid var(--vc-border); border-radius: 4px; padding: 36px; }
.vc-infocard__title { font-size: 23px; font-weight: 300; line-height: 1.35; margin: 12px 0 0; color: var(--vc-text); }
.vc-infocard__text { font-size: 15px; line-height: 1.75; color: var(--vc-body); margin: 14px 0 0; }

/* ---- Bullet-lijst (methodieken / vergoeding) ---- */
.vc-bullets { display: flex; flex-direction: column; }
.vc-bullet { display: flex; gap: 18px; align-items: baseline; padding: 16px 4px; border-top: 1px solid var(--vc-border); font-size: 16px; line-height: 1.6; color: var(--vc-body); }
.vc-bullet:last-child { border-bottom: 1px solid var(--vc-border); }
.vc-bullet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-green-500); flex-shrink: 0; position: relative; top: 6px; }
.vc-note { font-size: 14px; font-style: italic; color: var(--vc-faint); margin: 22px 0 0; }

/* vergoeding-varianten: bullets in losse crème kaarten */
.vc-bulletcards { display: flex; flex-direction: column; gap: 14px; }
.vc-bulletcard { background: var(--vc-cream-nav); border: 1px solid var(--vc-border); border-radius: 4px; padding: 22px 26px; display: flex; gap: 16px; align-items: baseline; font-size: 15px; line-height: 1.7; color: var(--vc-body); }
.vc-bulletcard::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vc-green-500); flex-shrink: 0; position: relative; top: 6px; }

/* ---- Prijslijst (Tarieven) ---- */
.vc-pricelist { background: #fff; border: 1px solid var(--vc-border-2); border-radius: 4px; overflow: hidden; }
.vc-pricerow { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 26px 32px; }
.vc-pricerow + .vc-pricerow { border-top: 1px solid var(--vc-cream-card); }
.vc-pricerow__name { font-size: 17px; font-weight: 700; color: var(--vc-green-700); }
.vc-pricerow__meta { font-size: 13.5px; color: var(--vc-faint); margin-top: 3px; }
.vc-pricerow__price { font-size: 22px; font-weight: 300; color: var(--vc-text); }
.vc-pricenote { font-size: 13.5px; color: var(--vc-faint); margin: 14px 4px 0; text-align: right; }

/* ---- Datatabel (praktische gegevens) ---- */
.vc-datatable { display: flex; flex-direction: column; }
.vc-datarow { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 16px 4px; border-top: 1px solid #DCD3BF; font-size: 15px; line-height: 1.6; }
.vc-datarow:last-child { border-bottom: 1px solid #DCD3BF; }
.vc-datarow__key { font-weight: 700; color: var(--vc-green-700); }
.vc-datarow__val { color: var(--vc-body); }

/* ---- Contact-kaart + kaart(map) ---- */
.vc-contactgrid { max-width: 1080px; margin-inline: auto; padding: 84px var(--vc-pad-x) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.vc-contactcard { background: #fff; border: 1px solid var(--vc-border-2); border-radius: 4px; padding: 40px; }
.vc-contactcard__block { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.vc-contactcard__label { font-size: 13px; color: var(--vc-faint); margin-bottom: 4px; }
.vc-contactcard__value { font-size: 19px; font-weight: 700; color: var(--vc-green-700); }
.vc-contactcard__divider { margin-top: 32px; border-top: 1px solid var(--vc-cream-card); padding-top: 28px; }
.vc-contactcard__address { font-size: 16px; line-height: 1.8; color: var(--vc-body); margin-top: 14px; }
.vc-map { border-radius: 4px; overflow: hidden; border: 1px solid var(--vc-border-2); min-height: 420px; display: flex; }
.vc-map iframe { border: 0; width: 100%; min-height: 420px; }

/* ---- Gecentreerde band-CTA ---- */
.vc-bandcta { padding: 76px 44px; text-align: center; }
.vc-bandcta__title { font-size: 28px; line-height: 1.35; max-width: 640px; margin-inline: auto; }
.vc-bandcta__title--onlight { color: var(--vc-text); }
.vc-bandcta__text { font-size: 16px; line-height: 1.8; margin: 20px auto 0; max-width: 620px; }
.vc-bandcta__actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 860px) {
	.vc-pagehead { padding: 56px 24px; min-height: 260px; }
	.vc-pagehead__title { font-size: 30px; }
	.vc-split { grid-template-columns: 1fr !important; gap: 24px; padding: 56px 24px; }
	.vc-section { padding-block: 56px; }
	.vc-section--72, .vc-section--80, .vc-section--76 { padding-block: 56px; }
	.vc-cards { grid-template-columns: 1fr; gap: 18px; }
	.vc-infocards { grid-template-columns: 1fr; }
	.vc-contactgrid { grid-template-columns: 1fr; padding: 56px 24px; }
	.vc-datarow { grid-template-columns: 1fr; gap: 4px; }
	.vc-sectiontitle { font-size: 24px; }
}