/* bm_events_discover.css - ontdekpagina voor evenementen (/events-home)
   Palet: enkel site-kleuren. Accent = BUSI-oranje #F97316. Alles gecentreerd
   volgens de vaste designregel, met de zachte oranje uitloop per blok. */

/* De UNA-schil knipt lange pagina's af: deze pagina uitzonderen.
   Zie reference_busimatch_lange_paginas_scroll. */
body:has(#bm-ev-discover) .bx-main-content { overflow: visible; }
body:has(#bm-ev-discover) #main-content { height: auto; overflow: visible; }

#bm-ev-discover { --bmev-accent: #F97316; --bmev-ink: #FFFFFF; --bmev-dim: #C0C0C0;
    --bmev-panel: rgba(255,255,255,.05); --bmev-line: rgba(255,255,255,.12);
    display: block; width: 100%; text-align: center; container-type: inline-size; }

#bm-ev-discover * { box-sizing: border-box; }

/* De inhoudskolom van de site is smal (368 px op een scherm van 1280, 1040 px op 1920),
   dus de opmaak mag NIET op de schermbreedte steunen. Met flex-wrap + een grote
   flex-grow op de hoofdkolom klapt de zijkolom vanzelf boven het raster zodra de
   BAK te smal wordt. Zie reference_busimatch_meten_headless. */
.bmev-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; width: 100%; }

/* ---------------------------------------------------------------- zijkolom */
.bmev-side { flex: 1 1 210px; padding: 14px 10px; border-radius: 14px;
    background: var(--bmev-panel); border: 1px solid var(--bmev-line);
    box-shadow: 0 0 22px rgba(249,115,22,.18); }
.bmev-side-h { margin: 0 0 10px; font-size: 15px; color: var(--bmev-accent); }
.bmev-cats { list-style: none; margin: 0; padding: 0; }
.bmev-cats li { margin: 0 0 2px; }
.bmev-cat { display: block; padding: 7px 8px; border-radius: 9px; font-size: 14px;
    color: var(--bmev-ink); text-decoration: none; opacity: .85; }
.bmev-cat:hover { background: rgba(249,115,22,.14); opacity: 1; }
.bmev-cat.on { background: var(--bmev-accent); color: #111111; font-weight: 700; opacity: 1; }
.bmev-create { display: block; margin-top: 12px; padding: 9px 8px; border-radius: 10px;
    background: var(--bmev-accent); color: #111111; font-weight: 700; text-decoration: none; font-size: 14px; }

/* ---------------------------------------------------------------- hoofdkolom */
.bmev-main { flex: 999 1 320px; min-width: 0; }
.bmev-title { margin: 0 0 14px; font-size: 22px; color: var(--bmev-ink); }

.bmev-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 16px; }
.bmev-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 999px; background: var(--bmev-panel); border: 1px solid var(--bmev-line); }
.bmev-ico { font-size: 13px; opacity: .8; }
.bmev-inp { background: transparent; border: 0; color: var(--bmev-ink); font-size: 14px;
    outline: none; min-width: 110px; text-align: center; }
.bmev-inp option { background: #111111; color: #FFFFFF; }
.bmev-q { min-width: 150px; }
.bmev-tab { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--bmev-line);
    background: var(--bmev-panel); color: var(--bmev-ink); font-size: 14px; cursor: pointer; }
