/* ==================================================================== *
 * Publieke Bedrijven-module — gids, bedrijfskaart, quick-view, detail.
 * 1-op-1 gebouwd op de *.dc.html-mockups (designmap op 21-07-2026 opgeruimd,
 * opvraagbaar via de git-historie).
 * ALLE kleuren/maten via de --portal-*-tokens (portal-tokens.css).
 * Geen hardcoded hex in dit componentbestand. Component-prefix: bcm-.
 * ==================================================================== */

.bcm-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* Bovenaan houdt de module zelf geen ruimte meer aan: hij staat altijd in de inhoudskolom van
   een thema, en die geeft de pagina al een bovenmarge. Die twee stapelden: onder de kopbalk
   stond 45 pixels leeg op een telefoon en 81 op een breed scherm, terwijl elke andere pagina
   van de site op 25 begint. Nu is dat gelijk.
   Onderaan blijft de ruimte wél staan: daar houdt hij de laatste kaart van de voet af. */
.bcm-public { padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); }

.bcm-public__shell {
    width: min(1560px, calc(100% - clamp(1.25rem, 5vw, 5rem)));
    margin: 0 auto;
}

.bcm-public__shell > .portal-mobile-switchboard-v147 { margin-bottom: 1.2rem; }

/* De kolom expliciet op minmax(0, 1fr). Zonder die 0 krijgt de impliciete kolom de breedte
   van zijn breedste inhoud (een grid-item heeft standaard min-width:auto), en dan groeit de
   sectie eronder buiten dit kader. Op een telefoon werd de gids daardoor 756px breed in een
   kolom van 323px, met een horizontale schuifbalk over de hele pagina. De min-width:0
   hierboven beschermt dit blok zelf, niet zijn kinderen. */
.bcm-public__content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); }

/* --- Hero --- */
.bcm-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    /* De bovenregel hoort bij de kop eronder, dus die staat er dichter tegenaan. */
    margin: 0 0 .45rem;
    color: var(--portal-primary);
    font-family: var(--portal-font-sans);
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

.bcm-directory__hero h1 {
    margin: 0;
    color: var(--portal-heading);
    font-family: var(--portal-font-serif); font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.1rem);
    /* Zonder eigen regelafstand erft een kop van 50 pixels de 1,6 van de pagina, en dan staat
       er anderhalve lege regel omheen. De tekening houdt 1,06 aan; 1,1 laat een tweede regel
       nog net ademen bij een lange plaatsnaam. */
    line-height: 1.1;
    letter-spacing: -.02em;
}
.bcm-directory__hero h1 em { font-style: italic; color: var(--portal-primary); }

.bcm-directory__intro {
    max-width: 44rem; margin: .55rem 0 0;
    color: var(--portal-text);
    /* 1,65 was ruim voor twee regels onder een kop; 1,5 leest even prettig en scheelt lucht. */
    font-size: 1.02rem; line-height: 1.5;
}

/* --- Toolbar --- */
.bcm-toolbar {
    display: flex; flex-direction: column; gap: .95rem;
    padding: clamp(.9rem, 2vw, 1.15rem);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card);
    background: var(--portal-surface);
    box-shadow: 0 1px 2px rgba(35, 37, 42, .04);
}

.bcm-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

.bcm-search {
    position: relative; flex: 1 1 220px; min-width: 180px;
    display: flex; align-items: center;
}
.bcm-search i {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--portal-muted);
    pointer-events: none;
}
.bcm-search input {
    width: 100%; padding: .7rem .9rem .7rem 2.3rem;
    border: 1px solid var(--portal-border); border-radius: var(--portal-radius-btn);
    background: var(--portal-surface-tint); color: var(--portal-heading-ink);
    font: inherit;
}
.bcm-search input::placeholder { color: var(--portal-muted); }
.bcm-search input:focus-visible {
    outline: 2px solid var(--portal-primary); outline-offset: 1px;
    border-color: var(--portal-primary);
}

/* max-width en min-width horen hier bij elkaar: een <select> is standaard zo breed als zijn
   langste optie, en de categorieën komen uit het Handelsregister (tot 88 tekens). Op een
   telefoon duwde die ene keuzelijst de hele pagina naar 728px breed. */
.bcm-select {
    padding: .62rem .8rem; border-radius: 10px;
    border: 1px solid var(--portal-border-strong);
    background: var(--portal-surface); color: var(--portal-heading-ink);
    font: inherit; font-weight: 600; cursor: pointer;
    max-width: 100%; min-width: 0;
}
.bcm-select:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 1px; }

.bcm-toggle {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    padding: .6rem .95rem; border-radius: var(--portal-radius-pill);
    border: 1px solid var(--portal-border-strong);
    background: var(--portal-surface); color: var(--portal-heading-ink);
    font: inherit; font-weight: 700; cursor: pointer;
}
.bcm-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--portal-open-dot); flex: 0 0 auto; }
.bcm-toggle__count {
    padding: .12rem .45rem; border-radius: var(--portal-radius-pill); font-size: .78rem; font-weight: 700;
    background: var(--portal-open-soft); color: var(--portal-open);
}
.bcm-toggle.is-active {
    background: var(--portal-heading); border-color: var(--portal-heading); color: var(--portal-surface);
}
.bcm-toggle.is-active .bcm-toggle__count { background: rgba(255, 255, 255, .22); color: var(--portal-surface); }
.bcm-toggle:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }

