/* =============================================
   FRP TEAM — [frp_team] en [frp_specialist]

   Alle kleuren, de ronding en de schaduw lopen via CSS-variabelen met de
   huidige waarde als letterlijke terugval (zelfde patroon als map.css), zodat
   een tweede site in een ander merk dezelfde module kan gebruiken zonder dit
   bestand aan te raken:

       color: var(--frp-team-tekst, #111827);

   Rolnamen komen overeen met map.css waar de rol hetzelfde is: accent, tekst,
   zacht, rand, paneel.
   ============================================= */

:root {
    --frp-team-accent:       #c73200;  /* functie, rol-accent, iconen, primaire knop */
    --frp-team-accent-diep:  #a32c00;  /* hover-/actiefstand van het accent */
    --frp-team-tekst:        #111827;  /* namen en titels */
    --frp-team-zacht:        #6b7280;  /* omschrijving, metaregels, contacttekst */
    --frp-team-rand:         #e5e7eb;  /* kaartrand en scheidingslijnen */
    --frp-team-paneel:       #ffffff;  /* kaart- en knopachtergrond */
    --frp-team-vlak:         #fdf4ec; /* getinte achtergrond achter labels en foto */
    --frp-team-radius:       12px;     /* ronding van kaarten en foto's */
    --frp-team-schaduw:      0 1px 3px rgba(17,24,39,.08), 0 10px 24px rgba(17,24,39,.06);
    --frp-team-schaduw-hover: 0 4px 10px rgba(17,24,39,.10), 0 18px 32px rgba(17,24,39,.10);
}

/* =============================================
   [frp_team] — het teamraster
   ============================================= */

/* Het raster begint bij een kolom en klimt mee met het scherm: vanaf 600 twee,
   vanaf 900 drie en vanaf 1200 vier. Het attribuut kolommen is de bovengrens,
   niet de vaste waarde; met kolommen="2" blijft het bij twee, hoe breed het
   scherm ook wordt.

   Elke telling heeft een eigen klasse in plaats van een berekening op de custom
   property. repeat( min(2, var(--n)), … ) las prettig maar staat of valt met
   ondersteuning voor een mathematische functie op de plek van een geheel getal;
   met een klasse per telling staat elke stap zwart op wit in de stijl. De
   variabele --frp-team-cols blijft staan voor wie er in een kindthema op mikt. */
.frp-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

@media screen and (min-width: 600px) {
    .frp-team-grid--2,
    .frp-team-grid--3,
    .frp-team-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 992 en niet 900: de breekpunten van de site zijn 1279, 1080, 991, 767 en 478.
   Met 900 sprong het raster al op tablet_portrait (991) naar drie kolommen,
   terwijl daar twee kaarten naast elkaar horen. Zo valt elke stap samen met een
   resolutieknop in de bouwer: 478 een, 767 twee, 991 twee, 1080 drie, 1279 vier. */
@media screen and (min-width: 992px) {
    .frp-team-grid--3,
    .frp-team-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (min-width: 1200px) {
    .frp-team-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.frp-team-card {
    display: flex;
    flex-direction: column;
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e5e7eb);
    border-radius: var(--frp-team-radius, 14px);
    box-shadow: var(--frp-team-schaduw, 0 1px 2px rgba(17,24,39,.05), 0 8px 20px rgba(17,24,39,.05));
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* Een kaart komt bij hover NOOIT omhoog. De aandacht komt van de rand en de
   schaduw, niet van een sprong. */
.frp-team-card:hover,
.frp-team-card:focus-within {
    border-color: var(--frp-team-rand-hover, #d6cabb);
    box-shadow: var(--frp-team-schaduw-hover, 0 4px 10px rgba(17,24,39,.10), 0 18px 32px rgba(17,24,39,.10));
}

.frp-team-card__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--frp-team-vlak, #fdf4ec);
    border-bottom: 1px solid var(--frp-team-rand, #e5e7eb);
}
.frp-team-card__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Bij een groepsfoto of een staande opname staat het gezicht zelden in het
       midden van het kader maar in de bovenste helft. */
    object-position: center 22%;
}

.frp-team-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    padding: 18px 20px 20px;
}

.frp-team-card__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--frp-team-tekst, #111827);
}

/* De functie is een label onder de naam, geen tweede kop. Kleiner, in
   kapitalen en met spatiëring leest hij als bijschrift en vecht hij niet met
   de naam om de aandacht. */
.frp-team-card__role {
    margin: -4px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frp-team-accent, #c73200);
}

.frp-team-card__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--frp-team-zacht, #6b7280);
}
.frp-team-card__desc p { margin: 0 0 8px; }
.frp-team-card__desc p:last-child { margin-bottom: 0; }

