/*
 * Gedeelde componenten. Alles heeft het prefix `ww-c-`.
 *
 * Inhoud:
 *  1. Breadcrumb
 *  2. Knoppen en links (button, arrow-link, back-link)
 *  3. Kaarten (card, card-link, blob, link-card, arrow-circle)
 *  4. Badges, chips en tags
 *  5. Iconvakken
 *  6. Meta, stat en infobar
 *  7. Hero (tekst en foto)
 *  8. CTA
 *  9. Tabs, paginering, zoekveld, scrollrij
 */

/* ============================================================
   1. Breadcrumb
   ============================================================ */

.ww-c-breadcrumb {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    margin: 0 auto 20px;
    padding: 13px 24px;
    overflow: hidden;
    border: 1px solid var(--ww-navy-a06);
    border-radius: var(--ww-radius-pill);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-card);
    color: var(--ww-color-muted-strong);
    font: var(--ww-font-weight-bold) var(--ww-text-base)/1.2 var(--ww-font-family);
    white-space: nowrap;
}

.ww-c-breadcrumb--left {
    margin-inline: 0;
}

.ww-c-breadcrumb a {
    flex: none;
    color: var(--ww-color-muted-strong) !important;
    text-decoration: none !important;
    transition: color var(--ww-transition-fast);
}

.ww-c-breadcrumb a:hover {
    color: var(--ww-color-orange) !important;
}

.ww-c-breadcrumb strong {
    min-width: 0;
    overflow: hidden;
    color: var(--ww-color-navy);
    font-weight: var(--ww-font-weight-extrabold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-c-breadcrumb__separator {
    flex: none;
    font-size: var(--ww-text-xs);
    --fa-primary-color: var(--ww-color-icon-muted);
    --fa-secondary-color: var(--ww-color-icon-muted);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.4;
}

/* ============================================================
   2. Knoppen en links
   ============================================================ */

.ww-c-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: var(--ww-control-height) !important;
    padding: 0 20px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ww-radius-pill) !important;
    background: none !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-caption)/1 var(--ww-font-family) !important;
    letter-spacing: var(--ww-tracking-caps-sm) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    min-width: 0 !important;
    width: auto;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: transform var(--ww-transition-fast), box-shadow var(--ww-transition-fast), background-color var(--ww-transition-fast), border-color var(--ww-transition-fast), color var(--ww-transition-fast);
}

.ww-c-button:hover {
    transform: translateY(-2px);
}

.ww-c-button:disabled,
.ww-c-button[aria-disabled="true"],
.ww-c-button.is-busy {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ww-c-button:focus-visible,
.ww-c-card-link:focus-visible,
.ww-c-link-card:focus-visible,
.ww-c-chip:focus-visible {
    outline: var(--ww-focus-outline);
    outline-offset: var(--ww-focus-outline-offset);
}

.ww-c-button--primary {
    border-color: var(--ww-color-orange) !important;
    background: var(--ww-gradient-orange) !important;
    box-shadow: var(--ww-shadow-button) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-button--primary i,
.ww-c-button--primary svg,
.ww-scope .ww-c-button--primary i,
.ww-scope .ww-c-button--primary svg {
    color: #fff !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: #fff !important;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.ww-c-button--secondary {
    border-color: var(--ww-color-border) !important;
    background: var(--ww-color-surface) !important;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    box-shadow: var(--ww-shadow-soft) !important;
}

.ww-c-button--secondary:hover {
    border-color: var(--ww-color-blue);
    color: var(--ww-color-blue) !important;
    -webkit-text-fill-color: var(--ww-color-blue) !important;
}

.ww-c-button--outline {
    border-color: var(--ww-color-blue) !important;
    background: transparent !important;
    color: var(--ww-color-blue) !important;
    -webkit-text-fill-color: var(--ww-color-blue) !important;
}

.ww-c-button--outline:hover {
    background: var(--ww-blue-a08);
}

.ww-c-button--outline i,
.ww-c-button--outline svg,
.ww-c-button--ghost i,
.ww-c-button--ghost svg {
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.5;
}

.ww-c-button--ghost {
    padding-inline: 12px !important;
    background: transparent !important;
    color: var(--ww-color-blue) !important;
    -webkit-text-fill-color: var(--ww-color-blue) !important;
}

.ww-c-button--ghost:hover {
    background: var(--ww-blue-a08);
    transform: none;
}

.ww-c-button--navy {
    border-color: var(--ww-color-navy) !important;
    background: var(--ww-color-navy) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: var(--ww-shadow-lift) !important;
}

.ww-c-button--navy i,
.ww-c-button--navy svg,
.ww-scope .ww-c-button--navy i,
.ww-scope .ww-c-button--navy svg {
    color: #fff !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: var(--ww-color-orange) !important;
    --fa-secondary-opacity: 1;
}

.ww-c-button--light {
    border-color: var(--ww-white-a22) !important;
    background: var(--ww-white-a07) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-button--light i,
.ww-c-button--light svg,
.ww-scope .ww-c-button--light i,
.ww-scope .ww-c-button--light svg {
    color: #fff !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: var(--ww-color-orange) !important;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.ww-c-button--light:hover {
    border-color: var(--ww-white-a42);
    background: var(--ww-white-a10);
}

.ww-c-button--danger {
    border-color: var(--ww-color-danger) !important;
    background: var(--ww-color-danger) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-button--sm {
    min-height: var(--ww-control-height-sm) !important;
    padding-inline: 15px !important;
    font-size: var(--ww-text-xs) !important;
}

.ww-c-button--block {
    width: 100% !important;
}

.ww-c-button--icon {
    width: var(--ww-control-height) !important;
    padding: 0 !important;
}

.ww-c-button--icon.ww-c-button--sm {
    width: var(--ww-control-height-sm) !important;
}

/* Compacte tekstlink met chevron: "Bekijk meer >" */
.ww-c-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ww-color-blue);
    -webkit-text-fill-color: var(--ww-color-blue);
    font: var(--ww-font-weight-extrabold) var(--ww-text-caption)/1 var(--ww-font-family) !important;
    letter-spacing: var(--ww-tracking-caps-sm) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: gap var(--ww-transition-fast), color var(--ww-transition-fast);
}

.ww-c-arrow-link:hover {
    gap: 11px;
}

.ww-c-arrow-link i,
.ww-c-arrow-link svg,
.ww-scope .ww-c-arrow-link i,
.ww-scope .ww-c-arrow-link svg {
    width: 1em;
    height: 1em;
    flex: none;
    font-size: 1em;
    line-height: 1;
    color: currentColor !important;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.9;
}

/* Terug-link boven een detailpagina. */
.ww-c-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ww-color-blue) !important;
    -webkit-text-fill-color: var(--ww-color-blue) !important;
    font: var(--ww-font-weight-semibold) var(--ww-text-base)/1 var(--ww-font-family) !important;
    text-decoration: none !important;
    transition: color var(--ww-transition-fast);
}

.ww-c-back-link i,
.ww-c-back-link svg {
    transition: transform var(--ww-transition-fast);
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.6;
}

.ww-c-back-link:hover {
    color: var(--ww-color-orange) !important;
    -webkit-text-fill-color: var(--ww-color-orange) !important;
}

.ww-c-back-link:hover i,
.ww-c-back-link:hover svg {
    transform: translateX(-3px);
}

.ww-c-back-link--light,
.ww-c-on-dark .ww-c-back-link {
    color: var(--ww-color-on-dark-soft) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-soft) !important;
}

.ww-c-back-link--light:hover,
.ww-c-on-dark .ww-c-back-link:hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ============================================================
   3. Kaarten
   ============================================================ */

.ww-c-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-card);
}

.ww-c-card--padded {
    padding: var(--ww-space-6);
}

/* Klein volgnummer rechtsboven in een kaart ("01"). */
.ww-c-card__number {
    position: absolute !important;
    right: 17px;
    top: 15px;
    z-index: 2;
    color: var(--ww-color-icon-muted) !important;
    -webkit-text-fill-color: var(--ww-color-icon-muted) !important;
    font: var(--ww-font-weight-black) var(--ww-text-xs)/1 var(--ww-font-family);
    letter-spacing: 0.1em;
}

.ww-c-card--soft {
    background: var(--ww-color-soft);
    box-shadow: none;
}

.ww-c-card--flat {
    box-shadow: none;
}

.ww-c-card--lg {
    border-radius: var(--ww-radius-lg);
}

.ww-c-card--dark {
    border-color: var(--ww-white-a10);
    background: var(--ww-gradient-navy-soft);
    box-shadow: var(--ww-shadow-strong);
    color: #fff;
}

/* Donkere kaart met actiefoto erachter (zet --ww-card-photo: url(...) op de kaart). */
.ww-c-card--dark.ww-c-card--photo {
    background:
        linear-gradient(135deg, rgba(13, 26, 53, 0.92), rgba(19, 42, 84, 0.78)),
        var(--ww-card-photo, none) center / cover no-repeat,
        var(--ww-gradient-navy-soft);
}