.bcm-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bcm-chips--places { border-top: 1px solid var(--portal-border-soft); padding-top: .85rem; }

.bcm-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .8rem; border-radius: var(--portal-radius-pill);
    border: 1px solid var(--portal-border-strong);
    background: var(--portal-surface); color: var(--portal-text);
    font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer;
}
.bcm-chip__count {
    padding: .1rem .42rem; border-radius: var(--portal-radius-pill); font-size: .74rem; font-weight: 700;
    background: var(--portal-chip); color: var(--portal-text-soft);
}
.bcm-chip.is-active {
    background: var(--portal-heading); border-color: var(--portal-heading); color: var(--portal-surface);
}
.bcm-chips--places .bcm-chip.is-active {
    background: var(--portal-primary); border-color: var(--portal-primary);
}
.bcm-chip.is-active .bcm-chip__count { background: rgba(255, 255, 255, .2); color: var(--portal-surface); }
.bcm-chip:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }

.bcm-dropdowns { display: none; gap: .6rem; flex-wrap: wrap; }
.bcm-dropdowns .bcm-select { flex: 1 1 150px; }

/* De regel onder de filters: wie er nog niet in staat, weet meteen hoe hij erbij komt. */
.bcm-toolbar__melden {
    margin: 0;
    font-family: var(--portal-font-sans);
    font-size: .92rem;
    color: var(--portal-muted);
}
.bcm-toolbar__melden a { color: var(--portal-primary); font-weight: 600; }

/* Het slotblok onderaan de gids. */
.bcm-oproep {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.4rem; flex-wrap: wrap;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--portal-border-strong);
    border-radius: var(--portal-radius, 12px);
    background: var(--portal-surface-soft);
}
.bcm-oproep__tekst { flex: 1 1 320px; min-width: 0; }
.bcm-oproep__tekst h2 {
    margin: 0 0 .4rem;
    font-family: var(--portal-font-serif);
    color: var(--portal-heading-ink);
}
.bcm-oproep__tekst p:last-child {
    margin: 0;
    font-family: var(--portal-font-sans);
    color: var(--portal-muted);
    max-width: 58ch;
}
.bcm-oproep__knoppen { display: flex; gap: .7rem; flex-wrap: wrap; }

/* --- Secties --- */
.bcm-section { display: grid; gap: 1rem; }
.bcm-section__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.bcm-section__head h2 {
    margin: 0; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 500;
    font-size: clamp(1.3rem, 3vw, 1.6rem); letter-spacing: -.01em;
}
.bcm-section__meta { color: var(--portal-muted); font-size: .95rem; }

.bcm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.35rem);
}

/* --- Kaart (BedrijfKaart.dc.html) --- */
/* Zonder deze regel doet filteren niets zichtbaars. De browser verbergt een element met het
   `hidden`-attribuut via `display: none`, maar dat is een browserregel en die verliest van elke
   eigen `display` in dit bestand: `.bcm-card { display: flex }` hield de kaart gewoon in beeld.
   Je zag dan "1 resultaat" boven een lijst waar alles nog in stond. De vlag hoort hier bij de
   elementen die het script echt verbergt. */
.bcm-card[hidden],
.bcm-section[hidden],
.bcm-noresults[hidden],
.bcm-pager[hidden],
.bcm-toolbar[hidden] { display: none !important; }

.bcm-card {
    display: flex;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card); overflow: hidden;
    background: var(--portal-surface);
    box-shadow: 0 1px 2px rgba(35, 37, 42, .04);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.bcm-card:hover, .bcm-card:focus-within {
    box-shadow: var(--portal-shadow-card-hover);
    border-color: var(--portal-border-strong);
    transform: translateY(-3px);
}
.bcm-card__link {
    display: flex; flex-direction: column; width: 100%;
    color: inherit; text-decoration: none;
}
.bcm-card__link:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: -2px; }

.bcm-card__body { display: flex; flex-direction: column; gap: .68rem; flex: 1; padding: 17px 18px 15px; }
.bcm-card__head { display: flex; flex-direction: column; gap: .18rem; }
.bcm-card__name {
    color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 600;
    font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em;
    /* Handelsnamen zijn soms één lang woord ("Administratiekantoor"). Zonder deze regel
       loopt dat woord buiten de kaart en knipt de kaartrand het af. */
    overflow-wrap: anywhere;
}
.bcm-card__sub { color: var(--portal-muted); font-size: .81rem; overflow-wrap: anywhere; }
.bcm-card__status { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.bcm-card__desc { margin: 0; color: var(--portal-text); font-size: .875rem; line-height: 1.55; flex: 1; }
.bcm-card__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.bcm-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin-top: auto; padding-top: .75rem;
    border-top: 1px solid var(--portal-border-soft);
}
.bcm-card__cta { display: inline-flex; align-items: center; gap: .35rem; color: var(--portal-primary); font-weight: 600; font-size: .81rem; }
.bcm-card__gids { color: var(--portal-mono-faint); font-size: .75rem; }

