/* =========================================================================
   Kennismaken CTA (beeld + tekst)
   - Twee kolommen: beeld (cover, vult de volle hoogte) naast een donker
     tekstpaneel met titel en twee buttons.
   - Alle maten komen uit CSS-variabelen die de Elementor-controls zetten
     (zie kennismaken-cta.php).
   - Onder 768px staan beeld en tekst onder elkaar.
   ========================================================================= */

.rw-cta {
    /* Overschrijfbaar via de Elementor-controls. */
    --rw-cta-bg: var(--dark-grey, #131931);
    --rw-cta-title-color: #fff;
    --rw-cta-text-color: var(--S---Light-grey-4, #F7F8F8);
    --rw-cta-media-width: 51%;
    --rw-cta-media-mobile-height: 18rem;
    --rw-cta-title-width: 28rem;
    --rw-cta-text-width: 24rem;
    --rw-cta-content-justify: center;
    --rw-cta-content-gap: 2.5rem;
    --rw-cta-actions-gap: 1rem;

    position: relative;
    display: grid;
    grid-template-columns: var(--rw-cta-media-width) 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--rw-cta-bg);
}

/* Beeld rechts: kolombreedtes omdraaien en het beeld achter het paneel
   plaatsen in de bronvolgorde-onafhankelijke grid-order. */
.rw-cta--media-right {
    grid-template-columns: 1fr var(--rw-cta-media-width);
}

.rw-cta--media-right .rw-cta__media {
    order: 2;
}

/* Zonder beeld vult het paneel de hele sectie. */
.rw-cta--no-media {
    grid-template-columns: 1fr;
}

/* De container is horizontaal gecentreerd; (50% - 50vw) is negatief en trekt
   beide randen door tot de viewport-rand. Staat de sectie al op volledige
   breedte, dan is de waarde 0 en verandert er niets. */
.rw-cta--bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --- Beeldkolom --------------------------------------------------------- */
/* Het beeld staat absoluut, zodat het nooit de rijhoogte bepaalt: de hoogte
   volgt het tekstpaneel (of de minimale hoogte van de sectie). */
.rw-cta__media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.rw-cta .rw-cta__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important; /* verslaat de globale img { height: auto } */
    object-fit: cover;
    object-position: center center;
}

/* --- Tekstpaneel -------------------------------------------------------- */
.rw-cta__panel {
    display: flex;
    align-items: center;
    justify-content: var(--rw-cta-content-justify);
    box-sizing: border-box;
    min-width: 0;
    padding: 5rem 3rem;
    background-color: var(--rw-cta-bg);
}

/* De max-breedtes zitten op de titel en de tekst zelf (zie onder), niet op dit
   blok: zo houdt de buttonrij haar eigen breedte en blijven de buttons naast
   elkaar staan. fit-content laat het blok krimpen tot z'n breedste kind, zodat
   het als geheel gecentreerd kan worden in het paneel. */
.rw-cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--rw-cta-content-gap);
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
}

/* --- Titel -------------------------------------------------------------- */
.rw-cta__title,
.rw-cta .rw-cta__title span,
.rw-cta .rw-cta__title em,
.rw-cta .rw-cta__title i,
.rw-cta .rw-cta__title strong,
.rw-cta .rw-cta__title b {
    color: var(--rw-cta-title-color) !important; /* overschrijft de heading-kleur van thema/Elementor */
}

.rw-cta__title {
    margin: 0;
    max-width: var(--rw-cta-title-width);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
    line-height: 1.2;
}

/* Accentregel: het thema zet h_ span al op display:block met een linkermarge —
   die marge hier weghalen zodat de regel netjes onder de eerste uitlijnt. */
.rw-cta .rw-cta__title span {
    display: block;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* Accentwoorden binnen een regel blijven inline staan. */
.rw-cta .rw-cta__title em,
.rw-cta .rw-cta__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* --- Tekst -------------------------------------------------------------- */
.rw-cta .rw-cta__text {
    margin: 0;
    max-width: var(--rw-cta-text-width);
    color: var(--rw-cta-text-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.0225rem;
}

/* --- Buttons ------------------------------------------------------------ */
.rw-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rw-cta-actions-gap);
}

.rw-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: filter 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.rw-cta__button--primary {
    border-color: #c142a2;
    background: linear-gradient(61deg, #a52a87 13.96%, #c14da5 86.04%);
    color: #fff;
}

.rw-cta__button--primary:hover,
.rw-cta__button--primary:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

/* Standaard: transparant met witte rand. */
.rw-cta__button--secondary {
    border-color: rgba(255, 255, 255, 0.65);
    background: transparent;
    color: #fff;
}

.rw-cta__button--secondary:hover,
.rw-cta__button--secondary:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Variant: licht gevuld, zoals de secundaire button in de hero. */
.rw-cta--secondary-light .rw-cta__button--secondary {
    border-color: var(--S---Mid-purple-4, #E1DBE1);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.rw-cta--secondary-light .rw-cta__button--secondary:hover,
.rw-cta--secondary-light .rw-cta__button--secondary:focus-visible {
    filter: brightness(0.96);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.rw-cta__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
    .rw-cta {
        --rw-cta-content-gap: 2rem;
    }

    .rw-cta__panel {
        padding: 4rem 2.5rem;
    }
}

@media (max-width: 767px) {
    .rw-cta {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Beeld altijd bovenaan, ook in de variant met het beeld rechts. */
    .rw-cta--media-right .rw-cta__media {
        order: 0;
    }

    .rw-cta__media {
        min-height: var(--rw-cta-media-mobile-height);
    }

    .rw-cta__panel {
        padding: 3rem 1.5rem;
        justify-content: flex-start;
    }

    /* Volle breedte: de buttons gaan onder elkaar en moeten het paneel vullen. */
    .rw-cta__content {
        width: 100%;
    }

    .rw-cta__title,
    .rw-cta .rw-cta__text {
        max-width: none;
    }

    .rw-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .rw-cta__button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rw-cta__button {
        transition: none;
    }
}