.team-taalthuis {
    position: relative;
    /* Full-bleed: breekt uit alle gecentreerde containers naar volle viewportbreedte
       (zelfde patroon als .white-paper__wp-side). */
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: var(--light-green, #DCF1E0);
    padding-top: 145px;
    padding-bottom: 140px;
}

.team-taalthuis .container {
    position: relative;
}

.team-taalthuis .divider_curves {
    color: var(--light-green, #DCF1E0);
}

.team-taalthuis__top-label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--green, #1FA238);
    text-transform: uppercase;
    font-family: 'LucyCousins', cursive;
    margin-bottom: 6px;
}

/* `.team-taalthuis .team-taalthuis__title` (0,2,0) verslaat de thema-regel
   `.page-template-default h2` (0,1,1) die anders font-size/margin-top oplegt. */
.team-taalthuis .team-taalthuis__title {
    margin: 0 0 30px;
    font-size: 42px;
    font-weight: 700;
}

.team-taalthuis__content {
    max-width: 772px;
    font-size: 16px;
    line-height: 28px;
}

.team-taalthuis__content p,
.team-taalthuis__content ol,
.team-taalthuis__content ul {
    margin-bottom: 28px;
}

.team-taalthuis__content p:last-child,
.team-taalthuis__content ol:last-child,
.team-taalthuis__content ul:last-child {
    margin-bottom: 0;
}

/* --- Intro: tekst links, video-preview rechts, verticaal gecentreerd --- */
.team-taalthuis__intro {
    display: flex;
    align-items: center;
    gap: 60px;
}

.team-taalthuis__intro-text {
    flex: 1 1 auto;
    min-width: 0;
}

.team-taalthuis__video {
    flex: 0 0 auto;
    text-align: center;
    max-width: 50%;
}

.team-taalthuis__video-trigger {
    position: relative;
    display: inline-block;
    line-height: 0;
    cursor: pointer;
}

/* content-box: de 361px is de foto zelf, de 23px border komt daar bovenop
   (totale cirkel 407px), i.p.v. de foto te laten krimpen zoals border-box zou doen. */
.team-taalthuis__video-image {
    box-sizing: content-box;
    display: block;
    width: 361px;
    height: 361px;
    object-fit: cover;
    border-radius: 50%;
    border: 23px solid var(--orange, #F3950B);
}

.team-taalthuis__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 0;
}

.team-taalthuis__video-play svg {
    display: block;
}

.team-taalthuis__video-caption {
    display: block;
    margin-top: 29px;
    color: var(--orange, #F3950B);
    text-transform: uppercase;
    font-family: 'LucyCousins', cursive;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.42px;
    text-align: center;
}

/* page-default.css verbergt divider_curves standaard op default-surface
   pagina's (bedoeld voor smalle, container-gebonden content); deze sectie
   is bewust full-bleed, dus de golfranden hier weer expliciet aanzetten. */
.page-default-surface .team-taalthuis .divider_curves {
    display: block;
}

/* De beige sectie(s) rond dit groene blok zijn WPBakery-rijen op de beige
   pagina-achtergrond en leveren zelf geen curve-divider. Daarom injecteren we
   die hier: aan de bovenkant de beige "footer" van de sectie erboven (neerwaartse
   curves) en aan de onderkant de beige "header" van de sectie eronder (opwaartse
   curves). Beide zijn beige en staan boven de groene achtergrond; ze grijpen in
   elkaar met de groene team-curves omdat header- en footer-patroon een halve
   periode verschoven zijn. Volledig binnen .team-taalthuis gescopet. */
.team-taalthuis__incoming-divider .divider_curves {
    transform: none;
    color: var(--beige, #FDEFDA);
    z-index: 1;
}

/* Bovenaan: beige neerwaartse curves die vanaf de naad in het groen hangen. */
.team-taalthuis__incoming-divider--top .divider_curves {
    top: 0;
    bottom: auto;
}

/* Onderaan: beige opwaartse curves die vanaf de naad in het groen rijzen. */
.team-taalthuis__incoming-divider--bottom .divider_curves {
    bottom: 0;
    top: auto;
}

.team-taalthuis .team-taalthuis__members-title {
    margin-top: 67px;
    margin-bottom: 45px;
}

.team-taalthuis__members {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Vanaf 6 teamleden gelijkmatig verdelen over de rij. Max 6 per rij komt
   vanzelf: 7 x 196px past niet in de 1320px container, dus de 7e wrapt.
   Grid i.p.v. flex space-between: bij meerdere regels vallen de leden van de
   2e regel dan netjes ónder de kolommen van de 1e (flex zou de restanten naar
   de uitersten duwen). */
.team-taalthuis__members--spread {
    display: grid;
    grid-template-columns: repeat(auto-fit, 196px);
    justify-content: space-between;
}

.team-taalthuis__member {
    text-align: center;
    max-width: 196px;
}

/* content-box: de 154px is de foto zelf, de 9px border komt daar bovenop
   (totale cirkel 172px), i.p.v. de foto te laten krimpen zoals border-box zou doen. */
.team-taalthuis__member-image {
    box-sizing: content-box;
    display: block;
    width: 154px;
    height: 154px;
    object-fit: cover;
    border-radius: 50%;
    border: 9px solid var(--pink, #E4087E); /* fallback; kleur wordt per positie gezet */
    margin-bottom: 7px;
}

/* Randkleur wisselt af per teamlid: pink -> orange -> green -> blue, en dan
   weer van voor af aan. */
.team-taalthuis__member:nth-child(4n + 1) .team-taalthuis__member-image {
    border-color: var(--pink, #E4087E);
}

.team-taalthuis__member:nth-child(4n + 2) .team-taalthuis__member-image {
    border-color: var(--orange, #F3950B);
}

.team-taalthuis__member:nth-child(4n + 3) .team-taalthuis__member-image {
    border-color: var(--green, #1FA238);
}

.team-taalthuis__member:nth-child(4n + 4) .team-taalthuis__member-image {
    border-color: var(--blue, #1A75BB);
}

.team-taalthuis__member-name {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    margin-bottom: 2px;
}

.team-taalthuis__member-job {
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.42px;
}

.team-taalthuis__member-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 16px;
}

/* De mail/LinkedIn-SVG's gebruiken fill="currentColor". Zonder override erven
   ze de roze `.page-default-surface .entry-content a`-kleur; hier zetten we ze
   op de donkere tekstkleur (zoals de aangeleverde iconen). De page-default-
   surface-selector heeft genoeg specificiteit om die roze regel te verslaan. */
.page-default-surface .team-taalthuis .team-taalthuis__member-link,
.team-taalthuis .team-taalthuis__member-link {
    color: var(--font-color, #0A2636);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Op hover kleuren de iconen roze (currentColor volgt deze kleur). Hogere
   specificiteit zodat het de basisregel hierboven verslaat. */
.page-default-surface .team-taalthuis .team-taalthuis__member-link:hover,
.page-default-surface .team-taalthuis .team-taalthuis__member-link:focus-visible,
.team-taalthuis .team-taalthuis__member-link:hover,
.team-taalthuis .team-taalthuis__member-link:focus-visible {
    color: var(--pink, #E4087E);
    text-decoration: none;
}

.team-taalthuis__member-link svg {
    display: block;
}

/* Bolletjes-navigatie (door JS toegevoegd) — alleen zichtbaar op mobiel. */
.team-taalthuis__members-nav {
    display: none;
}

/* Mobiel (<=767px): intro-tekst en video onder elkaar i.p.v. naast elkaar. */
@media (max-width: 767px) {
    .team-taalthuis {
        padding-top: 121px;
        padding-bottom: 139px;
    }

    .team-taalthuis .team-taalthuis__title {
        margin-bottom: 25px;
        font-size: 28px;
        line-height: 36px;
    }

    .team-taalthuis .team-taalthuis__members-title {
        text-align: center;
    }

    /* --- Team members als swipe-carousel: 1 lid tegelijk, gecentreerd. --- */
    .team-taalthuis__members,
    .team-taalthuis__members--spread {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .team-taalthuis__members::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .team-taalthuis__member {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
    }

    /* Foto centreren nu het lid full-width is. */
    .team-taalthuis__member .team-taalthuis__member-image {
        margin-left: auto;
        margin-right: auto;
    }

    /* Bolletjes-navigatie. */
    .team-taalthuis__members-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 30px;
    }

    .team-taalthuis__members-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 30px;
        background-color: var(--orange, #F3950B);
        cursor: pointer;
        transition: width 0.3s ease;
    }

    .team-taalthuis__members-dot--active {
        width: 20px;
    }

    .team-taalthuis__video-image {
        box-sizing: border-box; /* border binnen de 100%, anders overflow */
        width: 100%;
        max-width: 361px;
        height: auto;
        aspect-ratio: 1; /* blijft vierkant/rond terwijl-ie meeschaalt */
    }

    .team-taalthuis__intro {
        flex-direction: column;
    }

    .team-taalthuis__intro-text,
    .team-taalthuis__video {
        width: 100%;
        max-width: 100%;
    }
}