/* --- Cover (logo/monogram + categorietint) --- */
.bcm-cover {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background-color: var(--portal-surface-soft);
    background-image: repeating-linear-gradient(135deg, rgba(35, 37, 42, .04) 0, rgba(35, 37, 42, .04) 1px, transparent 1px, transparent 11px);
    border-bottom: 1px solid var(--portal-chip-border);
}
.bcm-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bcm-cover--photo .bcm-cover__monogram { display: none; }
.bcm-cover__featured, .bcm-cover__logo { position: relative; z-index: 1; }
.bcm-cover--card { height: 128px; }
.bcm-cover--quick { height: 150px; }
.bcm-cover--quick .bcm-cover__featured { top: 14px; right: 56px; padding: 6px 10px; }
.bcm-cover--detail { height: 240px; }
/* Het monogram: de letter die je krijgt als een bedrijf geen beeld heeft.
   Stond op opacity .3 en las als een watermerk dat half was mislukt. Nu een echte tegel met
   de tint van de categorie eromheen, zodat een kaart zonder logo verzorgd oogt in plaats van
   leeg. Zie de toelichting bij .bcm-cover__logo hieronder over het witte vlak. */
.bcm-cover__monogram {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--portal-font-serif); font-weight: 700; letter-spacing: .01em;
    color: var(--portal-primary);
    background: var(--portal-surface, #fff);
    border: 1px solid var(--portal-chip-border);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20, 24, 35, .08);
}
.bcm-cover--card .bcm-cover__monogram { width: 72px; height: 72px; font-size: 38px; }
.bcm-cover--quick .bcm-cover__monogram { width: 82px; height: 82px; font-size: 44px; }
.bcm-cover--detail .bcm-cover__monogram { width: 128px; height: 128px; font-size: 66px; }
.bcm-cover--detail .bcm-cover__featured { top: 16px; right: 18px; padding: 6px 10px; }
/* Het logo op een eigen witte tegel met wat lucht eromheen.
   Zonder dit viel een logo met een witte achtergrond (en dat is het merendeel: het komt van de
   website van het bedrijf, meestal als JPG of als PNG zonder doorzichtige laag) als een kaal wit
   rechthoekje midden op de getinte kaart. Dat las als een fout in de afbeelding. Nu is dat wit
   een bewuste tegel: een logo mét doorzichtige laag staat er net zo goed op. */
.bcm-cover__logo {
    max-height: 58%; max-width: 62%; object-fit: contain;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--portal-chip-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(20, 24, 35, .08);
}
.bcm-cover__featured {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 5px 9px; border-radius: var(--portal-radius-pill);
    font-family: var(--portal-font-sans);
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    background: var(--portal-accent); color: var(--portal-heading);
}

/* Categorietinten + monogramkleuren (exact uit de mockup gemeten). */
.bcm-cat--winkels  { background-color: var(--portal-cat-winkels); }
.bcm-cat--horeca   { background-color: var(--portal-cat-horeca); }
.bcm-cat--zorg     { background-color: var(--portal-cat-zorg); }
.bcm-cat--sport    { background-color: var(--portal-cat-sport); }
.bcm-cat--diensten { background-color: var(--portal-cat-diensten); }
.bcm-cat--verblijf { background-color: var(--portal-cat-verblijf); }
.bcm-cat--winkels  .bcm-cover__monogram { color: var(--portal-primary); }
.bcm-cat--horeca   .bcm-cover__monogram { color: var(--portal-accent); }
.bcm-cat--zorg     .bcm-cover__monogram { color: var(--portal-open); }
.bcm-cat--sport    .bcm-cover__monogram { color: var(--portal-stripe-5); }
.bcm-cat--diensten .bcm-cover__monogram { color: var(--portal-stripe-3); }
.bcm-cat--verblijf .bcm-cover__monogram { color: var(--portal-stripe-4); }

/* --- Status-pill + tags --- */
.bcm-status-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; border-radius: var(--portal-radius-pill); font-size: .78rem; font-weight: 600;
}
.bcm-status-pill.is-open { background: var(--portal-open-soft); color: var(--portal-open); }
.bcm-status-pill.is-open .bcm-status-dot { background: var(--portal-open-dot); }
.bcm-status-pill.is-closed { background: var(--portal-closed-soft); color: var(--portal-closed); }
.bcm-status-pill.is-closed .bcm-status-dot { background: var(--portal-closed-dot); }
.bcm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.bcm-status-note { color: var(--portal-text-soft); font-size: .8rem; }

.bcm-tag {
    display: inline-flex; align-items: center;
    padding: 5px 9px; border-radius: 6px;
    border: 1px solid var(--portal-chip-border);
    background: var(--portal-chip);
    color: var(--portal-text-soft);
    font-size: .72rem; font-weight: 500;
}