.frp-team-card__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.frp-team-card__area-tag {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--frp-gebied-chip-tekst, var(--frp-team-accent, #c73200));
    background: var(--frp-gebied-chip-vlak, var(--frp-team-vlak, #fdf4ec));
    border-radius: 6px;
    padding: 3px 8px;
}

/* De telchip van de ingeklapte werkgebieden: dezelfde vorm, maar neutraal,
   zodat hij niet als zoveelste gebied leest. De volledige lijst hangt eronder
   als tooltip. */
.frp-team-card__area-tag--meer {
    color: var(--frp-gebied-telchip-tekst, var(--frp-team-zacht, #6b7280));
    background: transparent;
    border: 1px solid var(--frp-gebied-telchip-rand, var(--frp-team-rand, #e5e7eb));
    cursor: default;
}

/* ── Voet ──────────────────────────────────────────────────────────────
   Alles wat onderaan hoort. margin-top: auto duwt het blok naar de bodem,
   zodat kaarten in een rij op dezelfde lijn eindigen ook als de een meer
   gebieden of een langere tekst heeft dan de ander. */
.frp-team-card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--frp-team-rand, #e5e7eb);
}
.frp-team-card__foot > :first-child { margin-top: 0; }

/* Talen als een enkele regel in plaats van een tweede rij pillen: twee soorten
   chips onder elkaar lazen als een en dezelfde lijst. */
.frp-team-card__langs {
    display: block;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--frp-team-zacht, #6b7280);
}
.frp-team-card__foot > .frp-team-card__langs:first-child { margin-top: 0; }

.frp-team-card__langs-label {
    display: inline-block;
    margin-right: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frp-team-zacht, #6b7280);
    opacity: .75;
}

.frp-team-card__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frp-team-card__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--frp-team-zacht, #6b7280);
    text-decoration: none;
    word-break: break-word;
    transition: color .15s ease;
}
.frp-team-card__contact-link svg {
    flex-shrink: 0;
    color: var(--frp-team-accent, #c73200);
    transition: color .15s ease;
}
.frp-team-card__contact-link:hover,
.frp-team-card__contact-link:focus-visible {
    color: var(--frp-team-accent-diep, #a32c00);
}
.frp-team-card__contact-link:hover svg,
.frp-team-card__contact-link:focus-visible svg {
    color: var(--frp-team-accent-diep, #a32c00);
}

/* =============================================
   [frp_specialist] — de specialist bij een woning
   ============================================= */

.frp-specialist { margin: 24px 0; }

.frp-specialist__titel {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--frp-team-tekst, #111827);
}

.frp-specialist-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e5e7eb);
    border-radius: var(--frp-team-radius, 12px);
    box-shadow: var(--frp-team-schaduw, 0 1px 3px rgba(17,24,39,.08), 0 10px 24px rgba(17,24,39,.06));
    padding: 22px;
}

.frp-specialist-card__photo {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: calc(var(--frp-team-radius, 12px) - 4px);
    overflow: hidden;
    background: var(--frp-team-vlak, #fdf4ec);
}
.frp-specialist-card__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.frp-specialist-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frp-specialist-card__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--frp-team-tekst, #111827);
}

.frp-specialist-card__role {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--frp-specialist-functie, var(--frp-team-accent, #c73200));
}

.frp-specialist-card__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--frp-team-zacht, #6b7280);
}

.frp-specialist-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.frp-specialist-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
/* De iconen stonden op 15 pixels, de maat die bij een knop met tekst ernaast
   hoort. In een rond knopje van 40 zonder label is het icoon het enige wat er
   staat en mag het groter: 17 in de kaart, 20 in de pop-in. De maat komt uit de
   CSS en niet uit het SVG-attribuut, zodat één regel alle knoppen dekt. */
.frp-specialist-btn svg { flex-shrink: 0; width: 17px; height: 17px; }
.frp-specialist-card--popin .frp-specialist-btn svg { width: 20px; height: 20px; }
.frp-specialist-compact__actions .frp-specialist-btn svg { width: 18px; height: 18px; }

/* De gevulde knoppen. De knopkleur is een eigen instelling, maar staat leeg
   totdat iemand hem invult; dan valt hij hier terug op de accentkleur. Zo blijft
   een site die alleen het accent wijzigt vanzelf kloppen. */
/* Drie lagen per knop, van fijn naar grof: de kleur van deze knop, anders de
   algemene knopkleur, anders de accentkleur. Alle drie staan standaard leeg,
   dus zonder instellingen komt hier precies de oude waarde uit. De hovertint
   van een eigen knopkleur wordt in PHP uitgerekend, want CSS kan niet aftakken
   op "heeft de beheerder deze kleur gezet". */
.frp-specialist-btn--call {
    background: var(--frp-specialist-knop-bellen, var(--frp-specialist-knop-vlak, var(--frp-team-accent, #c73200)));
    color: var(--frp-specialist-knop-tekst, #fff);
}
.frp-specialist-btn--call:hover,
.frp-specialist-btn--call:focus-visible {
    background: var(--frp-specialist-knop-bellen-hover, var(--frp-specialist-knop-vlak-hover, var(--frp-team-accent-diep, #a32c00)));
    color: var(--frp-specialist-knop-tekst, #fff);
}

.frp-specialist-btn--whatsapp {
    background: var(--frp-specialist-knop-whatsapp, var(--frp-specialist-knop-vlak, var(--frp-team-accent, #c73200)));
    color: var(--frp-specialist-knop-tekst, #fff);
}
.frp-specialist-btn--whatsapp:hover,
.frp-specialist-btn--whatsapp:focus-visible {
    background: var(--frp-specialist-knop-whatsapp-hover, var(--frp-specialist-knop-vlak-hover, var(--frp-team-accent-diep, #a32c00)));
    color: var(--frp-specialist-knop-tekst, #fff);
}

/* De omlijnde knoppen. Contact en LinkedIn stonden hier tot 1.106.0 niet bij en
   kregen dus geen enkele kleur: met een label erbij viel dat nauwelijks op, als
   los icoon werd het een kaal rondje zonder rand. */
.frp-specialist-btn--mail,
.frp-specialist-btn--contact {
    background: var(--frp-team-paneel, #fff);
}
.frp-specialist-btn--mail {
    color: var(--frp-specialist-knop-email, var(--frp-specialist-knop-rand, var(--frp-team-accent, #c73200)));
    border-color: var(--frp-specialist-knop-email, var(--frp-specialist-knop-rand, var(--frp-team-accent, #c73200)));
}
.frp-specialist-btn--contact {
    color: var(--frp-specialist-knop-contact, var(--frp-specialist-knop-rand, var(--frp-team-accent, #c73200)));
    border-color: var(--frp-specialist-knop-contact, var(--frp-specialist-knop-rand, var(--frp-team-accent, #c73200)));
}
/* LinkedIn is een gevulde knop en geen omlijnde: het merkteken is wit op
   LinkedIn-blauw, zo staat het overal. Als omlijnde knop met een blauw logo op
   wit leest hij als een uitzondering tussen de andere knoppen in plaats van als
   het merk. */
.frp-specialist-btn--linkedin {
    background: var(--frp-specialist-knop-linkedin, var(--frp-specialist-knop-vlak, var(--frp-team-accent, #c73200)));
    color: var(--frp-specialist-knop-tekst, #fff);
    border-color: transparent;
}
.frp-specialist-btn--linkedin:hover,
.frp-specialist-btn--linkedin:focus-visible {
    background: var(--frp-specialist-knop-linkedin-hover, var(--frp-specialist-knop-vlak-hover, var(--frp-team-accent-diep, #a32c00)));
    color: var(--frp-specialist-knop-tekst, #fff);
}
.frp-specialist-btn--mail:hover,
.frp-specialist-btn--mail:focus-visible,
.frp-specialist-btn--contact:hover,
.frp-specialist-btn--contact:focus-visible {
    background: var(--frp-team-vlak, #fdf4ec);
}

/* Compacte stijl: één regel met foto, naam en icoon-knoppen. */
.frp-specialist-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e5e7eb);
    border-radius: var(--frp-team-radius, 12px);
    box-shadow: var(--frp-team-schaduw, 0 1px 3px rgba(17,24,39,.08), 0 10px 24px rgba(17,24,39,.06));
    padding: 10px 14px;
}

.frp-specialist-compact__photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.frp-specialist-compact__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--frp-team-tekst, #111827);
    margin-right: auto;
}

.frp-specialist-compact__actions {
    display: flex;
    gap: 6px;
}
.frp-specialist-compact__actions .frp-specialist-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

/* =============================================
   Mobiel
   ============================================= */

@media screen and (max-width: 600px) {
    .frp-specialist-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .frp-specialist-card__actions { justify-content: center; }
}

/* =============================================
   Reduced motion
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    .frp-team-card,
    .frp-team-card__contact-link,
    .frp-team-card__contact-link svg,
    .frp-specialist-btn {
        transition: none;
    }
    .frp-team-card:hover,
    .frp-team-card:focus-within {
        transform: none;
    }
    .frp-specialist-btn--call:hover,
    .frp-specialist-btn--whatsapp:hover {
        transform: none;
    }
}

/* ── De specialist als pop-in ───────────────────────────────────────────────
   Zelfde kaart als in de shortcode, in een hoek van het scherm. De animatie
   komt uit de richting waar het blok vandaan komt, zodat hij eruitziet alsof
   hij uit de hoek schuift en niet alsof hij op het scherm valt.

   z-index 9998: onder een cookiemelding en onder de savelist-popup, want die
   twee vragen om een antwoord en dit blok niet. */
.frp-specialist-popin {
    position: fixed;
    z-index: 9998;
    width: min(340px, calc(100vw - 32px));
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .24s ease, transform .24s ease;
    will-change: opacity, transform;
}

.frp-specialist-popin.is-zichtbaar { opacity: 1; transform: none; }

.frp-specialist-popin--rechtsonder { right: 16px; bottom: 16px; }
.frp-specialist-popin--linksonder  { left: 16px;  bottom: 16px; }
.frp-specialist-popin--rechtsboven { right: 16px; top: 16px; transform: translateY(-16px); }
.frp-specialist-popin--linksboven  { left: 16px;  top: 16px; transform: translateY(-16px); }

/* De kaart in de pop-in staat los op de pagina en heeft dus zijn eigen rand en
   schaduw nodig; in de shortcode zit hij in de opmaak van de pagina. */
.frp-specialist-popin .frp-specialist-card {
    margin: 0;
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e4e9f2);
    border-radius: var(--frp-specialist-popin-radius, 14px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    padding: 16px;
}

.frp-specialist-popin__sluit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--frp-team-zacht, #64748b);
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e4e9f2);
    border-radius: 50%;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

/* GEMETEN 21-09-2026 op valzierestates.com: het paneel is daar zwart met witte
   tekst, en deze hover zette het kruisje op #0f172a. Dat is zwart op zwart, dus
   bij het aanwijzen verdween precies de knop die je wilde indrukken. Een vaste
   kleur kan hier niet: de hover moet de tekstkleur van de kaart volgen. */
.frp-specialist-popin__sluit:hover,
.frp-specialist-popin__sluit:focus-visible {
    color: var(--frp-specialist-sluit-tekst-hover, var(--frp-team-tekst, #0f172a));
    border-color: var(--frp-specialist-sluit-rand-hover, var(--frp-team-rand, #cbd5e1));
}

/* De sleepgreep. Alleen op een telefoon, waar het blok als balk onderaan staat
   en precies daar zit waar iemand wil tikken. Wegvegen naar beneden is daar het
   gebaar dat mensen kennen van elk ander paneel; het kruisje blijft ernaast
   staan voor wie liever tikt. Buiten de telefoonmaat zit het blok in een hoek en
   is er niets om weg te vegen, dus dan is de greep er niet. */
.frp-specialist-popin__greep {
    display: none;
    position: absolute;
    /* Op de rand en niet erbinnen: zo neemt de greep geen hoogte af van de
       balk, en is meteen te zien dat je aan het blok zelf trekt. */
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 52px;
    height: 22px;
    padding: 0;
    background: var(--frp-team-paneel, #fff);
    border: 1px solid var(--frp-team-rand, #e4e9f2);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, .06);
    cursor: grab;
    touch-action: none;
}
.frp-specialist-popin__greep::before {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--frp-team-zacht, #94a3b8);
}
.frp-specialist-popin__greep:active { cursor: grabbing; }
.frp-specialist-popin__greep:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.frp-specialist-popin.is-sleept { transition: none; }
.frp-specialist-popin__sluit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Op een telefoon geen kaartje in de hoek maar een balk onderaan. Een blok in
   de hoek dekt daar precies de knop waar iemand heen wil. */
@media screen and (max-width: 600px) {
    .frp-specialist-popin,
    .frp-specialist-popin--rechtsonder,
    .frp-specialist-popin--linksonder,
    .frp-specialist-popin--rechtsboven,
    .frp-specialist-popin--linksboven {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        transform: translateY(100%);
    }

    /* Op een telefoon is dit een balkje en geen kaart: foto links, naam en
       functie in het midden, knoppen rechts. Een raster in plaats van flexbox,
       omdat de knoppen in de HTML binnen de tekstkolom staan en er op deze maat
       naast horen. `display: contents` op die kolom haalt hem uit de opmaak weg
       zonder de opbouw van de kaart te veranderen, zodat naam, functie en
       knoppen hun eigen vak in het raster krijgen. */
    .frp-specialist-popin .frp-specialist-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "foto naam    knoppen"
            "foto functie knoppen";
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        border-radius: var(--frp-specialist-popin-radius, 14px) var(--frp-specialist-popin-radius, 14px) 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        /* Rechts extra ruimte: daar staat de sluitknop in de hoek, en zonder die
           marge schuiven de contactknoppen eronder. */
        padding: 12px 42px calc(12px + env(safe-area-inset-bottom)) 16px;
    }

    /* De foto stond hier fout: alleen de img ging naar 48 pixels, het kader
       eromheen hield zijn 104 en liet een leeg vlak achter naast de kop. Kader
       en beeld krijgen nu dezelfde maat. */
    /* Vierkant met een ronding, in dezelfde vorm als het blok zelf. Een rondje
       is een portret, een vierkant is een pasfoto naast een regel tekst. */
    .frp-specialist-popin .frp-specialist-card__photo {
        grid-area: foto;
        width: 46px;
        height: 46px;
        border-radius: 10px;
    }
    .frp-specialist-popin .frp-specialist-card__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .frp-specialist-popin .frp-specialist-card__body { display: contents; }
    .frp-specialist-popin .frp-specialist-card__name {
        grid-area: naam;
        align-self: end;
        text-align: left;
        font-size: 14.5px;
    }
    .frp-specialist-popin .frp-specialist-card__role {
        grid-area: functie;
        align-self: start;
        text-align: left;
        font-size: 12px;
    }
    .frp-specialist-popin .frp-specialist-card__desc { display: none; }

    /* De knoppen staan over beide regels en dus verticaal in het midden naast
       de naam en de functie. */
    .frp-specialist-popin .frp-specialist-card__actions {
        grid-area: knoppen;
        align-self: center;
        margin: 0;
        gap: 6px;
    }
    /* De werkgebieden vallen weg: op deze breedte passen er twee van de vier en
       is het blok twee keer zo hoog voor informatie die je pas zoekt als je al
       contact overweegt. */
    .frp-specialist-popin .frp-specialist-card__specialisme { display: none; }

    /* De sluitknop hoort bij een kaart in de hoek. Op de balk sleep je hem weg
       met de greep, en dan staat een kruisje van 28 pixels naast een naam
       alleen maar in de weg. */
    .frp-specialist-popin__sluit { top: 6px; right: 8px; width: 24px; height: 24px; }
    .frp-specialist-popin__greep { display: block; }
}

/* Wie beweging heeft uitgezet krijgt hem gewoon, zonder dat hij ergens vandaan
   komt schuiven. */
@media (prefers-reduced-motion: reduce) {
    .frp-specialist-popin {
        transition: opacity .01ms;
        transform: none;
    }
}

/* De werkgebieden onder de knoppen. Dit is waar iemand op afgaat: niet wie je
   bent, maar of je over zijn streek gaat. */
.frp-specialist-card__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
}

.frp-specialist-card__area {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--frp-gebied-chip-tekst, var(--frp-team-zacht, #475569));
    background: var(--frp-gebied-chip-vlak, var(--frp-team-vlak, #f1f5f9));
    border-radius: 999px;
    padding: 1px 9px;
}

/* De werkgebieden in de pop-in: een eigen regel over de volle breedte van het
   blok, met een kopje erboven. In de smalle kolom naast de foto vielen ze
   uiteen over drie of vier regels en werd het blok een half scherm hoog.
   flex-basis 100% werkt alleen omdat de kaart in de pop-in mag doorlopen naar
   een tweede regel, zie .frp-specialist-card--popin hieronder. */
.frp-specialist-card__specialisme {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    /* De lijn houdt minimaal tien pixels afstand tot wat erboven staat. Met de
       rijafstand van de kaart op nul is deze marge de enige ruimte die er nog
       zit, dus zes was te krap. */
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--frp-team-rand, #e5e7eb);
}

.frp-specialist-card__specialisme-kop {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frp-team-zacht, #6b7280);
}

/* Eén regel, en bij te veel gebieden schuift die regel opzij in plaats van te
   breken. Een blok dat bij de ene specialist twee regels hoog is en bij de
   volgende vijf, springt op elke woningpagina van formaat. */
.frp-specialist-card__specialisme .frp-specialist-card__areas {
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.frp-specialist-card__specialisme .frp-specialist-card__areas::-webkit-scrollbar { display: none; }
.frp-specialist-card__specialisme .frp-specialist-card__area { white-space: nowrap; }

/* De kaart in de pop-in mag doorlopen naar een tweede regel, zodat het blok
   met de werkgebieden onder de foto en de tekst uitkomt en niet ernaast. */
.frp-specialist-card--popin {
    flex-wrap: wrap;
    align-items: center;
    /* GEMETEN: het gat tussen de foto en de scheidingslijn was 27 pixels, en
       daarvan kwam 20 uit de `gap: 20px` van de basiskaart. Die gap is bedoeld
       als ruimte TUSSEN de foto en de tekst ernaast, maar zodra de kaart naar een
       tweede regel doorloopt telt hij ook als rijafstand. Kolomafstand houden,
       rijafstand eraf; de ruimte boven de lijn komt van het blok zelf. */
    row-gap: 0;
}

/* De naam een slag kleiner in de pop-in. Op 17 pixels stak hij als kop uit
   boven een blok dat verder uit kleine tekst en icoonknoppen bestaat, en dat
   maakte de regel onnodig hoog. */
.frp-specialist-card--popin .frp-specialist-card__name { font-size: 15.5px; }

/* De functie hoort bij de naam en is geen losse regel: de kolomafstand van 8
   pixels uit de basiskaart zette hem net zover van de naam als de knoppen
   eronder, waardoor de drie regels als drie losse dingen lazen. De kolomafstand
   is nul: de regelhoogte van de naam levert zelf al genoeg lucht, en de twee
   regels horen als één blokje te lezen. De knoppen houden hun eigen ruimte via
   de marge op de knoppenrij. */
.frp-specialist-card--popin .frp-specialist-card__body { gap: 0; }
.frp-specialist-card--popin .frp-specialist-card__name { line-height: 1.25; }
.frp-specialist-card--popin .frp-specialist-card__actions { margin-top: 12px; }

/* Alleen-icoonknoppen in de pop-in. Vijf knoppen met een label passen niet op
   340 px; als icoon staan ze op één regel naast elkaar. 40 px is de kleinste
   maat die op een telefoon nog betrouwbaar te raken is. */
.frp-specialist-card--popin .frp-specialist-card__actions {
    flex-wrap: nowrap;
    gap: 8px;
}
.frp-specialist-card--popin .frp-specialist-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
}

/* ------------------------------------------------------------------
   Fotobehandeling (1.149.0)

   Een portretreeks uit verschillende jaren en verschillende camera's valt op
   een rij naast elkaar uiteen: de een binnen met geel licht, de ander buiten
   in de zon. Zwartwit of sepia over alle foto's trekt dat recht. De klasse
   hangt op het blok en niet op de img, zodat het teamraster, de
   specialistenkaart en het compacte blok met dezelfde regels bediend worden.

   Bij hover gaat de foto terug naar volle kleur. Dat is geen opsmuk: het laat
   de bezoeker de persoon zien zoals hij is, op het moment dat hij hem
   aanwijst.
   ------------------------------------------------------------------ */
.frp-team-foto--zwartwit .frp-team-card__photo img,
.frp-team-foto--zwartwit.frp-specialist-card .frp-specialist-card__photo img,
.frp-team-foto--zwartwit.frp-specialist-compact .frp-specialist-compact__photo {
    filter: grayscale(1);
    transition: filter .25s ease;
}

.frp-team-foto--sepia .frp-team-card__photo img,
.frp-team-foto--sepia.frp-specialist-card .frp-specialist-card__photo img,
.frp-team-foto--sepia.frp-specialist-compact .frp-specialist-compact__photo {
    filter: sepia(.7);
    transition: filter .25s ease;
}

.frp-team-foto--zwartwit .frp-team-card:hover .frp-team-card__photo img,
.frp-team-foto--zwartwit .frp-team-card:focus-within .frp-team-card__photo img,
.frp-team-foto--sepia .frp-team-card:hover .frp-team-card__photo img,
.frp-team-foto--sepia .frp-team-card:focus-within .frp-team-card__photo img,
.frp-team-foto--zwartwit.frp-specialist-card:hover .frp-specialist-card__photo img,
.frp-team-foto--zwartwit.frp-specialist-card:focus-within .frp-specialist-card__photo img,
.frp-team-foto--sepia.frp-specialist-card:hover .frp-specialist-card__photo img,
.frp-team-foto--sepia.frp-specialist-card:focus-within .frp-specialist-card__photo img {
    filter: none;
}

/* Wie beweging uit heeft staan krijgt de eindstand zonder overgang. */
@media (prefers-reduced-motion: reduce) {
    .frp-team-foto--zwartwit .frp-team-card__photo img,
    .frp-team-foto--sepia .frp-team-card__photo img,
    .frp-team-foto--zwartwit.frp-specialist-card .frp-specialist-card__photo img,
    .frp-team-foto--sepia.frp-specialist-card .frp-specialist-card__photo img {
        transition: none;
    }
}