/* ==================================================================== *
 * Publieke dorpsvacatures — 1-op-1 naar Vacatures.dc.html (3D).
 * Uitklapbare vacaturekaarten met zoeken + type-filter. Alle kleuren/
 * maten via de --portal-*-tokens; eenmalige mockup-waarden staan als
 * rgb() met de mockup-hex in commentaar (BOUWOPDRACHT regel 3).
 * Component-prefix: bcm-.
 * ==================================================================== */

.bcm-vac { display: grid; gap: 22px; }

.bcm-vac__kicker {
    margin: 0 0 13px; color: var(--portal-primary);
    font-family: var(--portal-font-sans);
    font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; line-height: 1;
}
.bcm-vac__hero h1 {
    margin: 0 0 13px; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 500;
    font-size: 42px; line-height: 1.06; letter-spacing: -.015em;
    overflow-wrap: break-word;
}
.bcm-vac__hero h1 em { font-style: italic; font-weight: 500; color: var(--portal-primary); }
.bcm-vac__intro {
    max-width: 600px; margin: 0 0 14px;
    color: rgb(85, 86, 91); /* mockup #55565b — eenmalig */
    font-size: 17px; line-height: 1.55;
}
.bcm-vac__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bcm-vac__meta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; border-radius: var(--portal-radius-pill);
    background: var(--portal-surface); border: 1px solid var(--portal-border);
    color: var(--portal-heading-ink); font-size: 13px; font-weight: 500; line-height: 1;
}
.bcm-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.bcm-dot--blue { background: var(--portal-stripe-5); }
.bcm-dot--amber { background: var(--portal-accent); }

/* --- Toolbar --- */
.bcm-vac__toolbar {
    display: flex; flex-direction: column; gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    background: rgb(251, 248, 241); /* mockup #fbf8f1 — eenmalig */
    box-shadow: 0 6px 18px rgba(35, 37, 42, .06);
}
.bcm-vac__toolbar .bcm-search i { left: 14px; color: rgb(164, 157, 139); } /* mockup #a49d8b — eenmalig */
.bcm-vac__toolbar .bcm-search input {
    padding: 12px 16px 12px 38px;
    font-size: 15px; line-height: 1; color: var(--portal-heading-ink);
    background: var(--portal-surface);
    border: 1px solid rgb(226, 220, 205); /* mockup #e2dccd — eenmalig */
    border-radius: 11px;
}
.bcm-vac__toolbar .bcm-search input:focus-visible {
    outline: none;
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 3px rgba(192, 71, 46, .12); /* mockup-focusring op terracotta */
}
.bcm-vac__filters { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.bcm-vchip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-family: var(--portal-font-sans); font-size: 13px; font-weight: 600; line-height: 1;
    padding: 9px 14px; border-radius: var(--portal-radius-pill);
    background: var(--portal-surface);
    color: rgb(58, 58, 68); /* mockup #3a3a44 — eenmalig */
    border: 1px solid rgb(226, 220, 205); /* mockup #e2dccd — eenmalig */
}
.bcm-vchip__count {
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 2px 6px; border-radius: var(--portal-radius-pill);
    background: var(--portal-border-soft); color: var(--portal-muted-faint);
}
.bcm-vchip.is-active { background: var(--portal-heading); border-color: var(--portal-heading); color: var(--portal-surface); }
.bcm-vchip.is-active .bcm-vchip__count { background: rgba(255, 255, 255, .22); color: var(--portal-surface); }
.bcm-vchip:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.bcm-vac__result { margin-left: auto; align-self: center; color: var(--portal-muted); font-size: 13px; font-weight: 500; line-height: 1; }

/* --- Vacaturekaarten --- */
.bcm-vac__list { display: flex; flex-direction: column; gap: 14px; }

.bcm-vac-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px; overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.bcm-vac-card:hover, .bcm-vac-card.is-open {
    box-shadow: 0 10px 26px rgba(35, 37, 42, .1);
    border-color: rgb(220, 201, 166); /* mockup #dcc9a6 — eenmalig (zelfde als kaart-hover) */
}

.bcm-vac-card__head {
    width: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; border: 0; cursor: pointer; text-align: left; color: inherit;
}
/* Het portalthema kleurt gefocuste/actieve buttons soms in de merkkleur; hou de kop
 * transparant zodat de donkere titel altijd leesbaar blijft (kruis-thema veilig). */
.bcm-vac-card__head,
.bcm-vac-card__head:hover,
.bcm-vac-card__head:focus,
.bcm-vac-card__head:focus-visible,
.bcm-vac-card__head:active { background: transparent !important; }
.bcm-vac-card__head:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: -3px; }