.ww-c-card--glass {
    border-color: var(--ww-white-a14);
    background: var(--ww-white-a07);
    box-shadow: none;
    -webkit-backdrop-filter: blur(var(--ww-blur));
    backdrop-filter: blur(var(--ww-blur));
    color: #fff;
}

.ww-c-card-link {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform var(--ww-transition-normal), box-shadow var(--ww-transition-normal), border-color var(--ww-transition-normal);
}

@media (hover: hover) {
    .ww-c-card-link:hover {
        transform: translateY(-3px);
        box-shadow: var(--ww-shadow-card-hover);
    }
}

/* Decoratieve hoekblob – zet op een kaart of hero. */
.ww-c-blob {
    position: relative;
    overflow: hidden;
}

.ww-c-blob::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -38px;
    z-index: 0;
    width: 104px;
    height: 96px;
    border-radius: 24px;
    transform: rotate(18deg);
    pointer-events: none;
    background: var(--ww-blob-gradient, var(--ww-gradient-blob));
}

.ww-c-blob--top::after {
    right: -34px;
    top: -38px;
    bottom: auto;
    transform: rotate(-18deg);
}

.ww-c-blob--blue {
    --ww-blob-gradient: linear-gradient(135deg, var(--ww-blue-a28), var(--ww-orange-a05));
}

.ww-c-blob--white {
    --ww-blob-gradient: linear-gradient(135deg, var(--ww-white-a10), var(--ww-white-a04));
}

.ww-c-blob > :where(:not(.ww-c-watermark)) {
    position: relative;
    z-index: 1;
}

/*
 * Blob-hover: lichte zwel. Standaard op klikbare kaarten met een blob
 * (ww-c-card-link / ww-c-link-card met ww-c-blob of ww-c-card--accent);
 * ww-c-blob--hover zet het aan op andere elementen, ww-c-blob--static zet het uit.
 * Bij hover draait de blob van 18° naar 24° en wordt 12% groter; één beweging.
 * De opacity-overgang wordt gebruikt door de blob-morph-modal (overlay.css).
 * Reduced motion zet dit uit (base.css).
 */
.ww-c-blob::after,
.ww-c-card--accent::after {
    transition: transform 0.4s var(--ww-ease-out), opacity 0.25s ease;
    will-change: transform;
}

@media (hover: hover) {
    .ww-c-card-link.ww-c-blob:not(.ww-c-blob--static):hover::after,
    .ww-c-link-card.ww-c-blob:not(.ww-c-blob--static):hover::after,
    .ww-c-card-link.ww-c-card--accent:not(.ww-c-blob--static):hover::after,
    .ww-c-blob--hover:hover::after {
        transform: rotate(24deg) scale(1.12);
    }

    .ww-c-blob--top.ww-c-card-link:not(.ww-c-blob--static):hover::after,
    .ww-c-blob--top.ww-c-blob--hover:hover::after {
        transform: rotate(-24deg) scale(1.12);
    }
}

/* Bron van een blob-morph-modal: de blob 'verlaat' de kaart zolang de modal open is. */
.ww-c-blob.is-morph-source::after,
.ww-c-card--accent.is-morph-source::after {
    opacity: 0;
    transition-duration: 0.4s, 0.1s;
}

/*
 * Accentkaart: gradient-rand, zachte tint en hoekblob in één accentkleur.
 * Zet --ww-accent (en optioneel --ww-accent-2) op de kaart; standaard blauw.
 * Gebruikt door sponsorkaarten, sponsorpakketten en de clinic-kaart.
 */
.ww-c-card--accent {
    /* Geen eigen --ww-accent-declaratie: die zou de kleur van een wrapper overschrijven.
       Kleur komt van --ww-accent (kaart of voorouder), anders blauw via --_ww-accent. */
    --_ww-accent: var(--ww-accent, var(--ww-color-blue));
    --_ww-accent-2: var(--ww-accent-2, color-mix(in srgb, var(--_ww-accent) 78%, white));
    isolation: isolate;
    border: 2px solid transparent;
    border-radius: var(--ww-radius-2xl);
    background:
        linear-gradient(var(--ww-color-surface), var(--ww-color-surface)) padding-box,
        linear-gradient(135deg,
            color-mix(in srgb, var(--_ww-accent) 55%, transparent) 0%,
            color-mix(in srgb, var(--_ww-accent) 18%, transparent) 55%,
            var(--ww-navy-a12) 100%) border-box;
    box-shadow: var(--ww-shadow-strong);
}

.ww-c-card--accent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--_ww-accent) 16%, transparent) 0%, transparent 36%),
        radial-gradient(circle at 0% 100%, var(--ww-blue-a08) 0%, transparent 42%),
        linear-gradient(180deg, var(--ww-color-surface) 0%, var(--ww-color-surface) 66%, color-mix(in srgb, var(--_ww-accent) 7%, var(--ww-color-surface)) 100%);
}

/* Blob rechtsonder – dezelfde plek en vorm als ww-c-blob; rechtsboven blijft vrij voor het icoon. */
.ww-c-card--accent::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -38px;
    z-index: -1;
    width: 104px;
    height: 96px;
    border-radius: 24px;
    transform: rotate(18deg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--_ww-accent) 22%, transparent), color-mix(in srgb, var(--_ww-accent) 5%, transparent));
    pointer-events: none;
}

.ww-c-card--accent > * {
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .ww-c-card--accent.ww-c-card-link:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 56px color-mix(in srgb, var(--_ww-accent) 24%, var(--ww-navy-a16));
    }
}

/* Knop in de accentkleur (--ww-accent op de knop, kaart of wrapper). */
.ww-c-button--accent {
    --_ww-accent: var(--ww-accent, var(--ww-color-blue));
    --_ww-accent-2: var(--ww-accent-2, color-mix(in srgb, var(--_ww-accent) 78%, white));
    border-color: var(--_ww-accent) !important;
    background: linear-gradient(135deg, var(--_ww-accent), var(--_ww-accent-2)) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--_ww-accent) 32%, transparent) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-button--accent i,
.ww-c-button--accent svg,
.ww-scope .ww-c-button--accent i,
.ww-scope .ww-c-button--accent svg {
    color: #fff !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: #fff !important;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.6;
}

/* Social-mediaknoppen: merkkleur als tint (rand + zachte achtergrond + icoon),
   solid op hover. Gebruik met ww-c-button (--sm/--icon) + data-social="linkedin"
   of ww-c-button--social-linkedin. Container ww-c-socials zet ze in een rij. */
.ww-c-socials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.ww-c-socials--inline {
    display: flex;
    flex-wrap: wrap;
}

