/* =============================================================================
   DAAN – Flexibele pagina blokken (flex-page.css)
   Geladen alleen op pagina's met template page-flex.php.
   ============================================================================= */

/* ── Gedeeld: sectie-ritme ──────────────────────────────────────────────────── */
.fp-hero,
.fp-tekst,
.fp-tekst-afb,
.fp-kaarten,
.fp-testimonial,
.fp-cta {
	padding-top:    var(--section-gap);
	padding-bottom: var(--section-gap);
}

/* ── 1. Hero ─────────────────────────────────────────────────────────────────── */
/* Hergebruikt de dienst-hero klassen uit main.css — geen extra CSS nodig. */

/* ── 1b. Hero met tekst ──────────────────────────────────────────────────────── */
.fp-hero-tekst__text {
	gap: 1.25rem;
}

.fp-hero-tekst__heading {
	font-size:      clamp(2rem, 5vw, var(--size-5xl));
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.03em;
}

.fp-hero-tekst__body {
	font-size:   var(--size-base);
	line-height: 1.6;
	max-width:   32rem;
}

.fp-hero-tekst__body p      { margin-bottom: 1em; }
.fp-hero-tekst__body p:last-child { margin-bottom: 0; }
.fp-hero-tekst__body a      { text-decoration: underline; }
.fp-hero-tekst__body strong { font-weight: 500; }

.fp-hero-tekst__btn {
	margin-top: 0.5rem;
}

/* ── 2. Tekst ────────────────────────────────────────────────────────────────── */
.fp-tekst--bg-beige    { background-color: var(--color-beige); }
.fp-tekst--bg-wit      { background-color: var(--color-white); }
.fp-tekst--bg-petrol   { background-color: var(--color-petrol);   color: var(--color-white); }
.fp-tekst--bg-bordeaux { background-color: var(--color-bordeaux); color: var(--color-white); }

.fp-tekst--smal .fp-tekst__inner {
	max-width: 780px;
}
.fp-tekst--midden .fp-tekst__inner {
	text-align: center;
	margin:     0 auto;
}

.fp-tekst__eyebrow {
	margin-bottom: 0.75rem;
}
/* Eyebrow op donkere achtergrond: behoud leesbaarheid */
.fp-tekst--bg-petrol .eyebrow,
.fp-tekst--bg-bordeaux .eyebrow {
	color: rgba(255,255,255,0.6);
}

.fp-tekst__heading {
	font-size:      var(--size-3xl);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-bottom:  1.25rem;
}

.fp-tekst__body {
	font-size:     var(--size-base);
	line-height:   1.7;
	color:         var(--color-body-dark);
	margin-bottom: 2rem;
}
.fp-tekst--bg-petrol .fp-tekst__body,
.fp-tekst--bg-bordeaux .fp-tekst__body {
	color: rgba(255,255,255,0.85);
}
.fp-tekst__body p      { margin-bottom: 1em; }
.fp-tekst__body p:last-child { margin-bottom: 0; }
.fp-tekst__body a      { text-decoration: underline; }
.fp-tekst__body strong { font-weight: 500; }

.fp-tekst__btn { margin-top: 0.5rem; }

/* Witte knop op donkere achtergronden */
.fp-tekst--bg-petrol .fp-tekst__btn,
.fp-tekst--bg-bordeaux .fp-tekst__btn {
	background: var(--color-white);
	color:      var(--color-black);
}

@media (max-width: 767px) {
	.fp-tekst__heading { font-size: var(--size-xl); }
}

/* ── 3. Tekst + Afbeelding ───────────────────────────────────────────────────── */
.fp-tekst-afb__inner {
	display:     grid;
	grid-template-columns: 1fr 1fr;
	gap:         4rem;
	align-items: center;
}

/* Afbeelding rechts (standaard): tekst eerst in DOM → volgorde klopt al */
/* Afbeelding links: zet afbeelding op kolom 1 via order */
.fp-tekst-afb--tekst-rechts .fp-tekst-afb__image-wrap { order: -1; }

.fp-tekst-afb__heading {
	font-size:      var(--size-3xl);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-top:     0.75rem;
	margin-bottom:  1.25rem;
}

.fp-tekst-afb__text .eyebrow { margin-bottom: 0; }

.fp-tekst-afb__body {
	font-size:     var(--size-base);
	line-height:   1.7;
	color:         var(--color-body-dark);
	margin-bottom: 2rem;
}
.fp-tekst-afb__body p      { margin-bottom: 1em; }
.fp-tekst-afb__body p:last-child { margin-bottom: 0; }
.fp-tekst-afb__body a      { text-decoration: underline; }
.fp-tekst-afb__body strong { font-weight: 500; }

.fp-tekst-afb__image-wrap {
	border-radius: var(--hero-radius);
	overflow:      hidden;
	aspect-ratio:  4 / 3;
}

