/* scope alles onder #knowledgeClient om conflicten te vermijden */
#knowledgeClient { padding: 4px 0 20px; }
#knowledgeClient .kc-header{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 4px 0 12px;
}

#knowledgeClient .kc-search{
  display:flex; align-items:center; gap:8px; min-width:280px; max-width:420px; width: 32%;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#knowledgeClient .kc-search i{ color:#9aa3b2; }
#knowledgeClient .kc-search input{
  border:0; outline:none; width:100%; font-size:14px; color:#111827; background:transparent;
}

/* GRID: 4 kolommen op groot scherm */
#knowledgeClient .kc-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:8px;
}
@media (max-width:1200px){ #knowledgeClient .kc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ #knowledgeClient .kc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ #knowledgeClient .kc-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); gap:10px; } }

#knowledgeClient .kc-card{
  display:block; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}
#knowledgeClient .kc-card:hover{
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.06); border-color:#e3e7ef;
}

/* kleinere thumbnails */
#knowledgeClient .kc-thumb{
  position:relative;
  background:#f3f4f6;
  aspect-ratio:4/3;  /* compacter dan 16/9 */
  overflow:hidden;
  border-bottom:1px solid #e5e7eb;
}
#knowledgeClient .kc-thumb img,
#knowledgeClient .kc-thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
}
#knowledgeClient .kc-thumb .kc-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#9aa3b2;
  font-weight:600; letter-spacing:.2px; background:linear-gradient(180deg,#f7fafc,#f3f4f6);
}

#knowledgeClient .kc-body{ padding:10px 12px 12px; }
#knowledgeClient .kc-title{ margin:0 0 4px; font-weight:750; color:#0b1020; font-size:14.5px; line-height:1.35; }
#knowledgeClient .kc-summary{
  margin:0; color:#6b7280; font-size:12.5px; line-height:1.5; max-height:3em; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
#knowledgeClient .kc-meta{ margin-top:8px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#knowledgeClient .kc-pill{
  font-size:11px; border:1px solid #e5e7eb; background:#f8fafc; color:#374151; border-radius:999px; padding:3px 8px;
}

#knowledgeClient .kc-empty{ text-align:center; color:#9aa3b2; padding:24px 0; }
#knowledgeClient .kc-footer{ display:flex; justify-content:center; margin-top:10px; }
#knowledgeClient .kc-btn{
  background:#111827; color:#fff; border:1px solid #111827; padding:9px 14px; border-radius:10px; cursor:pointer; font-weight:700;
}
#knowledgeClient .kc-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Drawer */
#knowledgeClient .kc-drawer{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0;
  transition:opacity .18s ease;
}
#knowledgeClient .kc-drawer.open{
  pointer-events:auto; opacity:1;
}
#knowledgeClient .kc-drawer-backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.25);
}
#knowledgeClient .kc-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:640px; max-width:100%;
  background:#fff; box-shadow:-10px 0 30px rgba(15,23,42,.18);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .18s ease;
  padding:20px;
}
#knowledgeClient .kc-drawer.open .kc-drawer-panel{
  transform:translateX(0);
}
#knowledgeClient .kc-drawer-header{
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
#knowledgeClient .kc-drawer-header h2{
  margin:0; font-size:18px; font-weight:750; color:#0b1020;
}
#knowledgeClient .kc-article-sub{
  margin:4px 0 0; font-size:13px; color:#6b7280;
}
#knowledgeClient .kc-article-meta{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:6px;
}
#knowledgeClient .kc-drawer-close{
  border:0; background:#f3f4f6; border-radius:999px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#4b5563;
}

#knowledgeClient .kc-drawer-body{
  padding:12px 16px 18px; overflow:auto; flex:1;
}
#knowledgeClient .kc-article-main-video{
  margin-bottom:12px;
}
#knowledgeClient .kc-article-main-video video{
  width:100%; border-radius:10px; border:1px solid #e5e7eb; background:#000;
}
#knowledgeClient .kc-article-main-video img{
    width:100%;
    border-radius:10px;
    border:1px solid #e5e7eb;
    display:block;
  }
#knowledgeClient .kc-article-body{
  font-size:14px; color:#111827; line-height:1.6; margin-bottom:16px;
}
#knowledgeClient .kc-article-body p{ margin:0 0 0.75em; }
#knowledgeClient .kc-article-videos{
  display:flex; flex-direction:column; gap:8px;
}
#knowledgeClient .kc-article-videos video{
  width:100%; max-height:180px; border-radius:10px; border:1px solid #e5e7eb; background:#000;
}