.ww-c-button--social,
.ww-c-button[data-social] {
    --ww-social: var(--ww-color-navy);
    border-color: color-mix(in srgb, var(--ww-social) 32%, transparent) !important;
    background: color-mix(in srgb, var(--ww-social) 9%, #fff) !important;
    box-shadow: none !important;
    color: var(--ww-social) !important;
    -webkit-text-fill-color: var(--ww-social) !important;
    width: 100%;
    min-width: 0 !important;
    margin: 0 !important;
}

.ww-c-socials--inline .ww-c-button {
    width: auto;
}

.ww-c-button--social i,
.ww-c-button--social svg,
.ww-c-button[data-social] i,
.ww-c-button[data-social] svg,
.ww-scope .ww-c-button--social i,
.ww-scope .ww-c-button--social svg,
.ww-scope .ww-c-button[data-social] i,
.ww-scope .ww-c-button[data-social] svg {
    color: var(--ww-social) !important;
    --fa-primary-color: var(--ww-social) !important;
    --fa-secondary-color: var(--ww-social) !important;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.5;
}

.ww-c-button--social:hover,
.ww-c-button[data-social]:hover {
    background: var(--ww-social) !important;
    border-color: var(--ww-social) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-button--social:hover i,
.ww-c-button--social:hover svg,
.ww-c-button[data-social]:hover i,
.ww-c-button[data-social]:hover svg,
.ww-scope .ww-c-button--social:hover i,
.ww-scope .ww-c-button--social:hover svg,
.ww-scope .ww-c-button[data-social]:hover i,
.ww-scope .ww-c-button[data-social]:hover svg {
    color: #fff !important;
    --fa-primary-color: #fff !important;
    --fa-secondary-color: #fff !important;
}

.ww-c-button--social-linkedin,  .ww-c-button[data-social="linkedin"]  { --ww-social: #0a66c2; }
.ww-c-button--social-instagram, .ww-c-button[data-social="instagram"] { --ww-social: #d62976; }
.ww-c-button--social-facebook,  .ww-c-button[data-social="facebook"]  { --ww-social: #1877f2; }
.ww-c-button--social-youtube,   .ww-c-button[data-social="youtube"]   { --ww-social: #ff0000; }
.ww-c-button--social-tiktok,    .ww-c-button[data-social="tiktok"]    { --ww-social: #010101; }
.ww-c-button--social-x,         .ww-c-button[data-social="x"]         { --ww-social: #0f1419; }
.ww-c-button--social-whatsapp,  .ww-c-button[data-social="whatsapp"]  { --ww-social: #25d366; }
.ww-c-button--social-website,   .ww-c-button[data-social="website"]   { --ww-social: var(--ww-color-blue); }
.ww-c-button--social-mail,      .ww-c-button[data-social="mail"]      { --ww-social: var(--ww-color-navy); }

/* Instagram: verloop op hover. */
.ww-c-button--social-instagram:hover,
.ww-c-button[data-social="instagram"]:hover {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7) !important;
    border-color: #ee2a7b !important;
}

/* Klikbare kaart met een pijl-cirkel rechts. */
.ww-c-link-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--ww-space-4);
    padding: var(--ww-space-4) var(--ww-space-5);
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-soft);
    color: inherit !important;
    text-decoration: none !important;
    transition: transform var(--ww-transition-normal), box-shadow var(--ww-transition-normal), border-color var(--ww-transition-normal);
}

.ww-c-link-card__body {
    min-width: 0;
    flex: 1 1 auto;
}

.ww-c-arrow-circle {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px !important;
    height: 30px !important;
    margin-left: auto;
    border: 1px solid var(--ww-color-border);
    border-radius: 50% !important;
    background: var(--ww-color-soft);
    color: var(--ww-color-blue);
    font-size: var(--ww-text-xs);
    transition: transform var(--ww-transition-fast), background-color var(--ww-transition-fast), color var(--ww-transition-fast), border-color var(--ww-transition-fast);
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.9;
}

@media (hover: hover) {
    .ww-c-link-card:hover {
        transform: translateY(-2px);
        border-color: var(--ww-blue-a28);
        box-shadow: var(--ww-shadow-card-hover);
    }

    .ww-c-link-card:hover .ww-c-arrow-circle,
    .ww-c-card-link:hover .ww-c-arrow-circle {
        transform: translateX(3px);
        border-color: var(--ww-color-orange);
        background: var(--ww-color-orange);
        color: #fff;
    }
}

/* ============================================================
   4. Badges, chips en tags
   ============================================================ */

.ww-c-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 27px !important;
    padding: 0 12px !important;
    border-radius: var(--ww-radius-pill) !important;
    background: color-mix(in srgb, var(--ww-badge-color, var(--ww-color-blue)) 8%, transparent);
    color: var(--ww-badge-color, var(--ww-color-blue)) !important;
    -webkit-text-fill-color: var(--ww-badge-color, var(--ww-color-blue)) !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-label)/1 var(--ww-font-family) !important;
    letter-spacing: var(--ww-tracking-caps) !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.ww-c-badge i,
.ww-c-badge svg {
    font-size: 1.1em;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.5;
}

.ww-c-badge--orange {
    --ww-badge-color: var(--ww-color-orange);
}

.ww-c-badge--navy {
    --ww-badge-color: var(--ww-color-navy);
}

.ww-c-badge--success {
    --ww-badge-color: var(--ww-color-success);
}

.ww-c-badge--danger {
    --ww-badge-color: var(--ww-color-danger);
}

.ww-c-badge--muted {
    --ww-badge-color: var(--ww-color-muted-strong);
}

.ww-c-badge--gold {
    --ww-badge-color: #8a6f2a;
    background: color-mix(in srgb, var(--ww-tier-warrior-text) 30%, transparent);
}

/* Gevulde badge in de accentkleur. */
.ww-c-badge--solid {
    background: var(--ww-badge-color, var(--ww-color-blue));
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Randbadge zonder vulling. */
.ww-c-badge--outline {
    border: 1px solid color-mix(in srgb, var(--ww-badge-color, var(--ww-color-blue)) 45%, transparent);
    background: transparent;
}

/* Glas-badge op een donkere ondergrond (hero-label). */
.ww-c-badge--glass {
    min-height: 30px;
    padding: 0 13px;
    border: 1px solid var(--ww-white-a14);
    background: var(--ww-white-a07);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: var(--ww-text-xs);
    letter-spacing: var(--ww-tracking-caps);
}

.ww-c-badge--glass i,
.ww-c-badge--glass svg {
    font-size: var(--ww-text-caption);
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 1;
}

.ww-c-badge--lg {
    min-height: 32px;
    padding-inline: 14px;
    font-size: var(--ww-text-caption);
}

/* Filterchip / tabpil met actieve staat en optionele telling. */
.ww-c-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--ww-control-height-sm) !important;
    padding: 0 15px !important;
    border: 1px solid var(--ww-navy-a08) !important;
    border-radius: var(--ww-radius-pill) !important;
    background: var(--ww-color-page) !important;
    box-shadow: none !important;
    color: var(--ww-color-muted-strong) !important;
    -webkit-text-fill-color: var(--ww-color-muted-strong) !important;
    font: var(--ww-font-weight-bold) var(--ww-text-base)/1 var(--ww-font-family) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color var(--ww-transition-normal), border-color var(--ww-transition-normal), color var(--ww-transition-normal);
}

.ww-c-chip:hover:not(.is-active):not([aria-selected="true"]) {
    border-color: var(--ww-color-blue) !important;
    background: var(--ww-blue-a08) !important;
    color: var(--ww-color-blue) !important;
    -webkit-text-fill-color: var(--ww-color-blue) !important;
}

.ww-c-chip.is-active,
.ww-c-chip[aria-selected="true"],
.ww-c-chip[aria-pressed="true"] {
    border-color: var(--ww-color-navy) !important;
    background: var(--ww-color-navy) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-chip__swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ww-chip-color, var(--ww-color-blue));
}

.ww-c-chip__count {
    padding: 1px 7px;
    border-radius: var(--ww-radius-pill);
    background: var(--ww-navy-a08);
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-size: var(--ww-text-caption);
    font-weight: var(--ww-font-weight-extrabold);
}

.ww-c-chip.is-active .ww-c-chip__count,
.ww-c-chip[aria-selected="true"] .ww-c-chip__count {
    background: var(--ww-white-a16);
}

.ww-c-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ww-space-2);
}

/* Kleine tag-lijst (onderwerpen, kenmerken). */
.ww-c-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ww-c-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-pill);
    background: var(--ww-color-soft);
    color: var(--ww-color-muted-strong) !important;
    -webkit-text-fill-color: var(--ww-color-muted-strong) !important;
    font: var(--ww-font-weight-bold) var(--ww-text-caption)/1 var(--ww-font-family);
    white-space: nowrap;
}

.ww-c-tag--lg {
    min-height: 32px;
    padding: 0 13px;
    gap: 8px;
    font-size: var(--ww-text-sm);
}

.ww-c-tag i {
    --fa-primary-color: var(--ww-color-blue);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.9;
}

/* Tegel-variant: tags als vakjes met groot icoon en meerregelige tekst
   (bijv. "wat een sponsor mogelijk maakt"). Mobiel 2 naast elkaar. */
.ww-c-tags--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.ww-c-tags--tiles .ww-c-tag {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 66px !important;
    padding: 14px 18px !important;
    border-radius: var(--ww-radius-lg) !important;
    color: var(--ww-color-text) !important;
    -webkit-text-fill-color: var(--ww-color-text) !important;
    font-size: var(--ww-text-md) !important;
    font-weight: var(--ww-font-weight-semibold) !important;
    line-height: 1.3 !important;
    white-space: normal;
}

.ww-c-tags--tiles .ww-c-tag > i,
.ww-c-tags--tiles .ww-c-tag > svg {
    flex: none;
    width: 1em;
    height: 1em;
    font-size: 26px;
    --fa-primary-color: var(--ww-color-blue);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.9;
}

@media (max-width: 650px) {
    .ww-c-tags--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .ww-c-tags--tiles .ww-c-tag {
        gap: 10px;
        min-height: 58px !important;
        padding: 12px 14px !important;
        font-size: var(--ww-text-base) !important;
    }

    .ww-c-tags--tiles .ww-c-tag > i,
    .ww-c-tags--tiles .ww-c-tag > svg {
        font-size: 22px;
    }
}

/* ============================================================
   5. Iconvakken
   ============================================================ */

.ww-c-icon-box {
    width: var(--ww-icon-box-size, 46px);
    height: var(--ww-icon-box-size, 46px);
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-sm);
    background: var(--ww-color-soft);
    font-size: calc(var(--ww-icon-box-size, 46px) * 0.42);
}

.ww-c-icon-box--sm {
    --ww-icon-box-size: var(--ww-icon-box-size-sm);
}

.ww-c-icon-box--lg {
    --ww-icon-box-size: var(--ww-icon-box-size-lg);
    border-radius: var(--ww-radius-md);
}

.ww-c-icon-box--round {
    border-radius: 50%;
}

.ww-c-icon-box--gradient {
    background: var(--ww-gradient-tint);
}

.ww-c-icon-box--orange {
    border-color: var(--ww-orange-a22);
    background: var(--ww-orange-a10);
    --fa-primary-color: var(--ww-color-orange);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.45;
}

.ww-c-icon-box--navy {
    border-color: var(--ww-color-navy);
    background: var(--ww-color-navy);
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 1;
}

.ww-c-icon-box--glass {
    border-color: var(--ww-white-a14);
    background: var(--ww-white-a07);
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 1;
}