.bmev-tab:hover { border-color: var(--bmev-accent); }
.bmev-tab.on { background: var(--bmev-accent); color: #111111; font-weight: 700; border-color: var(--bmev-accent); }

/* ---------------------------------------------------------------- raster */
/* 172 px geeft twee kolommen in de smalle inhoudskolom van 368 px */
.bmev-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.bmev-card { position: relative; display: flex; flex-direction: column; border-radius: 14px;
    overflow: hidden; background: var(--bmev-panel); border: 1px solid var(--bmev-line);
    box-shadow: 0 0 18px rgba(249,115,22,.14); }
.bmev-cover { display: block; height: 118px; border-radius: 14px 14px 0 0;
    background: #111111 center/cover no-repeat; }
.bmev-nocover { background: linear-gradient(135deg, #1E3A8A, #7C3AED); }
.bmev-body { padding: 10px 12px 4px; flex: 1 1 auto; }
.bmev-when { font-size: 12px; color: var(--bmev-accent); font-weight: 700; margin-bottom: 4px; }
.bmev-name { display: block; font-size: 15px; line-height: 1.25; font-weight: 700;
    color: var(--bmev-ink); text-decoration: none; margin-bottom: 4px; }
.bmev-name:hover { text-decoration: underline; }
.bmev-loc { font-size: 12px; color: var(--bmev-dim); margin-bottom: 8px; }
.bmev-meta { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.bmev-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(0,0,0,.35); margin-left: -6px; }
.bmev-av:first-child { margin-left: 0; }
.bmev-cnt { font-size: 12px; color: var(--bmev-dim); margin-left: 6px; }

.bmev-foot { display: flex; gap: 8px; padding: 10px 12px 12px; }
.bmev-join { flex: 1 1 auto; padding: 9px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--bmev-line); background: rgba(255,255,255,.08);
    color: var(--bmev-ink); font-size: 13px; font-weight: 700; }
.bmev-join:hover { border-color: var(--bmev-accent); }
.bmev-join.on { background: #16A34A; border-color: #16A34A; color: #FFFFFF; }
.bmev-join[disabled] { opacity: .6; cursor: default; }
.bmev-share { flex: 0 0 44px; border-radius: 9px; cursor: pointer; font-size: 15px;
    border: 1px solid var(--bmev-line); background: rgba(255,255,255,.08); color: var(--bmev-ink); }
.bmev-share:hover { border-color: var(--bmev-accent); }

/* ---------------------------------------------------------------- deelmenu */
/* De inhoudskolom is te smal voor een uitklapmenu naast de kaart, dus het deelmenu
   is een klein venster midden in beeld. Zo loopt het nooit buiten het scherm. */
.bmev-veil { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.55); }
.bmev-menu { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
    padding: 6px; border-radius: 14px; text-align: left;
    background: #111111; border: 1px solid var(--bmev-line);
    box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 18px rgba(249,115,22,.22); }
.bmev-menu-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px;
    border-bottom: 1px solid var(--bmev-line); margin-bottom: 4px; }
.bmev-menu-h b { flex: 1 1 auto; font-size: 13px; color: var(--bmev-ink); text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmev-menu-x { flex: 0 0 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--bmev-line); background: rgba(255,255,255,.08); color: var(--bmev-ink); }
.bmev-mi { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px;
    border-radius: 9px; text-decoration: none; color: var(--bmev-ink); }
.bmev-mi:hover { background: rgba(249,115,22,.16); }
.bmev-mi-ic { flex: 0 0 20px; font-size: 15px; line-height: 1.3; text-align: center; }
.bmev-mi-tx { display: block; min-width: 0; }
.bmev-mi-tx b { display: block; font-size: 13px; font-weight: 700; }
.bmev-mi-tx i { display: block; font-size: 11px; font-style: normal; color: var(--bmev-dim);
    line-height: 1.35; margin-top: 1px; word-break: break-word; }
.bmev-mi-url { color: #7DD3FC !important; }

/* ---------------------------------------------------------------- rest */
.bmev-empty, .bmev-load { grid-column: 1 / -1; padding: 26px 10px; color: var(--bmev-dim); font-size: 14px; }
.bmev-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
    z-index: 9999; padding: 10px 18px; border-radius: 999px; font-size: 14px;
    background: var(--bmev-accent); color: #111111; font-weight: 700;
    opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.bmev-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------- smalle BAK, niet smal scherm */
/* Zodra de zijkolom boven het raster klapt, worden de categorieen liggende chips. */
@container (max-width: 560px) {
    .bmev-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
    .bmev-cats li { margin: 0; }
    .bmev-cat { padding: 6px 12px; border: 1px solid var(--bmev-line); border-radius: 999px; }
    .bmev-create { max-width: 260px; margin-left: auto; margin-right: auto; }
}
@container (max-width: 380px) {
    .bmev-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .bmev-cover { height: 98px; }
    .bmev-foot { padding: 8px 8px 10px; gap: 6px; }
    .bmev-share { flex: 0 0 38px; }
}

/* Echte telefoons: iets grotere raakvlakken. */
@media (max-width: 520px) {
    .bmev-bar { gap: 6px; }
    .bmev-join { padding: 11px 8px; }
}