/* --- Lege / geen-resultaat staten --- */
.bcm-empty {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card); background: var(--portal-surface-soft);
}
.bcm-empty__icon {
    display: grid; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; place-items: center;
    border-radius: 14px; background: var(--portal-primary-soft);
    color: var(--portal-primary); font-size: 1.2rem;
}
.bcm-empty h2 { margin: .05rem 0 .35rem; color: var(--portal-heading); font-family: var(--portal-font-serif); font-weight: 500; font-size: 1.2rem; }
.bcm-empty p { margin: 0; color: var(--portal-text); line-height: 1.6; }

.bcm-noresults {
    text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.2rem;
    border: 1px dashed var(--portal-border-dashed);
    border-radius: var(--portal-radius-card); background: var(--portal-surface-soft);
}
.bcm-noresults__title { color: var(--portal-heading); font-family: var(--portal-font-serif); font-weight: 500; font-size: 1.2rem; }
.bcm-noresults p { margin: .5rem 0 1rem; color: var(--portal-text); }

/* --- Knoppen (gedeeld met detail/quick-view) --- */
.bcm-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.1rem; border-radius: var(--portal-radius-btn);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
}
.bcm-btn--primary { background: var(--portal-heading); color: var(--portal-surface); }
.bcm-btn--primary:hover { background: var(--portal-primary); color: var(--portal-surface); }
.bcm-btn--ghost {
    background: var(--portal-surface); color: var(--portal-heading);
    border-color: var(--portal-border-strong);
}
.bcm-btn--ghost:hover { border-color: var(--portal-primary); color: var(--portal-primary); }
.bcm-btn:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }

/* --- Contactacties (gedeeld) --- */
.bcm-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bcm-actions__empty { margin: 0; color: var(--portal-text-soft); font-size: .92rem; }

/* In het snelvenster liggen de knoppen in een raster van twee, en niet in een flex-rij die
   afbreekt. Met vier knoppen van ongelijke breedte gaf dat namelijk altijd drie op de eerste
   regel en één verdwaalde op de tweede, elk met zijn eigen breedte. Twee kolommen geeft bij
   vier knoppen een net blok van 2x2, bij drie knoppen een volle regel plus een halve, en bij
   twee knoppen één regel. Gelijke breedtes, gelijke hoogte, links uitgelijnde tekst. */
.bcm-actions--quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: stretch;
}
.bcm-actions--quick > * {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}
.bcm-actions--quick .bcm-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
    .bcm-actions--quick { grid-template-columns: minmax(0, 1fr); }
}
.bcm-eml-reveal {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
}
.bcm-eml-out a { color: var(--portal-primary); font-weight: 600; }
.bcm-pending { font-style: italic; color: var(--portal-muted); }
.bcm-noscript {
    display: flex; align-items: flex-start; gap: .5rem; margin: .8rem 0 0; padding: .8rem .9rem;
    border-radius: 12px; background: var(--portal-primary-soft); color: var(--portal-accent-deep);
    font-size: .9rem; line-height: 1.5;
}

/* --- Openingstijden + feitenlijst (gedeeld met detail) --- */
.bcm-hours, .bcm-factlist { margin: 0; display: flex; flex-direction: column; }
.bcm-hours > div, .bcm-factlist > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--portal-border-soft);
    font-size: 14px; line-height: 1.35;
}
.bcm-hours > div:last-child, .bcm-factlist > div:last-child { border-bottom: 0; }
.bcm-hours dt, .bcm-factlist dt { margin: 0; color: var(--portal-text-soft); }
.bcm-hours dd, .bcm-factlist dd { margin: 0; color: var(--portal-heading-ink); font-weight: 600; text-align: right; }
.bcm-hours .is-closed dd { color: var(--portal-danger); }

/* --- Quick-view modal --- */

/* Deze drie regels zijn er voor thema's die Bootstrap NIET laden (een eigen schil, zoals
   franeker). Zonder Bootstrap heeft `.modal` geen enkele stijl en zou het venster gewoon
   onderaan de pagina meelopen. Ze bijten niet met Bootstrap: staat dat er wel, dan zet het
   `.show` erbij en slaat de verbergregel over, en `.is-open` gebruikt alleen de eigen
   terugval in public.js. */
