/* ──────────────────────────────────────────────────────────────────────────
   Site — herbruikbare componenten (component library).

   Hier komen kleine stijlen die de pre-gemaakte secties uit de
   component-library aanvullen op de bestaande site-CSS. De meeste
   classes (.fwr, .gridContainer, .info_wrap, .image_wrap, .common_title,
   .top_curve_rev, .bot_curve, .both_curve, .animwave, .ggradient,
   .pattern_bg) bestaan al — alleen de `cms-*` naamruimte hieronder is
   nieuw.
   ────────────────────────────────────────────────────────────────────── */

/* ── tekst + afbeelding sectie ───────────────────────────────────────── */

.cms-textimg {
    padding: 100px 0;
    position: relative;
}

.cms-textimg--light {
    background-color: var(--gd-cream, #FFF7E6);
    color: #003E1F;
}
.cms-textimg--light .common_title,
.cms-textimg--light .desc_wrap,
.cms-textimg--light p { color: #003E1F; }

.cms-textimg--dark {
    /* .ggradient + .pattern_bg vullen de groene achtergrond al in. */
    color: #FFF7E6;
}
.cms-textimg--dark .common_title,
.cms-textimg--dark .desc_wrap,
.cms-textimg--dark p { color: #FFF7E6; }
.cms-textimg--dark a { color: #D39E45; }

.cms-textimg__row {
    display: flex;
    align-items: center;
    gap: 60px;
}
@media (max-width: 991px) {
    .cms-textimg__row { flex-direction: column; gap: 30px; }
    .cms-textimg { padding: 60px 0; }
}

/* Image-side: links — flexbox row-reverse zet de foto links, tekst rechts. */
.cms-textimg__row--rev { flex-direction: row-reverse; }
@media (max-width: 991px) {
    .cms-textimg__row--rev { flex-direction: column; }
}