/* Watermerk-icoon op de achtergrond van een hero of kaart. */
.ww-c-watermark {
    position: absolute;
    right: -20px;
    bottom: -40px;
    z-index: 0;
    font-size: var(--ww-watermark-size, 170px);
    line-height: 1;
    opacity: 0.035;
    transform: rotate(-10deg);
    pointer-events: none;
    user-select: none;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.ww-c-on-dark .ww-c-watermark,
.ww-c-hero .ww-c-watermark {
    color: #fff;
}

/* ============================================================
   6. Meta, stat en infobar
   ============================================================ */

.ww-c-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 13px;
    color: var(--ww-color-muted) !important;
    -webkit-text-fill-color: var(--ww-color-muted) !important;
    font: var(--ww-font-weight-bold) var(--ww-text-label)/1.4 var(--ww-font-family);
    letter-spacing: var(--ww-tracking-caps-sm);
    text-transform: uppercase;
}

.ww-c-meta > * {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ww-c-meta a {
    color: inherit !important;
    text-decoration: none !important;
}

.ww-c-meta a:hover {
    color: var(--ww-color-orange) !important;
}

.ww-c-meta i,
.ww-c-meta svg {
    font-size: 1.15em;
}

.ww-c-meta--lg {
    font-size: var(--ww-text-caption);
}

/* Eén stat/infopunt: icoon + label + waarde. */
.ww-c-stat {
    display: flex;
    align-items: center;
    gap: var(--ww-space-3);
    min-width: 0;
}

.ww-c-stat__icon {
    --ww-icon-box-size: var(--ww-icon-box-size-sm);
    flex: none;
    display: grid;
    place-items: center;
    width: var(--ww-icon-box-size);
    height: var(--ww-icon-box-size);
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-sm);
    background: var(--ww-gradient-tint);
    font-size: var(--ww-text-lg);
}

.ww-c-stat__body {
    min-width: 0;
}

.ww-c-stat__label {
    display: block;
    color: var(--ww-color-muted) !important;
    -webkit-text-fill-color: var(--ww-color-muted) !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-label)/1.3 var(--ww-font-family);
    letter-spacing: var(--ww-tracking-caps);
    text-transform: uppercase;
}

.ww-c-stat__value {
    display: block;
    overflow: hidden;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font: var(--ww-font-weight-extrabold) var(--ww-text-md)/1.25 var(--ww-font-family);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tegel: eigen kaartje, waarde boven label (icoon optioneel links). */
.ww-c-stat--tile {
    padding: var(--ww-space-4);
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-md);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-soft);
}

.ww-c-stat--tile .ww-c-stat__body {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.ww-c-stat--tile .ww-c-stat__value {
    font-size: var(--ww-text-md);
    font-weight: var(--ww-font-weight-black);
    line-height: 1.2;
}

.ww-c-stat--tile .ww-c-stat__label {
    font-size: var(--ww-text-label);
    letter-spacing: var(--ww-tracking-caps-sm);
    font-weight: var(--ww-font-weight-bold);
}

/* Groot cijfer. */
.ww-c-stat--big .ww-c-stat__value {
    font-size: var(--ww-text-2xl);
    line-height: 1;
}

.ww-c-on-dark .ww-c-stat__value,
.ww-c-hero .ww-c-stat__value {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.ww-c-on-dark .ww-c-stat__label,
.ww-c-hero .ww-c-stat__label {
    color: var(--ww-color-on-dark-muted) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-muted) !important;
}

.ww-c-on-dark .ww-c-stat__icon,
.ww-c-hero .ww-c-stat__icon {
    border-color: var(--ww-white-a14);
    background: var(--ww-white-a07);
}

/* Witte infobalk die half over de onderkant van een hero valt. */
.ww-c-infobar {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(var(--ww-infobar-columns, 3), minmax(0, 1fr));
    width: calc(100% - 48px);
    margin: -18px auto 0;
    padding: 16px 0;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-lg);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-lift);
}

.ww-c-infobar > .ww-c-stat {
    padding: 4px 22px;
}

.ww-c-infobar > .ww-c-stat + .ww-c-stat {
    border-left: 1px solid var(--ww-color-border);
}

.ww-c-infobar--flat {
    width: 100%;
    margin-top: var(--ww-space-4);
}

/* Donker: navy "In het kort"-blok voor een zijkolom; stats gestapeld en gecentreerd. */
.ww-c-infobar--dark {
    margin: 0;
    padding: 18px 0 16px;
    border-color: var(--ww-white-a14);
    background: var(--ww-gradient-navy-soft);
    box-shadow: var(--ww-shadow-strong);
    color: #fff;
}

.ww-c-infobar--dark > .ww-c-stat {
    flex-direction: column;
    gap: 10px;
    padding: 2px 10px;
    text-align: center;
}

.ww-c-infobar--dark > .ww-c-stat + .ww-c-stat {
    border-left-color: var(--ww-white-a14);
}

.ww-c-infobar--dark .ww-c-stat__icon {
    --ww-icon-box-size: 46px;
    border-color: var(--ww-white-a14);
    border-radius: var(--ww-radius-md);
    background: var(--ww-white-a07);
    font-size: var(--ww-text-xl);
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 1;
}

.ww-c-infobar--dark .ww-c-stat__label {
    margin-bottom: 4px;
    color: var(--ww-white-a42) !important;
    -webkit-text-fill-color: var(--ww-white-a42) !important;
    font-size: var(--ww-text-xs);
}

.ww-c-infobar--dark .ww-c-stat__value {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: var(--ww-text-lg);
}

.ww-c-infobar--dark .ww-c-stat__value.is-accent {
    color: var(--ww-accent-2, var(--ww-accent, var(--ww-color-orange))) !important;
    -webkit-text-fill-color: var(--ww-accent-2, var(--ww-accent, var(--ww-color-orange))) !important;
}

/* Compact: houdt op mobiel de kolommen en zet icoon boven tekst. */
@media (max-width: 650px) {
    .ww-c-infobar.ww-c-infobar--compact {
        grid-template-columns: repeat(var(--ww-infobar-columns, 3), minmax(0, 1fr));
        padding: 9px 0;
    }

    .ww-c-infobar.ww-c-infobar--compact > .ww-c-stat {
        flex-direction: column;
        gap: 5px;
        padding: 3px 5px;
        text-align: center;
    }

    .ww-c-infobar.ww-c-infobar--compact > .ww-c-stat + .ww-c-stat {
        border-top: 0;
        border-left: 1px solid var(--ww-color-border);
    }

    .ww-c-infobar--compact .ww-c-stat__icon {
        --ww-icon-box-size: 28px;
        border-radius: var(--ww-radius-xs);
        font-size: var(--ww-text-caption);
    }

    .ww-c-infobar--compact .ww-c-stat__label {
        font-size: 6.8px;
        letter-spacing: var(--ww-tracking-caps-sm);
    }

    .ww-c-infobar--compact .ww-c-stat__value {
        font-size: var(--ww-text-label);
        white-space: normal;
    }
}

/* ============================================================
   7. Hero
   ============================================================ */

.ww-c-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    min-height: 390px;
    padding: 48px 52px;
    border-radius: var(--ww-radius-lg);
    background:
        radial-gradient(circle at 88% 18%, var(--ww-hero-glow, var(--ww-blue-a38)), transparent 27%),
        var(--ww-gradient-navy);
    box-shadow: var(--ww-shadow-strong);
    color: #fff;
    /* Iconen in de hero zijn wit met oranje tweede laag. */
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.ww-c-hero--split {
    grid-template-columns: minmax(0, 1fr) 350px;
}

.ww-c-hero--compact {
    min-height: 0;
    padding: 36px 40px;
}

.ww-c-hero--center {
    text-align: center;
    justify-items: center;
}

/* Decoratieve blokken. */
.ww-c-hero::before,
.ww-c-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.ww-c-hero::after {
    right: -66px;
    bottom: -80px;
    width: 240px;
    height: 225px;
    border-radius: 54px;
    transform: rotate(18deg);
    background: linear-gradient(135deg, var(--ww-hero-blob, var(--ww-orange-a30)), rgba(26, 94, 170, 0.06));
}

.ww-c-hero::before {
    left: 43%;
    top: -135px;
    width: 285px;
    height: 260px;
    border-radius: 64px;
    transform: rotate(-18deg);
    background: linear-gradient(135deg, var(--ww-white-a04), rgba(26, 94, 170, 0.09));
}

.ww-c-hero--plain::before,
.ww-c-hero--plain::after {
    display: none;
}

.ww-c-hero > :where(:not(.ww-c-watermark):not(.ww-c-hero__photo)) {
    position: relative;
    z-index: 1;
}

.ww-c-hero__content {
    max-width: 690px;
    min-width: 0;
}

.ww-c-hero--center .ww-c-hero__content {
    margin-inline: auto;
}

.ww-c-hero__label {
    margin-bottom: 17px;
}

.ww-c-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: var(--ww-font-family) !important;
    font-size: var(--ww-text-display) !important;
    font-weight: var(--ww-font-weight-black) !important;
    line-height: 0.98 !important;
    letter-spacing: var(--ww-tracking-display) !important;
    text-transform: none !important;
    background: none !important;
    text-shadow: none !important;
}