.bcm-modal:not(.show):not(.is-open) { display: none; }
.bcm-modal.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    /* Boven de onderbalk van de webapp (die staat op 1100). Stond dit lager, dan lag het
       menu over het venster heen en kon je de sluitknop niet eens bereiken. */
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: clamp(.8rem, 4vw, 2rem);
    background: rgba(10, 16, 32, .55);
    overflow-y: auto;
    /* Doorscrollen in het venster mag niet doorslaan naar de pagina eronder. */
    overscroll-behavior: contain;
}
/* HOE BREED EN HOE HOOG. Het venster stond op 560 pixels vast. Op een scherm van 1600 was dat
   een derde van de breedte, met de openingstijden en de bedrijfsgegevens in twee smalle kolommen
   en een lange sliert eronder waar je doorheen moest scrollen. Nu groeit het mee tot 920 en houdt
   het rondom een marge, zodat het beeld gevuld wordt zonder dat het venster tegen de randen plakt.

   ZONDER `.is-open`, EN DAT IS EXPRES. Een thema met een eigen schil laadt Bootstrap niet en
   gebruikt de eigen terugval uit public.js (`.is-open`); een portalthema laadt Bootstrap wel en
   krijgt daar `.show`. Zouden deze maten aan `.is-open` hangen, dan bleef de helft van de sites op
   de smalle Bootstrap-standaard van 500 pixels staan -- precies het verschil dat weg moest.

   DE HOOGTE IS EEN MAXIMUM, GEEN VASTE MAAT. Een bedrijf met weinig gegevens krijgt een klein
   venster; dat hoort ook zo. Alleen wie langer is dan het scherm wordt afgekapt, en dan schuift de
   inhoud binnen het venster in plaats van het hele venster binnen de overlay. Zo blijft de foto
   bovenaan staan terwijl je leest. */
.bcm-modal .modal-dialog {
    width: 100%;
    max-width: 920px;
    max-height: 100%;
    margin: auto;
}
/* Op het Bootstrap-pad zit er geen binnenmarge om het venster heen: daar staat de overlay strak
   tegen de schermrand, en `margin: auto` hierboven gooit ook Bootstraps eigen marge weg. Zonder
   deze twee regels plakte het venster tegen alle vier de schermranden. De eigen terugval
   (`.is-open`) heeft die ruimte al als binnenmarge en krijgt hem dus niet dubbel. */