.bcm-vac-card__mono {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--portal-surface-soft);
    font-family: var(--portal-font-serif); font-weight: 700; font-size: 20px; line-height: 1;
    color: var(--portal-muted);
}
.bcm-vac-card__mono.bcm-cat--winkels  { color: var(--portal-primary); background-color: var(--portal-cat-winkels); }
.bcm-vac-card__mono.bcm-cat--horeca   { color: var(--portal-accent-deep); background-color: var(--portal-cat-horeca); }
.bcm-vac-card__mono.bcm-cat--zorg     { color: var(--portal-open); background-color: var(--portal-cat-zorg); }
.bcm-vac-card__mono.bcm-cat--sport    { color: var(--portal-stripe-5); background-color: var(--portal-cat-sport); }
.bcm-vac-card__mono.bcm-cat--diensten { color: var(--portal-stripe-3); background-color: var(--portal-cat-diensten); }
.bcm-vac-card__mono.bcm-cat--verblijf { color: var(--portal-stripe-4); background-color: var(--portal-cat-verblijf); }

.bcm-vac-card__title { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.bcm-vac-card__name {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 600; font-size: 18px; line-height: 1.25;
}
.bcm-vac-card__new {
    display: inline-block; padding: 4px 8px; border-radius: var(--portal-radius-pill);
    background: var(--portal-accent); color: var(--portal-surface);
    font-family: var(--portal-font-sans);
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.bcm-vac-card__sub { margin-top: 4px; color: var(--portal-muted); font-size: 13px; line-height: 1.3; }

.bcm-vac-card__tags { display: flex; gap: 7px; flex-wrap: wrap; }
.bcm-vtag {
    padding: 6px 10px; border-radius: var(--portal-radius-pill);
    font-size: 11.5px; font-weight: 600; line-height: 1;
    background: var(--portal-chip);
    border: 1px solid var(--portal-chip-border);
    color: rgb(106, 100, 85); /* mockup #6a6455 — eenmalig */
}
.bcm-vtag--type { background: rgb(233, 240, 247); /* mockup #e9f0f7 — eenmalig */ border: 0; color: var(--portal-stripe-5); padding: 6px 10px; }
.bcm-vtag--pay { background: var(--portal-open-soft); border: 0; color: var(--portal-open); }
.bcm-vac-card__ago { color: var(--portal-mono-faint); font-size: 12px; line-height: 1; white-space: nowrap; }
.bcm-vac-card__chev { color: var(--portal-muted-faint); font-size: 14px; line-height: 1; transition: transform .15s ease; }
.bcm-vac-card.is-open .bcm-vac-card__chev { transform: rotate(180deg); }

.bcm-vac-card__body { border-top: 1px solid var(--portal-border-soft); }
.bcm-vac-card__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; padding: 20px 22px; }
.bcm-vac-card__coltitle {
    margin-bottom: 8px; color: var(--portal-muted-faint);
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
}
.bcm-vac-card__cols p { margin: 0; color: var(--portal-text); font-size: 13.5px; line-height: 1.6; }

.bcm-vac-card__foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 22px;
    background: rgb(251, 248, 241); /* mockup #fbf8f1 — eenmalig */
    border-top: 1px solid var(--portal-border-soft);
}
.bcm-vac-card__apply .bcm-eml-reveal {
    display: inline-block; padding: 12px 18px; border-radius: 10px; border: 0; cursor: pointer;
    background: var(--portal-primary); color: var(--portal-surface);
    font-family: var(--portal-font-sans); font-size: 13.5px; font-weight: 600; line-height: 1;
}
.bcm-vac-card__apply .bcm-eml-reveal:hover { background: var(--portal-primary-strong); }
.bcm-vac-card__apply .bcm-eml-out a { color: var(--portal-primary); font-weight: 600; font-size: 13.5px; }
.bcm-vac-card__call [data-bcm-tel-out] a {
    display: inline-block; padding: 12px 18px; border-radius: 10px;
    background: var(--portal-surface); color: var(--portal-heading-ink);
    border: 1px solid var(--portal-border-strong);
    font-size: 13.5px; font-weight: 600; line-height: 1; text-decoration: none;
}
.bcm-vac-card__call [data-bcm-tel-out] a:hover { border-color: var(--portal-primary); color: var(--portal-primary); }
.bcm-link { color: var(--portal-primary); text-decoration: none; font-weight: 600; font-size: 13px; line-height: 1; }
.bcm-link:hover { text-decoration: underline; }
.bcm-vac-card__note { margin-left: auto; color: var(--portal-muted-faint); font-size: 12px; line-height: 1.4; }

.bcm-vac__noresults {
    text-align: center; padding: 50px 20px;
    border: 1px dashed var(--portal-border-dashed); border-radius: 16px;
    background: rgb(251, 248, 241); /* mockup #fbf8f1 — eenmalig */
}
.bcm-vac__noresults-title {
    margin-bottom: 8px; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 500; font-size: 19px; line-height: 1.3;
}
.bcm-vac__noresults p { margin: 0; color: var(--portal-text-soft); font-size: 14px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
    .bcm-vac-card, .bcm-vac-card__chev { transition: none; }
}