.ww-c-hero__subtitle {
    display: block;
    margin-top: 8px;
    color: var(--ww-color-on-dark-muted) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-muted) !important;
    font: var(--ww-font-weight-bold) var(--ww-text-md)/1.3 var(--ww-font-family);
}

.ww-c-hero__title--sm {
    font-size: clamp(28px, 4vw, 42px) !important;
    line-height: 1.05 !important;
}

.ww-c-hero .ww-c-accent-line {
    margin-top: 15px;
}

.ww-c-hero__intro {
    max-width: 670px;
    margin: 20px 0 0;
    color: var(--ww-color-on-dark-soft) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-soft) !important;
    font-size: var(--ww-text-md);
    line-height: var(--ww-line-loose);
}

.ww-c-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.ww-c-hero--center .ww-c-hero__actions {
    justify-content: center;
}

.ww-c-hero__meta {
    margin-top: 18px;
    color: var(--ww-color-on-dark-muted) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-muted) !important;
}

.ww-c-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 290px;
}

.ww-c-hero__ring {
    position: absolute;
    width: var(--ww-ring-size, 246px);
    height: var(--ww-ring-size, 246px);
    border: 1px solid var(--ww-white-a10);
    border-radius: 50%;
    pointer-events: none;
}

.ww-c-hero__ring--inner {
    --ww-ring-size: 190px;
    border-color: var(--ww-white-a07);
}

.ww-c-hero__orb {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 174px;
    height: 174px;
    border: 1px solid var(--ww-white-a14);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), var(--ww-white-a04));
    -webkit-backdrop-filter: blur(var(--ww-blur));
    backdrop-filter: blur(var(--ww-blur));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    font-size: 78px;
    --fa-secondary-opacity: 0.95;
}

.ww-c-hero__float {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--ww-float-size, 54px);
    height: var(--ww-float-size, 54px);
    border: 1px solid var(--ww-white-a14);
    border-radius: var(--ww-radius-md);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--ww-shadow-float);
    font-size: 20px;
    --fa-primary-color: var(--ww-color-blue);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.9;
}

.ww-c-hero__float--round {
    border-radius: 50%;
}

/* Foto-hero: achtergrondfoto met navy→blauw overlay. */
.ww-c-hero--photo {
    display: block;
    min-height: 0;
    padding: 26px 0 30px;
    border-radius: var(--ww-radius-2xl);
    background: var(--ww-color-navy);
    box-shadow: 0 16px 40px rgba(13, 26, 53, 0.13);
}

.ww-c-hero--photo::before,
.ww-c-hero--photo::after {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    transform: none;
}

.ww-c-hero--photo::before {
    display: none;
}

/* Overlay: navy → transparant met een gloed rechts; zet --ww-hero-photo-glow (bv. var(--ww-accent))
   op de hero of wrapper om de gloed in de accentkleur te krijgen (standaard blauw). */
.ww-c-hero--photo::after {
    background: linear-gradient(105deg,
        rgba(13, 26, 53, 0.96) 30%,
        rgba(19, 42, 84, 0.72) 70%,
        color-mix(in srgb, var(--ww-hero-photo-glow, var(--ww-color-blue)) 45%, transparent) 100%);
}

.ww-c-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* !important: `.ww-scope img` en thema-regels (`.elementor img`) zetten
       height: auto met hogere specificiteit; dan vult de foto de hero niet. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: var(--ww-hero-photo-position, center 32%);
    opacity: 0.5;
    filter: saturate(0.75);
}

.ww-c-hero--photo > .ww-c-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;          /* logo altijd links, tekst altijd rechts – ook op mobiel */
    align-items: flex-end;
    gap: var(--ww-space-6);
    padding-inline: var(--ww-space-8);
}

/* Logo of letter naast een foto-hero-titel. */
/* Tekstblok naast het logo: mag krimpen (regels breken af) i.p.v. onder het logo te klappen. */
.ww-c-hero--photo .ww-c-hero__content {
    flex: 1 1 0;
    min-width: 0;
}

/* Terug-link boven het logo/tekst (eigen regel binnen de nowrap-flex). */
.ww-c-hero--photo .ww-c-hero__back {
    position: absolute;
    top: -8px;
    left: var(--ww-space-8);
}

.ww-c-hero__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 1px solid var(--ww-white-a16);
    border-radius: var(--ww-radius-lg);
    background: #fff;
    box-shadow: var(--ww-shadow-float);
    color: var(--ww-color-navy);
    font: var(--ww-font-weight-black) 34px/1 var(--ww-font-family);
}

.ww-c-hero__logo img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    padding: 10px;
}

/* ============================================================
   8. CTA
   ============================================================ */

/*
 * Opbouw: icoon links (verticaal gecentreerd), tekst in het midden,
 * knop(pen) rechts. Op mobiel: icoon naast de tekst, knop eronder.
 */
.ww-c-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body actions";
    align-items: center;
    gap: var(--ww-space-6);
    padding: 31px 34px;
    border-radius: var(--ww-radius-lg);
    background: var(--ww-gradient-navy-soft);
    box-shadow: var(--ww-shadow-strong);
    color: #fff;
    --fa-primary-color: #fff;
    --fa-secondary-color: var(--ww-color-orange);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.ww-c-cta > :where(:not(.ww-c-watermark)) {
    position: relative;
    z-index: 1;
}

.ww-c-cta__body {
    grid-area: body;
    min-width: 0;
}

/* Zonder eigen wrapper (oudere markup): tekstblok is het element na het icoon. */
.ww-c-cta > :not(.ww-c-cta__icon):not(.ww-c-cta__actions):not(.ww-c-button):not(.ww-c-watermark) {
    grid-area: body;
}

.ww-c-cta__icon {
    --ww-icon-box-size: var(--ww-icon-box-size-lg);
    grid-area: icon;
    border-color: var(--ww-white-a10);
    border-radius: 15px;
    background: var(--ww-white-a07);
    font-size: 26px;
}

.ww-c-cta__actions,
.ww-c-cta > .ww-c-button {
    grid-area: actions;
    justify-self: end;
}

/* Gestapeld: knoppen onder de tekst. */
.ww-c-cta--stack {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon body"
        "icon actions";
}

.ww-c-cta--stack .ww-c-cta__actions {
    justify-self: start;
}

.ww-c-cta__label {
    display: block;
    margin-bottom: var(--ww-space-1);
    color: var(--ww-color-orange) !important;
    -webkit-text-fill-color: var(--ww-color-orange) !important;
    font: var(--ww-font-weight-extrabold) 9px/1.3 var(--ww-font-family);
    letter-spacing: var(--ww-tracking-caps-lg);
    text-transform: uppercase;
}

.ww-c-cta__title {
    margin: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: var(--ww-font-weight-black) 25px/1.15 var(--ww-font-family) !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
}

.ww-c-cta__copy {
    max-width: 650px;
    margin: 7px 0 0;
    color: var(--ww-color-on-dark-soft) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-soft) !important;
    font-size: 12.5px;
    line-height: 1.65;
}

.ww-c-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Lijst met vinkjes. */
.ww-c-check-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ww-c-check-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.ww-c-check-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    color: var(--ww-color-text) !important;
    -webkit-text-fill-color: var(--ww-color-text) !important;
    font: var(--ww-font-weight-bold) 11.5px/1.4 var(--ww-font-family);
}

.ww-c-check-list li::marker {
    content: none;
}

/* Kleur van de vinkjes: zet --ww-check-color op de lijst (standaard groen). */
.ww-c-check-list i,
.ww-c-check-list svg {
    flex: none;
    width: 14px;
    font-size: var(--ww-text-sm);
    --fa-primary-color: var(--ww-check-color, var(--ww-color-success));
    --fa-secondary-color: var(--ww-check-color, var(--ww-color-success));
    --fa-secondary-opacity: 0.35;
}

.ww-c-check-list--brand i,
.ww-c-check-list--brand svg {
    --fa-primary-color: var(--ww-color-blue);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.9;
}

.ww-c-on-dark .ww-c-check-list li {
    color: var(--ww-color-on-dark-soft) !important;
    -webkit-text-fill-color: var(--ww-color-on-dark-soft) !important;
}

/* Afbeelding met fallback (media.twig). */
.ww-c-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--ww-radius-md);
    background: var(--ww-gradient-tint);
}

.ww-c-media img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: var(--ww-media-fit, cover);
}

.ww-c-media--round {
    border-radius: 50%;
}

.ww-c-media--contain {
    --ww-media-fit: contain;
    background: var(--ww-color-surface);
}

.ww-c-media--contain img {
    width: auto;
    height: auto;
    padding: 8%;
}

.ww-c-media__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ww-color-blue);
    font-size: clamp(22px, 30%, 48px);
    --fa-primary-color: var(--ww-color-blue);
    --fa-secondary-color: var(--ww-color-orange);
    --fa-secondary-opacity: 0.9;
}

.ww-c-media__fallback--text {
    color: var(--ww-color-navy);
    font: var(--ww-font-weight-black) clamp(20px, 40%, 44px)/1 var(--ww-font-family);
    letter-spacing: -0.02em;
}