.bcm-modal:not(.is-open) .modal-dialog {
    max-width: min(920px, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    margin: .75rem auto;
}
/* ELKE schakel tussen het venster en de tekst moet mogen krimpen, anders wint de natuurlijke
   hoogte van de inhoud en groeit het venster toch voorbij het scherm. `min-height: 0` is daarvoor
   nodig: een flex-item weigert standaard kleiner te worden dan zijn eigen inhoud.

   `[data-bcm-modal-content]` HOORT ER OOK BIJ. Dat is het lege omhulsel waar public.js de gekloonde
   inhoud in zet -- onzichtbaar in de opmaak, maar wel een schakel in de keten. Sla je hem over, dan
   blijft hij op `min-height: auto` staan, weigert hij te krimpen, slaat het schuiven in `__body`
   nooit aan en knipt `.modal-content` de onderkant van een lang bedrijf er gewoon af. Inclusief de
   knop "Volledige pagina", die dan onbereikbaar wordt. */
.bcm-modal .modal-dialog,
.bcm-modal [data-bcm-modal-content],
.bcm-modal .bcm-quick { display: flex; flex-direction: column; min-height: 0; }
.bcm-modal [data-bcm-modal-content] { flex: 1 1 auto; }
.bcm-modal .bcm-quick__hero { flex: 0 0 auto; }
.bcm-modal .bcm-quick__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Op een breed scherm mag de foto meegroeien: bij 920 breed oogt een strook van 150 pixels als een
   randje in plaats van een beeld. */
@media (min-width: 900px) {
    .bcm-modal .bcm-cover--quick { height: 210px; }
}

/* Zolang het venster openstaat ligt de pagina eronder stil: geen meescrollen en op een
   telefoon ook geen omlaag vegen om te verversen. Alleen het venster zelf schuift. */
html.bcm-modal-open,
html.bcm-modal-open body {
    overflow: hidden;
    overscroll-behavior-y: none;
    touch-action: pan-x;
}

.bcm-modal .modal-content {
    display: flex; flex-direction: column; min-height: 0;
    /* `width: 100%` is hier geen overbodige regel: `.modal-dialog-centered` zet `align-items:
       center`, en door de `flex-direction: column` hierboven is dat ineens de HORIZONTALE as. Zonder
       deze breedte krimpt het venster dan tot de breedte van zijn inhoud. */
    width: 100%; max-height: 100%;
    overflow: hidden; border: 1px solid var(--portal-border);
    border-radius: 20px; background: var(--portal-surface); color: var(--portal-heading-ink);
    box-shadow: var(--portal-shadow-modal);
}
.bcm-quick__hero { position: relative; }
.bcm-quick__close {
    position: absolute; top: .75rem; right: .75rem; z-index: 2;
    display: grid; width: 2.1rem; height: 2.1rem; place-items: center;
    border: 1px solid var(--portal-border);
    border-radius: 50%; background: rgba(255, 254, 251, .92); color: var(--portal-heading); cursor: pointer;
}
.bcm-quick__close:focus-visible { outline: 2px solid var(--portal-primary); outline-offset: 2px; }
.bcm-quick__body { padding: clamp(1.2rem, 3vw, 1.6rem); display: flex; flex-direction: column; gap: .8rem; }
.bcm-quick__title { margin: 0; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.02em; }
.bcm-quick__sub { margin: 0; color: var(--portal-muted); }
.bcm-quick__status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.bcm-quick__desc { margin: 0; color: var(--portal-text); line-height: 1.65; }
.bcm-quick__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: .3rem; }
.bcm-quick__block h3 { margin: 0 0 .55rem; color: var(--portal-accent-deep); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bcm-quick__footer {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
    margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--portal-border-soft);
}
.bcm-quick__source { display: inline-flex; align-items: flex-start; gap: .4rem; color: var(--portal-text-soft); font-size: .82rem; }
.bcm-quick__full { display: inline-flex; align-items: center; gap: .35rem; color: var(--portal-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bcm-quick__full:hover { text-decoration: underline; }

/* ==================================================================== *
 * Detailpagina (BedrijfDetail.dc.html) — exacte mockup-maten, zelfde
 * view-model als de kaart. Eenmalige mockup-waarden die niet in de tokens
 * staan, staan als rgb() met de mockup-hex in commentaar (BOUWOPDRACHT
 * regel 3: bewuste eenmalige waarden letterlijk overnemen).
 * ==================================================================== */
.bcm-detail .bcm-public__shell { width: min(1040px, calc(100% - clamp(1.25rem, 5vw, 5rem))); }
.bcm-detail__main { display: grid; gap: 22px; }

.bcm-detail__hero {
    border: 1px solid var(--portal-border);
    border-radius: 18px; overflow: hidden; background: var(--portal-surface);
}
.bcm-detail__heading { padding: 26px 30px 28px; display: grid; gap: 18px; }
.bcm-detail__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bcm-detail__title-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bcm-detail__logo {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
    background: var(--portal-surface); border: 1px solid var(--portal-border);
}
.bcm-detail__logo img { max-width: 82%; max-height: 82%; object-fit: contain; }
.bcm-detail__title-col { min-width: 0; }
.bcm-detail__title-col h1 {
    margin: 0 0 6px; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 600;
    font-size: 36px; line-height: 1.1; letter-spacing: -.015em;
    overflow-wrap: break-word; hyphens: auto; /* lange namen op smal scherm afbreken i.p.v. clippen */
}
.bcm-detail__meta { margin: 0; color: var(--portal-muted); font-size: 15px; line-height: 1.4; }
.bcm-detail__aka { margin: 5px 0 0; color: var(--portal-muted-faint); font-size: 13px; line-height: 1.4; }
.bcm-detail__aka span { color: var(--portal-text-soft); font-weight: 500; }
.bcm-detail__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bcm-detail__status .bcm-status-pill { padding: 8px 13px; font-size: 13px; }
.bcm-detail__status .bcm-status-dot { width: 8px; height: 8px; }
.bcm-detail__status .bcm-status-note { color: var(--portal-text-soft); font-size: 13px; font-weight: 500; }
.bcm-detail__lead { margin: 0; color: var(--portal-text); font-size: 16px; line-height: 1.65; max-width: 720px; }
.bcm-detail__sbi { display: grid; gap: 9px; justify-items: start; }
.bcm-detail__sbi-label { color: var(--portal-muted-faint); font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.bcm-detail__sbi-tags { display: flex; flex-wrap: wrap; gap: 7px; }
/* De ruimte tussen de code, de omschrijving en "hoofdactiviteit" komt van `gap` en niet van
   spaties in de opmaak. `.bcm-tag` is een inline-flex, en die gooit spaties tussen zijn
   onderdelen weg: er stond "46.836Groothandel in tegels en plavuizen· hoofdactiviteit"
   aan elkaar geplakt. */
.bcm-sbi { font-size: 12px; line-height: 1.4; font-weight: 500; padding: 6px 10px; gap: .35em; }
.bcm-sbi b { color: var(--portal-primary); font-weight: 700; }
.bcm-sbi__main { color: var(--portal-muted-faint); font-weight: 500; }

.bcm-detail__panel {
    padding: 24px 26px; border: 1px solid var(--portal-border);
    border-radius: 18px; background: var(--portal-surface);
}
.bcm-detail__panel--wide { padding: 24px 30px; }
.bcm-detail__panel h2 {
    margin: 0 0 16px; color: var(--portal-heading-ink);
    font-family: var(--portal-font-serif); font-weight: 500; font-size: 22px; line-height: 1;
}
.bcm-detail__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bcm-detail__panel-head h2 { margin: 0; }
.bcm-detail__panel-meta { color: var(--portal-muted-faint); font-size: 12px; font-weight: 500; }
.bcm-detail__about { margin: 0; color: var(--portal-text); font-size: 15px; line-height: 1.7; max-width: 760px; }
.bcm-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.bcm-detail__source-note { margin: 14px 0 0; color: var(--portal-muted-faint); font-size: 11.5px; line-height: 1.5; }
.bcm-detail__kvk-note { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; color: var(--portal-muted); font-size: 11.5px; line-height: 1.45; }
.bcm-kvk-badge {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    background: rgb(238, 241, 250); /* mockup #eef1fa — KVK-merkvlak, eenmalig */
    color: rgb(30, 58, 138);        /* mockup #1e3a8a — KVK-merkblauw, eenmalig */
    font-family: var(--portal-font-sans); font-size: 8.5px; font-weight: 700; line-height: 1;
}

/* --- Blokkenraster: contact · vacatures · "Is dit jouw bedrijf?" --- */
.bcm-detail__blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.bcm-block {
    display: flex; flex-direction: column;
    padding: 20px; border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius-card); background: var(--portal-surface);
}
.bcm-block__kicker {
    margin: 0 0 14px; color: rgb(154, 147, 133); /* mockup #9a9385 — kicker, eenmalig */
    font-family: var(--portal-font-sans);
    font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.bcm-block__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bcm-block__head .bcm-block__kicker { margin: 0; }

.bcm-block__contact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--portal-heading-ink); }
.bcm-detail__address { margin: 0; }
.bcm-detail__tel { align-self: flex-start; }
.bcm-detail__tel [data-bcm-tel-out] a {
    color: var(--portal-heading-ink); font-weight: 600; font-size: 14px; line-height: 1.4;
    text-decoration: none; border-bottom: 1px dotted rgb(200, 191, 168); /* mockup #c8bfa8 — eenmalig */
}
.bcm-detail__tel [data-bcm-tel-out] a:hover { color: var(--portal-primary); }
.bcm-detail__eml { align-self: flex-start; }
.bcm-detail__eml .bcm-eml-reveal {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 10px 14px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--portal-primary-soft-border);
    background: var(--portal-primary-soft); color: var(--portal-primary);
    font-family: var(--portal-font-sans); font-size: 13px; font-weight: 600; line-height: 1;
}
.bcm-detail__eml .bcm-eml-reveal:hover { background: rgb(243, 226, 216); } /* mockup #f3e2d8 — eenmalig */
.bcm-detail__eml .bcm-eml-out a { color: var(--portal-primary); font-weight: 600; font-size: 14px; line-height: 1.4; }
.bcm-contact-empty {
    color: var(--portal-muted); font-size: 13px; line-height: 1.55;
    background: var(--portal-surface-soft);
    border: 1px dashed var(--portal-border-dashed); border-radius: 10px; padding: 11px 13px;
}
.bcm-contact-empty a { color: var(--portal-primary); font-weight: 600; }
.bcm-detail__mono-note { margin: 12px 0 0; color: var(--portal-mono-faint); font-family: var(--portal-font-mono); font-size: 10.5px; line-height: 1.5; }
.bcm-block__ctas { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 16px; }
.bcm-btn--block { display: block; text-align: center; padding: 13px 18px; border-radius: var(--portal-radius-btn); font-size: 14px; line-height: 1; }
.bcm-btn--block.bcm-btn--primary:hover { background: rgb(15, 26, 48); color: var(--portal-surface); } /* mockup #0f1a30 — eenmalig */
.bcm-btn--route { padding: 12px 10px; border-radius: 10px; font-size: 13px; }

