/* ===========================================================================
 *  sprekers.css — de opmaak van het sprekersoverzicht
 *
 *  Stond in twee <style>-blokken in sprekers.php zelf. Hier in dezelfde
 *  volgorde achter elkaar.
 * =========================================================================== */

/* --- blok 1 van 2 — stond op regel 279 van sprekers.php --- */
    :root{
      --sb-navy:#0e1e3c;
      --sb-navy-d:#0a1730;
      --sb-ink:#1c2b45;
      --sb-muted:#667082;
      --sb-line:#e5e8ef;
      --sb-soft:#f6f7fa;
      --sb-orange:#fb6a1b;
      --sb-orange-d:#ec5d0c;
    }
    body{
      background:#ffffff;
      color:var(--sb-ink);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    }
    .sb-display{ font-family:"Source Serif 4",Georgia,"Times New Roman",serif; }

    /* ---------- HERO ---------- */
    .sb-hero{
      position:relative;
      /* Was 120px. main{padding-top} compenseert de vaste header al, dus
         dit telde er dubbel bovenop: ruim 200px boven de titel. */
      padding:40px 0 46px;
      background:linear-gradient(180deg,#f7f8fb 0%,#f4f6fa 70%,#ffffff 100%);
      border-bottom:1px solid var(--sb-line);
    }
    .sb-breadcrumb-wrap{ margin-bottom:20px; }
    .sb-hero h1.sb-h1{
      font-size:clamp(2.2rem,4.4vw,3.4rem);
      line-height:1.08;
      font-weight:800;
      color:var(--sb-navy);
      letter-spacing:-.8px;
      margin:0 0 1.2rem;
    }
    .sb-hero-intro{ color:#46516a; font-size:1.02rem; line-height:1.65; max-width:520px; margin-bottom:1.6rem; }
    .sb-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
    .sb-btn-navy{
      display:inline-flex; align-items:center; gap:.55rem;
      background:var(--sb-navy); color:#fff; border:none; border-radius:10px;
      padding:14px 22px; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
      box-shadow:0 10px 24px rgba(14,30,60,.22); transition:background .15s, transform .05s;
    }
    .sb-btn-navy:hover{ background:var(--sb-navy-d); color:#fff; }
    .sb-btn-navy:active{ transform:translateY(1px); }
    .sb-btn-ghost{
      display:inline-flex; align-items:center; gap:.55rem;
      background:#fff; color:var(--sb-navy); border:1px solid var(--sb-line); border-radius:10px;
      padding:14px 22px; font-weight:700; font-size:.95rem; cursor:pointer; text-decoration:none;
      transition:border-color .15s;
    }
    .sb-btn-ghost:hover{ border-color:#c7cedb; color:var(--sb-navy); }

    /* ---------- AI MATCH-KAART ---------- */
    .sb-ai-card{
      background:#fff; border:1px solid var(--sb-line); border-radius:18px;
      box-shadow:0 18px 45px rgba(14,30,60,.08); padding:26px;
    }
    .sb-ai-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
    .sb-ai-head .ic{
      width:38px; height:38px; border-radius:11px; flex:0 0 auto;
      background:linear-gradient(135deg,#eef1ff,#e6ebff); color:var(--sb-navy);
      display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    }
    .sb-ai-head strong{ color:var(--sb-navy); font-size:1.02rem; }
    .sb-ai-label{ display:block; font-size:.88rem; font-weight:700; color:var(--sb-navy); margin-bottom:.5rem; }
    .sb-ai-input{
      width:100%; height:50px; border:1px solid var(--sb-line); border-radius:10px;
      padding:0 16px; font-size:.92rem; color:var(--sb-ink); background:#fff;
      transition:border-color .15s, box-shadow .15s;
    }
    .sb-ai-input:focus{ outline:none; border-color:var(--sb-navy); box-shadow:0 0 0 4px rgba(14,30,60,.08); }
    .sb-ai-input::placeholder{ color:#9aa2b1; }
    .sb-ai-btn{
      width:100%; margin-top:12px; height:50px; border:none; border-radius:10px;
      background:var(--sb-navy); color:#fff; font-weight:700; font-size:.95rem; cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:.55rem;
      transition:background .15s;
    }
    .sb-ai-btn:hover{ background:var(--sb-navy-d); }
    .sb-ai-sub{ font-size:.85rem; font-weight:600; color:var(--sb-navy); margin:16px 0 10px; }
    .sb-ai-pills{ display:flex; flex-wrap:wrap; gap:8px; }
    .sb-ai-pill{
      background:#fff; border:1px solid var(--sb-line); border-radius:8px;
      padding:7px 14px; font-size:.84rem; font-weight:600; color:var(--sb-navy);
      cursor:pointer; transition:border-color .15s, background .15s;
    }
    .sb-ai-pill:hover{ border-color:var(--sb-navy); }
    .sb-ai-pill.active{ background:var(--sb-navy); border-color:var(--sb-navy); color:#fff; }
    .sb-ai-all{
      display:inline-flex; align-items:center; gap:.4rem; margin-top:16px;
      color:var(--sb-navy); font-weight:700; font-size:.88rem; text-decoration:none;
      border-bottom:1px solid transparent;
    }
    .sb-ai-all:hover{ color:var(--sb-navy); border-bottom-color:var(--sb-navy); }

    /* ---------- FILTERBALK ---------- */
    .sb-filter-card{
      position:relative; z-index:6; margin-top:28px;
      background:#fff; border:1px solid var(--sb-line); border-radius:18px;
      box-shadow:0 14px 40px rgba(14,30,60,.07); padding:20px;
    }
    .sb-search-wrap{ position:relative; margin-bottom:14px; }
    .sb-search-wrap .bi-search{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--sb-navy); font-size:1.05rem; }
    .sb-search{
      width:100%; height:56px; border:1px solid var(--sb-line); border-radius:12px;
      padding:0 20px 0 52px; font-size:1rem; color:var(--sb-ink); background:#fff;
      transition:border-color .15s, box-shadow .15s;
    }
    .sb-search:focus{ outline:none; border-color:var(--sb-navy); box-shadow:0 0 0 4px rgba(14,30,60,.08); }
    .sb-search::placeholder{ color:#9aa2b1; }

    .sb-filter-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
    .sb-fd{ position:relative; flex:1 1 150px; min-width:140px; }
    .sb-fd-btn{
      width:100%; height:48px; background:#fff; border:1px solid var(--sb-line); border-radius:10px;
      display:flex; align-items:center; gap:.55rem; padding:0 12px; cursor:pointer; text-align:left;
      transition:border-color .15s;
    }
    .sb-fd-btn:hover{ border-color:#c7cedb; }
    .sb-fd-btn.is-open, .sb-fd-btn.has-value{ border-color:var(--sb-navy); }
    .sb-fd-btn .bi:first-child{ color:var(--sb-navy); font-size:.95rem; }
    .sb-fd-label{ flex:1; font-size:.88rem; font-weight:700; color:var(--sb-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sb-fd-count{
      background:var(--sb-navy); color:#fff; font-size:.68rem; font-weight:700;
      min-width:18px; height:18px; border-radius:9px; display:none;
      align-items:center; justify-content:center; padding:0 5px;
    }
    .sb-fd-count.show{ display:inline-flex; }
    .sb-fd-car{ color:var(--sb-muted); font-size:.75rem; }

    .sb-fd-menu{
      position:absolute; top:calc(100% + 8px); left:0; min-width:250px; max-width:330px;
      background:#fff; border:1px solid var(--sb-line); border-radius:14px;
      box-shadow:0 20px 45px rgba(14,30,60,.14); padding:14px; z-index:40; display:none;
    }
    .sb-fd.open .sb-fd-menu{ display:block; }
    .sb-fd-scroll{ max-height:280px; overflow-y:auto; padding-right:4px; }
    .sb-check{ display:flex; align-items:center; gap:.55rem; padding:.4rem .25rem; border-radius:8px; cursor:pointer; font-size:.9rem; }
    .sb-check:hover{ background:var(--sb-soft); }
    .sb-check input{ accent-color:var(--sb-navy); width:16px; height:16px; }
    .sb-fd-group{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--sb-muted); padding:.5rem .25rem .2rem; }

    /* Actieve filterchips */
    .sb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .sb-chip{ display:inline-flex; align-items:center; gap:.45rem; background:var(--sb-navy); color:#fff; padding:6px 12px; border-radius:50px; font-size:.78rem; }
    .sb-chip.is-search{ background:var(--sb-orange); }
    .sb-chip i{ cursor:pointer; }

    /* ---------- RESULTATEN-HEADER ---------- */
    .sb-results-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:38px 0 22px; }
    .sb-results-title{ font-size:1.05rem; font-weight:700; color:var(--sb-navy); margin:0; }
    .sb-results-title .js-results-count{ font-size:1.2rem; }
    .sb-sort-wrap{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--sb-muted); }
    .sb-tool-btn{
      background:#fff; border:1px solid var(--sb-line); border-radius:10px; padding:9px 16px;
      font-size:.86rem; font-weight:600; color:var(--sb-navy); cursor:pointer;
      display:inline-flex; align-items:center; gap:.5rem;
    }
    .sb-tool-btn:hover{ border-color:#c7cedb; }
    .sb-sort-menu{ min-width:210px; left:auto; right:0; }
    .sb-sort-item{ padding:.45rem .6rem; border-radius:8px; font-size:.88rem; cursor:pointer; color:var(--sb-ink); }
    .sb-sort-item:hover{ background:var(--sb-soft); }
    .sb-sort-item.active{ color:var(--sb-navy); font-weight:700; }

    /* ---------- SPREKERKAART ---------- */
    .sb-card{
      display:flex; flex-direction:column; background:#fff; border:1px solid var(--sb-line);
      border-radius:16px; overflow:hidden; height:100%;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .sb-card:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(14,30,60,.12); border-color:#d7dce6; }
    .sb-card-media{ position:relative; height:200px; max-height:200px; overflow:hidden; background:var(--sb-soft); }
    .sb-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
    .sb-card:hover .sb-card-img{ transform:scale(1.05); }
    .sb-fav{
      position:absolute; top:12px; right:12px; width:38px; height:38px; border:none; border-radius:50%;
      background:rgba(255,255,255,.94); backdrop-filter:blur(4px); color:var(--sb-navy);
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      box-shadow:0 3px 10px rgba(0,0,0,.14); transition:transform .12s, color .12s; font-size:1rem;
    }
    .sb-fav:hover{ transform:scale(1.08); }
    .sb-fav.is-active{ color:var(--sb-orange); }
    .sb-card-badge{
      position:absolute; left:12px; top:12px; display:inline-flex; align-items:center;
      color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.2px;
      padding:6px 12px; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,.16);
    }
    .sb-card-badge.is-green{ background:#16a34a; }
    .sb-card-badge.is-orange{ background:#f97316; }
    .sb-card-badge.is-blue{ background:#2563eb; }
    .sb-card-badge.is-purple{ background:#7c3aed; }
    .sb-card-badge.is-gold{ background:#d99000; }
    .sb-card-main{ display:flex; flex-direction:column; flex:1; padding:18px; }
    .sb-card-body{ flex:1; }
    .sb-card-name{ font-size:1.12rem; font-weight:800; color:var(--sb-navy); margin:0 0 .35rem; letter-spacing:-.2px; }
    .sb-card-tags{
      color:var(--sb-orange); font-size:.82rem; font-weight:600; margin-bottom:.55rem;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .sb-card-desc{
      color:var(--sb-muted); font-size:.86rem; line-height:1.5; margin-bottom:.75rem;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .sb-card-price{ font-size:.92rem; font-weight:700; color:var(--sb-navy); white-space:nowrap; }
    .sb-card-foot{
      margin-top:14px; padding-top:14px; border-top:1px solid var(--sb-line);
      display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    }
    .sb-card-link{
      color:var(--sb-navy); font-weight:700; font-size:.88rem; text-decoration:none;
      display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
    }
    .sb-card-link:hover{ color:var(--sb-orange-d); }
    .sb-card-link .bi{ transition:transform .15s; }
    .sb-card:hover .sb-card-link .bi{ transform:translateX(3px); }

    /* Laad-meer */
    .sb-loadmore{
      border:none; border-radius:50px; padding:14px 40px; font-weight:700; font-size:.95rem; color:#fff;
      background:var(--sb-navy); cursor:pointer;
      box-shadow:0 12px 26px rgba(14,30,60,.24);
    }
    .sb-loadmore:hover{ background:var(--sb-navy-d); }

    .grid-loading{ opacity:.45; pointer-events:none; transition:opacity .2s; }
    .hidden{ display:none !important; }
    @keyframes sbFade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
    .sb-fade{ animation:sbFade .3s ease forwards; }

    /* ---------- SEO / onderkant ---------- */
    .sb-seo h2{ font-size:1.6rem; font-weight:700; color:var(--sb-navy); margin-bottom:1rem; }
    .sb-seo{ color:#48526a; line-height:1.7; }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width:991px){
      .sb-hero{ padding:24px 0 40px; }
      .sb-ai-card{ margin-top:30px; }
    }
    @media (max-width:575px){
      .sb-filter-row{ flex-direction:column; }
      .sb-fd{ flex:1 1 auto; }
      .sb-fd-menu{ left:0; right:0; min-width:0; }
      .sb-sort-menu{ left:0; right:auto; }
    }
  

/* --- blok 2 van 2 — stond op regel 758 van sprekers.php --- */
    .logo-section { padding: 80px 0; background-color: #fff; text-align: center; }
    .logo-scroller-wrapper { overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
    .logo-grid { display: flex; justify-content: center; align-items: center; gap: 60px; padding: 0 20px; }
    .client-logo { width: auto; max-width: 140px; height: 60px; object-fit: contain; filter: grayscale(100%); opacity: 0.4; transition: 0.5s; }
    .client-logo:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }
    @media (max-width: 768px) { .logo-grid { justify-content: flex-start; gap: 40px; } }