/* "Binnenkort"-blok (agenda-next.twig). */
.ww-c-agenda-next__heading {
    margin-bottom: var(--ww-space-6);
}

.ww-c-agenda-next__card {
    display: flow-root;
    padding: var(--ww-space-5) var(--ww-space-6) var(--ww-space-6);
    box-shadow: var(--ww-shadow-soft);
}

.ww-c-agenda-next__icon {
    float: right;
    margin: 0 0 var(--ww-space-3) var(--ww-space-4);
}

.ww-c-agenda-next__card .ww-c-heading {
    margin: 4px 0 10px !important;
}

.ww-c-agenda-next__meta {
    display: grid;
    gap: 7px;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--ww-text-sm);
    font-weight: var(--ww-font-weight-semibold);
    color: var(--ww-color-text) !important;
    -webkit-text-fill-color: var(--ww-color-text) !important;
}

.ww-c-agenda-next__meta > * {
    gap: 9px;
}

.ww-c-agenda-next__meta i {
    width: 14px;
    text-align: center;
}

.ww-c-agenda-next__ics {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-text-xs);
}

.ww-c-agenda-next__actions {
    margin-top: var(--ww-space-5);
}

.ww-c-agenda-next__headknop {
    align-self: flex-end;
}

@media (max-width: 650px) {
    .ww-c-agenda-next__card {
        padding: var(--ww-space-4);
    }

    .ww-c-agenda-next__actions .ww-c-button,
    .ww-c-agenda-next__headknop .ww-c-button {
        width: 100%;
    }

    .ww-c-agenda-next__headknop {
        flex-basis: 100%;
    }
}

/* Fotogalerij: 1 grote foto links, 2 kleine rechts (gallery.twig). */
.ww-c-gallery {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 14px;
}

.ww-c-gallery__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}

.ww-c-gallery .ww-c-media {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: var(--ww-radius-md);
}

.ww-c-gallery > .ww-c-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 260px;
}

.ww-c-gallery .ww-c-media--empty {
    border: 1px dashed var(--ww-color-border);
    background: var(--ww-color-soft);
}

.ww-c-gallery .ww-c-media__fallback {
    color: var(--ww-color-muted);
    font: var(--ww-font-weight-bold) var(--ww-text-sm)/1.3 var(--ww-font-family);
}

/* Citaat. */
.ww-c-quote {
    position: relative;
    margin: var(--ww-space-5) 0 0;
    padding: 18px 20px 18px 24px;
    border-left: 4px solid var(--ww-color-orange);
    border-radius: 0 var(--ww-radius-md) var(--ww-radius-md) 0;
    background: var(--ww-color-soft);
}

.ww-c-quote p {
    margin: 0 !important;
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font: var(--ww-font-weight-semibold) var(--ww-text-body, 15px)/1.6 var(--ww-font-family) !important;
    font-style: italic;
}

.ww-c-quote cite {
    display: block;
    margin-top: 8px;
    color: var(--ww-color-muted-strong) !important;
    font: var(--ww-font-weight-bold) var(--ww-text-sm)/1.4 var(--ww-font-family);
    font-style: normal;
}

/* ============================================================
   9. Tabs, paginering, zoekveld, scrollrij
   ============================================================ */

.ww-c-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ww-space-2);
}

.ww-c-tab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--ww-color-border) !important;
    border-radius: var(--ww-radius-pill) !important;
    background: var(--ww-color-surface) !important;
    color: var(--ww-color-text);
    font: var(--ww-font-weight-bold) var(--ww-text-sm)/1 var(--ww-font-family) !important;
    cursor: pointer !important;
    transition: background-color var(--ww-transition-fast), border-color var(--ww-transition-fast), color var(--ww-transition-fast);
}

.ww-c-tab[aria-selected="true"],
.ww-c-tab.is-active {
    border-color: var(--ww-color-blue) !important;
    background: var(--ww-color-blue) !important;
    color: #fff !important;
}

.ww-c-tab-panel[hidden] {
    display: none;
}

.ww-c-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ww-space-2);
}

.ww-c-pagination a,
.ww-c-pagination span {
    min-width: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-sm);
    background: var(--ww-color-surface);
    color: var(--ww-color-text);
    font-weight: var(--ww-font-weight-bold);
    text-decoration: none;
}

.ww-c-pagination .current {
    border-color: var(--ww-color-blue);
    background: var(--ww-color-blue);
    color: #fff;
}

/* Zoekveld met icoon links. */
.ww-c-search {
    position: relative;
    width: 100%;
    max-width: var(--ww-search-width, 340px);
}

.ww-c-search__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ww-color-muted);
    font-size: var(--ww-text-md);
    pointer-events: none;
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    --fa-secondary-opacity: 0.5;
}

.ww-c-search .ww-c-input,
.ww-c-search__input {
    padding-left: 42px !important;
}

.ww-c-search__clear {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: grid !important;
    place-items: center;
    width: 28px !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ww-navy-a06) !important;
    color: var(--ww-color-muted-strong) !important;
    -webkit-text-fill-color: var(--ww-color-muted-strong) !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Horizontale rij zonder zichtbare scrollbalk. */
.ww-c-scroll-row {
    display: flex;
    gap: var(--ww-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.ww-c-scroll-row::-webkit-scrollbar {
    display: none;
}

.ww-c-scroll-row > * {
    flex: none;
    scroll-snap-align: start;
}

/* Sticky balk onder de sitekop. */
.ww-c-sticky-bar {
    position: sticky;
    top: var(--ww-sticky-top);
    z-index: 60;
    background: var(--ww-color-page);
}

/* ============================================================
   13. Contactkaarten
   ============================================================ */

.ww-c-contact-grid {
    display: grid;
    grid-template-columns: repeat(var(--ww-contact-columns, 3), minmax(0, 1fr));
    gap: var(--ww-space-5);
    width: 100%;
    counter-reset: ww-contact-card;
}

.ww-c-contact-card {
    min-width: 0;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 26px 26px;
    text-align: left;
    counter-increment: ww-contact-card;
}

.ww-c-contact-card__number {
    position: absolute !important;
    top: 29px;
    left: 26px;
    z-index: 2;
    color: color-mix(in srgb, var(--_ww-accent) 48%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--_ww-accent) 48%, transparent) !important;
    font: var(--ww-font-weight-black) var(--ww-text-lg)/1 var(--ww-font-family);
    letter-spacing: .04em;
}

.ww-c-contact-card__number::before {
    content: counter(ww-contact-card, decimal-leading-zero);
}

.ww-c-contact-card__heading {
    width: 100%;
    padding-right: 54px;
    margin-top: 52px;
    margin-bottom: var(--ww-space-6);
}

.ww-c-contact-card__icon {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    border-color: color-mix(in srgb, var(--_ww-accent) 24%, var(--ww-color-border));
    background: color-mix(in srgb, var(--_ww-accent) 9%, var(--ww-color-surface));
    color: var(--_ww-accent);
    --fa-primary-color: var(--_ww-accent);
    --fa-secondary-color: var(--_ww-accent-2);
}

.ww-c-contact-card__title {
    position: relative;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 13px !important;
    color: var(--_ww-accent) !important;
    -webkit-text-fill-color: var(--_ww-accent) !important;
    font: var(--ww-font-weight-black) var(--ww-text-title)/var(--ww-line-snug) var(--ww-font-family-display, var(--ww-font-family)) !important;
    letter-spacing: var(--ww-tracking-tight) !important;
    text-transform: none !important;
}

.ww-c-contact-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: var(--ww-radius-pill);
    background: var(--ww-gradient-brand);
}

.ww-c-contact-card__copy {
    flex: 1 1 auto;
    margin: 0 0 var(--ww-space-5) !important;
    color: var(--ww-color-text) !important;
    -webkit-text-fill-color: var(--ww-color-text) !important;
    font: var(--ww-font-weight-regular) var(--ww-text-lg)/var(--ww-line-relaxed) var(--ww-font-family) !important;
}

.ww-c-contact-card__copy strong {
    color: var(--_ww-accent) !important;
    -webkit-text-fill-color: var(--_ww-accent) !important;
    font-weight: var(--ww-font-weight-bold) !important;
}

.ww-c-contact-card__button {
    margin-top: auto !important;
}

/* ============================================================
   14. Actiekaarten / redactionele nummerlijst
   ============================================================ */

.ww-c-action-list {
    display: grid;
    grid-template-columns: repeat(var(--ww-action-columns, 3), minmax(0, 1fr));
    gap: var(--ww-space-5);
    width: 100%;
    counter-reset: ww-action-card;
}

.ww-c-action-card {
    min-width: 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    counter-increment: ww-action-card;
}

.ww-c-action-card__number {
    position: absolute !important;
    top: 27px;
    left: 26px;
    z-index: 2;
    color: color-mix(in srgb, var(--_ww-accent) 48%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--_ww-accent) 48%, transparent) !important;
    font: var(--ww-font-weight-black) var(--ww-text-xs)/1 var(--ww-font-family);
    letter-spacing: .04em;
}

.ww-c-action-card__number::before {
    content: counter(ww-action-card, decimal-leading-zero);
}

