/* =========================================================================
   Kernwaarden (titel + kaarten)
   - Titel en kaarten zitten in hetzelfde grid: de titel is simpelweg het
     eerste item. Daardoor staat hij op desktop als eerste kolom naast de
     kaarten, en schuift hij op mobiel mee in het tweekolomsgrid met de
     eerste kaart ernaast.
   - Het component levert alleen het grid en de kaarten: geen achtergrond,
     geen buitenmarge, geen max. breedte. Dat regel je in Elementor zelf.
   - Het aantal kolommen komt uit de Elementor-control, die de volledige
     grid-tracks in --rw-values-columns zet. "Automatisch" vult daar auto-fit
     met de minimale kolombreedte in.
   ========================================================================= */

.rw-values {
    /* Overschrijfbaar via de Elementor-controls (zie kernwaarden-cards.php). */
    --rw-values-columns: repeat(auto-fit, minmax(var(--rw-values-column-min), 1fr));
    --rw-values-column-min: 14rem;
    --rw-values-column-gap: 1rem;
    --rw-values-row-gap: 1rem;
    --rw-values-align: stretch;

    --rw-values-title-color: #fff;
    --rw-values-title-size: 3rem;
    --rw-values-title-space-right: 2.5rem;

    --rw-values-card-bg: rgba(255, 255, 255, 0.02);
    --rw-values-card-border: rgba(255, 255, 255, 0.14);
    --rw-values-card-border-width: 1px;
    --rw-values-card-radius: 8px;
    --rw-values-card-padding: 1.5rem;
    --rw-values-card-gap: 1rem;
    --rw-values-card-title-color: #fff;
    --rw-values-card-title-size: 1.125rem;
    --rw-values-card-text-color: var(--S---Light-grey-4, #F7F8F8);
    --rw-values-card-text-size: 0.9375rem;

    --rw-values-marker-color: #B71A91;
    --rw-values-marker-width: 1.375rem;

    display: grid;
    grid-template-columns: var(--rw-values-columns);
    align-items: var(--rw-values-align);
    column-gap: var(--rw-values-column-gap);
    row-gap: var(--rw-values-row-gap);
}

/* --- Titel --------------------------------------------------------------- */
/* De titel is een gewoon gridvakje: geen rand, geen achtergrond, en geen
   binnenmarge zodat de bovenkant uitlijnt met de bovenrand van de kaarten. */
.rw-values__title,
.rw-values .rw-values__title span,
.rw-values .rw-values__title em,
.rw-values .rw-values__title i,
.rw-values .rw-values__title strong,
.rw-values .rw-values__title b {
    color: var(--rw-values-title-color) !important; /* overschrijft de heading-kleur van thema/Elementor */
}

.rw-values .rw-values__title {
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
    padding-right: var(--rw-values-title-space-right);
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: var(--rw-values-title-size);
    line-height: 1.15;
    overflow-wrap: break-word; /* smalle kolommen: liever afbreken dan overlopen */
}

/* Accentregel: het thema zet elke <span> in een heading op display:block met
   margin-left:60px (themes/refreshworks/assets/css/global.css) — die marge hier
   weghalen zodat de regel netjes onder de eerste uitlijnt. */
.rw-values .rw-values__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-values .rw-values__title em,
.rw-values .rw-values__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

/* --- Kaart --------------------------------------------------------------- */
.rw-values__card {
    display: flex;
    flex-direction: column;
    gap: var(--rw-values-card-gap);
    min-width: 0;
    box-sizing: border-box;
    padding: var(--rw-values-card-padding);
    border: var(--rw-values-card-border-width) solid var(--rw-values-card-border);
    border-radius: var(--rw-values-card-radius);
    background-color: var(--rw-values-card-bg);
}

.rw-values .rw-values__card-title,
.rw-values .rw-values__card-title-text {
    color: var(--rw-values-card-title-color) !important;
}

.rw-values .rw-values__card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    min-width: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: var(--rw-values-card-title-size);
    font-weight: 400;
    line-height: 1.2;
}

/* Dezelfde themaregel als hierboven raakt ook de spans in de kaarttitel: die
   zouden er 60px linkermarge en het serif-accentfont bij krijgen. In een smalle
   kolom duwt dat de titel buiten de kaart. Hier dus voor beide spans terug naar
   nul; de tekst-span erft daarnaast weer de typografie van de kaarttitel. */
.rw-values .rw-values__card-title span {
    margin: 0;
}

.rw-values .rw-values__card-title-text {
    display: inline;
    min-width: 0;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    overflow-wrap: break-word;
}

/* Het magenta vlaggetje: vaste breedte, hoogte volgt de verhouding van de SVG. */
.rw-values .rw-values__marker {
    display: block;
    flex: 0 0 auto;
    width: var(--rw-values-marker-width);
    line-height: 0;
    color: var(--rw-values-marker-color);
}

.rw-values .rw-values__marker svg {
    display: block;
    width: 100%;
    height: auto;
}

.rw-values .rw-values__card-text {
    margin: 0;
    color: var(--rw-values-card-text-color);
    font-family: var(--primary-font, "Klavika Basic", "Klavika", sans-serif);
    font-size: var(--rw-values-card-text-size);
    font-weight: 400;
    line-height: 135%;
    letter-spacing: 0.0225rem;
    overflow-wrap: break-word;
}

/* --- Responsive ---------------------------------------------------------- */
/* Op mobiel staat het grid standaard op 2 kolommen (zie de control): de titel
   vult het eerste vakje en de eerste kaart staat ernaast, de rest volgt op de
   rijen daaronder. */
@media (max-width: 767px) {
    .rw-values {
        --rw-values-card-padding: 1.25rem;
        --rw-values-title-size: 1.875rem;
        --rw-values-title-space-right: 0rem; /* daar is de kolom te smal voor */
    }
}