.bcm-vac-pill {
    padding: 4px 9px; border-radius: var(--portal-radius-pill);
    background: rgb(233, 240, 247); /* mockup #e9f0f7 — eenmalig */
    color: var(--portal-stripe-5);
    font-size: 11px; font-weight: 600; line-height: 1;
}
.bcm-vac-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--portal-border-soft); text-decoration: none; }
.bcm-vac-item:last-of-type { border-bottom: 0; }
.bcm-vac-item__title { display: block; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 14px; line-height: 1.3; }
.bcm-vac-item__meta { display: block; margin-top: 4px; color: var(--portal-muted); font-size: 12px; line-height: 1; }
.bcm-vac-foot {
    display: block; text-align: center; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--portal-border-soft);
    color: var(--portal-primary); font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
}
.bcm-vac-foot:hover { color: var(--portal-primary-strong); }

.bcm-block--claim { background: var(--portal-primary-soft); border-color: var(--portal-primary-soft-border); justify-content: center; }
.bcm-block__claim-title { margin: 0 0 6px; color: var(--portal-heading-ink); font-family: var(--portal-font-serif); font-weight: 600; font-size: 15px; line-height: 1.3; }
.bcm-block--claim p { margin: 0 0 14px; color: rgb(107, 95, 87); /* mockup #6b5f57 — eenmalig */ font-size: 13px; line-height: 1.5; }
.bcm-block__claim-cta {
    display: inline-block; align-self: flex-start;
    padding: 11px 18px; border-radius: 10px;
    background: var(--portal-primary); color: var(--portal-surface);
    font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
}
.bcm-block__claim-cta:hover { background: var(--portal-primary-strong); color: var(--portal-surface); }
.bcm-block__claim-links { margin-top: 11px; }
.bcm-block__claim-links a { color: var(--portal-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.bcm-block__claim-links a:hover { color: var(--portal-primary-strong); }

/* --- Responsive --- */
@media (prefers-reduced-motion: reduce) {
    .bcm-card { transition: none; }
    .bcm-card:hover, .bcm-card:focus-within { transform: none; }
}

@media (max-width: 1080px) {
    .bcm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bcm-chips { display: none !important; }
    .bcm-dropdowns { display: flex; }
}

@media (max-width: 640px) {
    .bcm-grid { grid-template-columns: minmax(0, 1fr); }
    .bcm-toolbar__row { gap: .55rem; }

    /* De bediening hoort bij elkaar te staan, niet met een halve regel ertussen: zoeken op de
       eerste regel, daaronder "Nu open" en de plaatskeuze naast elkaar. Ze pasten nét niet
       samen (met een basis van 150px plus tussenruimte is 310px nodig en er is 294px), dus
       half om half rekenen. */
    /* De twee binnenste rijen laten hun eigen kader los (`display: contents`), zodat zoeken,
       "Nu open" en de plaatskeuze in één rij meelopen in plaats van elk op een eigen regel te
       vallen. Anders staat er per regel één bediening en scroll je door lucht. */
    /* Op een telefoon houdt de módule geen eigen zijmarge meer aan. Het thema geeft de pagina
       al een rand, en die twee stapelden: 16px van de pagina plus 10px hier is 26px per kant,
       oftewel 52 van de 375 pixels ging op aan lucht. */
    .bcm-public__shell { width: 100%; }

    .bcm-toolbar { flex-direction: row; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
    .bcm-toolbar__row,
    .bcm-dropdowns { display: contents; }
    .bcm-toolbar .bcm-search { flex: 1 1 100%; }
    .bcm-toolbar .bcm-toggle,
    .bcm-toolbar .bcm-select { flex: 1 1 calc(50% - .25rem); min-width: 0; }
    .bcm-toolbar .bcm-toolbar__melden { flex: 1 1 100%; }

    /* Zonder foto is de cover 128 pixels gestreepte leegte met een grote letter erin. Op een
       telefoon staat er dan nog geen halve kaart onder de vouw en scroll je door lucht.
       Kaarten mét foto houden hun volle hoogte; daar staat wél iets. */
    /* De letter staat weer midden in de cover. Hij week naar rechts uit voor het categorielabel
       dat linksboven stond, en dat label is er niet meer. */
    .bcm-cover--card:not(.bcm-cover--photo) { height: 74px; }
    .bcm-cover--card:not(.bcm-cover--photo) .bcm-cover__monogram { font-size: 40px; }
}

/* Bladerknoppen onder de lijst. */
.bcm-pager {
    display: flex; align-items: center; justify-content: center;
    gap: .9rem; margin-top: 1.4rem; flex-wrap: wrap;
}
.bcm-pager[hidden] { display: none; }
.bcm-pager__text {
    font-family: var(--portal-font-mono, monospace);
    font-size: .78rem; color: var(--portal-muted);
}
.bcm-pager .bcm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Wegwijzer ───────────────────────────────────────────────────────────────
   De vier routekaarten onder een bedrijvenpagina die weinig te melden heeft
   (lege vacaturelijst, uitgelogde vermelding). Zie de toelichting in
   themes/modules/companies/partials/wegwijzer.php: dit is geen opvulling maar
   het antwoord op "waar moet ik dan heen".
   Tokens uit de portal, zodat elk thema hem in zijn eigen kleuren krijgt zonder
   dat dit bestand iets van dat thema hoeft te weten. */
.bcm-wegwijzer { margin: 28px 0 0; }
.bcm-wegwijzer__kop h2 {
    margin: 0; font-family: var(--portal-font-display, var(--portal-font-sans));
    font-size: 1.35rem; color: var(--portal-heading, var(--portal-text));
}
.bcm-wegwijzer__kop p { margin: .3rem 0 0; color: var(--portal-muted); font-size: .95rem; }
.bcm-wegwijzer__grid {
    display: grid; gap: 14px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.bcm-wegwijzer__kaart {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 18px; border: 1px solid var(--portal-border); border-radius: 10px;
    background: var(--portal-surface, #fff); text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.bcm-wegwijzer__kaart:hover { border-color: var(--portal-primary); transform: translateY(-2px); }
.bcm-wegwijzer__icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--portal-primary-soft, rgba(0, 0, 0, .05));
    color: var(--portal-primary); font-size: 1.1rem;
}
.bcm-wegwijzer__tekst { display: flex; flex-direction: column; gap: .25rem; }
.bcm-wegwijzer__tekst strong { color: var(--portal-heading, var(--portal-text)); font-size: 1rem; }
.bcm-wegwijzer__tekst span { color: var(--portal-muted); font-size: .9rem; line-height: 1.55; }
.bcm-wegwijzer__knop {
    margin-top: auto; color: var(--portal-primary);
    font-size: .88rem; font-weight: 600;
}
/* Geen zweefeffect voor wie beweging heeft uitgezet. */
@media (prefers-reduced-motion: reduce) {
    .bcm-wegwijzer__kaart { transition: none; }
    .bcm-wegwijzer__kaart:hover { transform: none; }
}


/* De knop die het telefoonnummer onthult. Het nummer staat nergens leesbaar in de broncode en
   verschijnt pas na een klik, zodat een verzamelaar die de pagina rendert er niet zomaar mee
   wegloopt. Voor een bezoeker is het één tik. */
.bcm-tel-toon {
    padding: 0;
    border: 0;
    background: none;
    color: var(--portal-primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.bcm-tel-toon:hover { text-decoration-thickness: 2px; }