.ww-c-action-card__icon {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    border-color: color-mix(in srgb, var(--_ww-accent) 24%, var(--ww-color-border));
    background: color-mix(in srgb, var(--_ww-accent) 9%, var(--ww-color-surface));
    color: var(--_ww-accent);
    --fa-primary-color: var(--_ww-accent);
    --fa-secondary-color: var(--_ww-accent-2);
}

.ww-c-action-card__title {
    position: relative;
    width: 100%;
    margin: 52px 0 18px !important;
    padding: 0 50px 13px 0 !important;
    color: var(--_ww-accent) !important;
    -webkit-text-fill-color: var(--_ww-accent) !important;
    font: var(--ww-font-weight-black) var(--ww-text-2xl)/var(--ww-line-snug) var(--ww-font-family) !important;
    letter-spacing: var(--ww-tracking-tight) !important;
    text-transform: none !important;
}

.ww-c-action-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: var(--ww-radius-pill);
    background: linear-gradient(90deg, var(--_ww-accent), var(--_ww-accent-2));
}

.ww-c-action-card__copy {
    flex: 1 1 auto;
    margin: 0 0 var(--ww-space-5) !important;
    color: var(--ww-color-text) !important;
    -webkit-text-fill-color: var(--ww-color-text) !important;
    font: var(--ww-font-weight-regular) var(--ww-text-md)/var(--ww-line-relaxed) var(--ww-font-family) !important;
}

.ww-c-action-card__copy strong {
    color: var(--_ww-accent) !important;
    -webkit-text-fill-color: var(--_ww-accent) !important;
    font-weight: var(--ww-font-weight-bold) !important;
}

.ww-c-action-card__button {
    align-self: flex-start;
    margin-top: auto !important;
}

/* ============================================================
   15. Keuzepaneel (routes): donkere intro naast keuzerijen
   [ww_routes] / routes.twig — "Jouw sport. Jouw start."
   ============================================================ */

.ww-c-routes {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr);
    overflow: hidden;
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-xl);
    background: var(--ww-color-surface);
    box-shadow: var(--ww-shadow-card);
}

.ww-c-routes--no-intro {
    grid-template-columns: 1fr;
}

.ww-c-routes__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ww-space-8);
    background: var(--ww-color-navy);
}

.ww-c-routes__intro .ww-c-kicker {
    margin-bottom: var(--ww-space-5);
}

.ww-c-routes .ww-c-routes__title {
    font-size: var(--ww-text-display) !important;
}

.ww-c-routes .ww-c-routes__copy {
    max-width: 28ch;
    margin: var(--ww-space-7) 0 0;
    margin-top: auto;
    padding-top: var(--ww-space-7);
}

.ww-c-routes__copy::before {
    content: "";
    display: block;
    width: var(--ww-space-8);
    height: var(--ww-space-1);
    margin-bottom: var(--ww-space-5);
    border-radius: var(--ww-radius-pill);
    background: var(--ww-color-orange);
}

.ww-c-routes__list {
    display: grid;
    min-width: 0;
    counter-reset: ww-route;
}

.ww-c-routes .ww-c-routes__item {
    display: grid;
    grid-template-columns: var(--ww-icon-box-size-sm) minmax(0, 1fr) var(--ww-control-height);
    gap: var(--ww-space-5);
    align-items: start;
    padding: var(--ww-space-7);
    background: var(--ww-color-surface);
    color: var(--ww-color-navy) !important;
    text-decoration: none !important;
    counter-increment: ww-route;
    transition: background-color var(--ww-transition-fast);
}

.ww-c-routes__item + .ww-c-routes__item {
    border-top: 1px solid var(--ww-color-border);
}

.ww-c-routes .ww-c-routes__item--main {
    background: var(--ww-orange-a10);
    box-shadow: inset var(--ww-space-1) 0 0 var(--ww-color-orange);
}

.ww-c-routes__number {
    padding-top: var(--ww-space-1);
    color: var(--ww-color-muted-strong);
    font-family: var(--ww-font-family-display, var(--ww-font-family)) !important;
    font-size: var(--ww-text-xl);
    line-height: var(--ww-line-snug);
}

.ww-c-routes__number::before {
    content: counter(ww-route, decimal-leading-zero);
}

.ww-c-routes__item--main .ww-c-routes__number {
    color: var(--ww-color-navy);
}

.ww-c-routes__body {
    display: grid;
    gap: var(--ww-space-2);
    min-width: 0;
}

.ww-c-routes .ww-c-routes__item-title {
    font-size: var(--ww-text-2xl) !important;
    overflow-wrap: anywhere;
}

.ww-c-routes .ww-c-routes__item-copy {
    display: block;
    margin: 0;
    font-size: var(--ww-text-lg) !important;
}

.ww-c-routes__item-copy strong {
    color: var(--ww-color-navy) !important;
    -webkit-text-fill-color: var(--ww-color-navy) !important;
    font-weight: var(--ww-font-weight-bold) !important;
}

.ww-c-routes__action {
    display: flex;
    align-items: center;
    gap: var(--ww-space-2);
    margin-top: var(--ww-space-2);
    color: var(--ww-color-blue);
    font-size: var(--ww-text-md);
    font-weight: var(--ww-font-weight-bold);
}

.ww-c-routes__arrow {
    display: grid;
    place-items: center;
    width: var(--ww-control-height);
    height: var(--ww-control-height);
    border: 1px solid var(--ww-color-border);
    border-radius: var(--ww-radius-pill);
    background: var(--ww-color-surface);
    color: var(--ww-color-navy);
}

.ww-c-routes__item--main .ww-c-routes__arrow {
    border-color: var(--ww-color-orange);
    background: var(--ww-color-orange);
}

.ww-c-routes .ww-c-routes__item:focus-visible {
    outline: 3px solid var(--ww-color-blue);
    outline-offset: -3px;
}

@media (hover: hover) {
    .ww-c-routes .ww-c-routes__item:hover {
        background: var(--ww-blue-a08);
    }

    .ww-c-routes .ww-c-routes__item--main:hover {
        background: var(--ww-orange-a22);
    }

    .ww-c-routes__item:hover .ww-c-routes__action {
        text-decoration: underline;
        text-underline-offset: var(--ww-space-1);
    }
}

@media (max-width: 900px) {
    .ww-c-routes {
        grid-template-columns: 1fr;
    }

    .ww-c-routes__intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--ww-space-3) var(--ww-space-7);
        padding: var(--ww-space-7);
    }

    .ww-c-routes__intro .ww-c-kicker {
        grid-column: 1 / -1;
        margin: 0;
    }

    .ww-c-routes .ww-c-routes__title {
        font-size: var(--ww-text-3xl) !important;
    }

    .ww-c-routes .ww-c-routes__copy {
        align-self: end;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .ww-c-routes__copy::before {
        display: none;
    }
}