.fp-tekst-afb__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.fp-tekst-afb__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.fp-tekst-afb--tekst-rechts .fp-tekst-afb__image-wrap { order: 0; }
	.fp-tekst-afb__heading { font-size: var(--size-xl); }
}

/* ── 4. Kaarten ──────────────────────────────────────────────────────────────── */
.fp-kaarten__header {
	margin-bottom: 3rem;
}

.fp-kaarten__heading {
	font-size:      var(--size-3xl);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
	margin-top:     0.5rem;
}

.fp-kaarten__grid {
	display: grid;
	gap:     1.5rem;
}
.fp-kaarten__grid--2 { grid-template-columns: repeat(2, 1fr); }
.fp-kaarten__grid--3 { grid-template-columns: repeat(3, 1fr); }
.fp-kaarten__grid--4 { grid-template-columns: repeat(4, 1fr); }

.fp-kaart {
	padding:        2rem;
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

.fp-kaart__icon-wrap {
	width:  3rem;
	height: 3rem;
	flex-shrink: 0;
}

.fp-kaart__icon {
	width:  100%;
	height: 100%;
	object-fit: contain;
}

.fp-kaart__title {
	font-size:   var(--size-lg);
	font-weight: 500;
	line-height: 1.3;
}

.fp-kaart__text {
	font-size:  var(--size-base);
	line-height: 1.6;
	color:       var(--color-body-dark);
	flex: 1;
}

.fp-kaart__link {
	font-size:       var(--size-sm);
	font-weight:     500;
	text-decoration: underline;
	color:           var(--color-petrol);
	margin-top:      auto;
}
.fp-kaart__link:hover { opacity: 0.7; }

@media (max-width: 1024px) {
	.fp-kaarten__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.fp-kaarten__grid--2,
	.fp-kaarten__grid--3,
	.fp-kaarten__grid--4 { grid-template-columns: 1fr; }
	.fp-kaarten__heading  { font-size: var(--size-xl); }
}

/* ── 5. Testimonial ──────────────────────────────────────────────────────────── */
.fp-testimonial__inner {
	display:     flex;
	gap:         3rem;
	align-items: stretch;
}

.fp-testimonial__image-wrap {
	flex-shrink:   0;
	aspect-ratio:  1;
	border-radius: var(--hero-radius);
	overflow:      hidden;
}

.fp-testimonial__image {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.fp-testimonial__card {
	flex:           1;
	padding:        2.5rem;
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.fp-testimonial__eyebrow { color: var(--color-grey); }

.fp-testimonial__quote {
	font-size:   var(--size-lg);
	line-height: 1.5;
	font-weight: 400;
}

.fp-testimonial__auteur {
	font-size: var(--size-sm);
	color:     var(--color-grey);
}

@media (max-width: 900px) {
	.fp-testimonial__inner { flex-direction: column; }
	.fp-testimonial__image-wrap { aspect-ratio: 16 / 9; width: 100%; }
}

/* ── 6. CTA blok ─────────────────────────────────────────────────────────────── */
.fp-cta__inner {
	display: grid;
	gap:     1.5rem;
}

/* Één kaart: volle breedte; twee kaarten: naast elkaar */
.fp-cta__inner:has(.fp-cta-card:nth-child(2)) {
	grid-template-columns: 1fr 1fr;
}

.fp-cta-card {
	border-radius: var(--card-radius);
	padding:       3rem;
	display:       flex;
	flex-direction: column;
	gap:           1.5rem;
	justify-content: space-between;
}

.fp-cta-card--wit {
	background: var(--color-white);
}
.fp-cta-card--petrol {
	background: var(--color-petrol);
	color:      var(--color-white);
}
.fp-cta-card--bordeaux {
	background: var(--color-bordeaux);
	color:      var(--color-white);
}

.fp-cta-card__content {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.fp-cta-card--petrol .eyebrow,
.fp-cta-card--bordeaux .eyebrow {
	color: rgba(255,255,255,0.6);
}

.fp-cta-card__heading {
	font-size:      var(--size-3xl);
	font-weight:    400;
	line-height:    1.18;
	letter-spacing: -0.03em;
}

.fp-cta-card__body {
	font-size:  var(--size-base);
	line-height: 1.6;
	opacity:    0.85;
}

/* Witte knop op donkere kaarten */
.fp-cta-card__btn--light {
	background: var(--color-white);
	color:      var(--color-black);
}
.fp-cta-card__btn--light:hover {
	background: var(--color-beige);
}

@media (max-width: 767px) {
	.fp-cta__inner,
	.fp-cta__inner:has(.fp-cta-card:nth-child(2)) {
		grid-template-columns: 1fr;
	}
	.fp-cta-card { padding: 2rem; }
	.fp-cta-card__heading { font-size: var(--size-xl); }
}