@media (max-width: 650px) {
    .ww-c-routes__intro {
        display: block;
        padding: var(--ww-space-6);
    }

    .ww-c-routes__intro .ww-c-kicker {
        margin-bottom: var(--ww-space-3);
    }

    .ww-c-routes .ww-c-routes__title {
        font-size: var(--ww-text-2xl) !important;
    }

    .ww-c-routes .ww-c-routes__title br {
        display: none;
    }

    .ww-c-routes .ww-c-routes__copy {
        margin-top: var(--ww-space-3);
    }

    .ww-c-routes .ww-c-routes__item {
        grid-template-columns: minmax(0, 1fr) var(--ww-control-height);
        gap: var(--ww-space-3);
        padding: var(--ww-space-6);
    }

    .ww-c-routes__number {
        grid-column: 1;
        grid-row: 1;
    }

    .ww-c-routes__arrow {
        grid-column: 2;
        grid-row: 1;
    }

    .ww-c-routes__body {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ww-c-routes .ww-c-routes__item-title {
        font-size: var(--ww-text-xl) !important;
    }
}

/* ============================================================
   Responsief
   ============================================================ */

@media (max-width: 900px) {
    .ww-c-contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: var(--ww-space-4);
    }

    .ww-c-action-list {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap: var(--ww-space-4);
    }

    .ww-c-hero--split {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 18px;
        min-height: 350px;
        padding: 36px 32px;
    }

    .ww-c-hero__visual {
        min-height: 230px;
    }

    .ww-c-hero__ring {
        --ww-ring-size: 200px;
    }

    .ww-c-hero__ring--inner {
        --ww-ring-size: 154px;
    }

    .ww-c-hero__orb {
        width: 140px;
        height: 140px;
        font-size: 62px;
    }

    .ww-c-infobar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 0;
    }

    .ww-c-infobar > .ww-c-stat:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 650px) {
    .ww-c-contact-grid {
        display: block;
        overflow: hidden;
        border: 1px solid var(--ww-color-border);
        border-radius: var(--ww-radius-lg);
        background: var(--ww-color-surface);
        box-shadow: var(--ww-shadow-card);
    }

    .ww-c-contact-card {
        min-height: 140px;
        padding: 15px 58px 15px 54px;
        overflow: visible;
        isolation: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .ww-c-contact-card + .ww-c-contact-card {
        border-top: 1px solid var(--ww-color-border);
    }

    .ww-c-contact-card::before,
    .ww-c-contact-card::after {
        display: none;
    }

    .ww-c-contact-card__number {
        top: 17px;
        left: 15px;
        font-size: var(--ww-text-lg);
        letter-spacing: var(--ww-tracking-tight);
    }

    .ww-c-contact-card__heading {
        margin: 0;
        padding: 0;
    }

    .ww-c-contact-card__icon {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        font-size: var(--ww-text-sm);
    }

    .ww-c-contact-card__title {
        padding: 0 !important;
        font-size: var(--ww-text-xl) !important;
        line-height: var(--ww-line-snug) !important;
    }

    .ww-c-contact-card__title::after {
        display: none;
    }

    .ww-c-contact-card__copy {
        display: -webkit-box;
        flex: none;
        margin: 8px 0 0 !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: var(--ww-text-base) !important;
        line-height: 1.5 !important;
    }

    .ww-scope .ww-c-contact-card__button,
    .ww-c-contact-card__button {
        width: auto !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: var(--ww-control-height-sm) !important;
        margin-top: 12px !important;
        padding: 0 15px !important;
        border: 1px solid var(--_ww-accent) !important;
        border-radius: var(--ww-radius-pill) !important;
        background: linear-gradient(135deg, var(--_ww-accent), var(--_ww-accent-2)) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--_ww-accent) 26%, transparent) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: var(--ww-text-caption) !important;
        letter-spacing: var(--ww-tracking-caps-sm) !important;
        transform: none !important;
    }

    .ww-scope .ww-c-contact-card__button i,
    .ww-scope .ww-c-contact-card__button svg,
    .ww-c-contact-card__button i,
    .ww-c-contact-card__button svg {
        color: #fff !important;
        --fa-primary-color: #fff !important;
        --fa-secondary-color: #fff !important;
        --fa-primary-opacity: 1;
        --fa-secondary-opacity: 1;
    }

    .ww-c-action-list {
        display: block;
        overflow: hidden;
        border: 1px solid var(--ww-color-border);
        border-radius: var(--ww-radius-lg);
        background: var(--ww-color-surface);
        box-shadow: var(--ww-shadow-card);
    }

    .ww-c-action-card {
        min-height: 128px;
        padding: 15px 58px 15px 54px;
        overflow: visible;
        isolation: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .ww-c-action-card + .ww-c-action-card {
        border-top: 1px solid var(--ww-color-border);
    }

    .ww-c-action-card::before,
    .ww-c-action-card::after {
        display: none;
    }

    .ww-c-action-card__number {
        top: 17px;
        left: 15px;
        font-size: var(--ww-text-lg);
        letter-spacing: var(--ww-tracking-tight);
    }

    .ww-c-action-card__icon {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        font-size: var(--ww-text-sm);
    }

    .ww-c-action-card__title {
        margin: 0 !important;
        padding: 0 !important;
        font-size: var(--ww-text-xl) !important;
        line-height: var(--ww-line-snug) !important;
    }

    .ww-c-action-card__title::after {
        display: none;
    }

    .ww-c-action-card__copy {
        display: -webkit-box;
        flex: none;
        margin: 8px 0 0 !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: var(--ww-text-base) !important;
        line-height: 1.5 !important;
    }

    .ww-scope .ww-c-action-card__button,
    .ww-c-action-card__button {
        width: auto !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: var(--ww-control-height-sm) !important;
        margin-top: 12px !important;
        padding: 0 15px !important;
        border: 1px solid var(--_ww-accent) !important;
        border-radius: var(--ww-radius-pill) !important;
        background: linear-gradient(135deg, var(--_ww-accent), var(--_ww-accent-2)) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--_ww-accent) 26%, transparent) !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: var(--ww-text-caption) !important;
        letter-spacing: var(--ww-tracking-caps-sm) !important;
        transform: none !important;
    }

    .ww-scope .ww-c-action-card__button i,
    .ww-scope .ww-c-action-card__button svg,
    .ww-c-action-card__button i,
    .ww-c-action-card__button svg {
        color: #fff !important;
        --fa-primary-color: #fff !important;
        --fa-secondary-color: #fff !important;
        --fa-primary-opacity: 1;
        --fa-secondary-opacity: 1;
    }

    .ww-c-breadcrumb {
        gap: 7px;
        min-height: 40px;
        margin-bottom: 12px;
        padding: 9px 13px;
        font-size: 10.5px;
    }

    .ww-c-breadcrumb__separator {
        font-size: 8px;
    }

    .ww-c-button {
        width: 100%;
        padding-inline: 15px !important;
        font-size: var(--ww-text-label) !important;
        letter-spacing: 0.05em !important;
    }

    .ww-c-button--sm,
    .ww-c-button--inline,
    .ww-c-button--icon {
        width: auto;
    }

    .ww-c-button--icon {
        width: 42px !important;
    }

    .ww-c-card--padded {
        padding: 18px;
    }

    .ww-c-badge {
        min-height: 23px;
        padding-inline: 9px;
        font-size: var(--ww-text-2xs);
        letter-spacing: 0.1em;
    }

    .ww-c-badge--glass {
        min-height: 26px;
        font-size: 8.5px;
    }

    .ww-c-chip {
        min-height: 34px;
        padding-inline: 12px;
        font-size: var(--ww-text-sm);
    }

    .ww-c-hero,
    .ww-c-hero--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        min-height: 0;
        padding: 26px 18px 30px;
        border-radius: var(--ww-radius-md);
    }

    .ww-c-hero::before {
        display: none;
    }

    .ww-c-hero::after {
        right: -70px;
        bottom: -90px;
        width: 180px;
        height: 170px;
    }

    /* Foto-hero: de overlay blijft de hele hero bedekken (de blob-maten hierboven gelden niet). */
    .ww-c-hero--photo::after {
        inset: 0;
        width: auto;
        height: auto;
    }

    .ww-c-hero__label {
        margin-bottom: 12px;
    }

    .ww-c-hero__intro {
        margin-top: 14px;
        font-size: var(--ww-text-base);
        line-height: var(--ww-line-relaxed);
    }

    .ww-c-hero__actions {
        margin-top: 18px;
    }

    .ww-c-hero__actions .ww-c-button {
        width: 100%;
    }

    .ww-c-hero__visual {
        display: none;
    }

    .ww-c-hero--photo {
        padding: 18px 0 22px;
        border-radius: var(--ww-radius-lg);
    }

    .ww-c-hero--photo > .ww-c-hero__inner {
        gap: var(--ww-space-4);
        padding-inline: var(--ww-space-5);
    }

    .ww-c-hero__logo {
        width: 64px;
        height: 64px;
        border-radius: var(--ww-radius-md);
        font-size: 24px;
    }

    .ww-c-infobar {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 14px);
        margin-top: -12px;
        padding: 6px 0;
        border-radius: var(--ww-radius-md);
    }

    .ww-c-infobar > .ww-c-stat {
        padding: 10px 16px;
    }

    .ww-c-infobar > .ww-c-stat + .ww-c-stat {
        border-left: 0;
        border-top: 1px solid var(--ww-color-border);
    }

    .ww-c-stat__icon {
        --ww-icon-box-size: 34px;
        font-size: var(--ww-text-md);
    }

    .ww-c-stat__value {
        font-size: var(--ww-text-base);
    }

    .ww-c-stat--tile {
        padding: 11px;
    }

    .ww-c-stat--tile .ww-c-stat__icon {
        --ww-icon-box-size: 32px;
        font-size: var(--ww-text-sm);
    }

    .ww-c-stat--big .ww-c-stat__value {
        font-size: var(--ww-text-xl);
    }

    /* Mobiel: icoon naast de tekst, knop over de volle breedte eronder. */
    .ww-c-cta,
    .ww-c-cta--stack {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon body"
            "actions actions";
        gap: var(--ww-space-3);
        padding: 20px 18px;
        border-radius: 13px;
    }

    .ww-c-cta__icon {
        --ww-icon-box-size: 44px;
        align-self: start;
        border-radius: var(--ww-radius-sm);
        font-size: 20px;
    }

    .ww-c-cta__actions,
    .ww-c-cta > .ww-c-button {
        justify-self: stretch;
        margin-top: var(--ww-space-1);
    }

    .ww-c-cta__actions .ww-c-button {
        flex: 1 1 auto;
    }

    .ww-c-cta__title {
        font-size: 19px !important;
    }

    .ww-c-cta__copy {
        margin-top: 5px;
        font-size: 10.5px;
        line-height: 1.5;
    }

    .ww-c-link-card {
        padding: 14px 16px;
    }

    .ww-c-search {
        max-width: none;
    }

    .ww-c-watermark {
        font-size: calc(var(--ww-watermark-size, 170px) * 0.6);
    }

    .ww-c-gallery {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ww-c-gallery > .ww-c-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .ww-c-gallery__side {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

@media (max-width: 400px) {
    .ww-c-cta,
    .ww-c-cta--stack {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "icon"
            "body"
            "actions";
    }

    .ww-c-hero__actions {
        flex-direction: column;
    }
}