/* =========================================================
   DigiForge — Knowledge Base (index) styles
   Extends styles.css — same ink + ember system.
   ========================================================= */

/* hero */
.kb-hero{position:relative;overflow:hidden;padding-top:calc(var(--header-h) + clamp(44px,7vw,80px));padding-bottom:clamp(8px,3vw,22px);}
.kb-hero .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.kb-hero-inner{position:relative;z-index:2;max-width:var(--maxw);}
.kb-hero h1{font-size:clamp(36px,6vw,68px);margin-top:22px;}
.kb-hero .lead{color:var(--text-dim);font-size:clamp(16px,1.9vw,20px);max-width:600px;margin-top:22px;}
.kb-hero .breadcrumb{margin-bottom:22px;}

/* search */
.kb-search{position:relative;z-index:2;max-width:520px;margin-top:34px;}
.kb-search input{
  width:100%;font-family:var(--f-body);font-size:15.5px;color:var(--text);
  background:var(--ink-1);border:1px solid var(--line-2);border-radius:13px;
  padding:15px 18px 15px 48px;outline:none;transition:border-color .3s,background .3s,box-shadow .3s;
}
.kb-search input::placeholder{color:var(--text-faint);}
.kb-search input:focus{border-color:rgba(255,106,61,0.5);background:var(--ink-2);box-shadow:0 0 0 4px var(--ember-soft);}
.kb-search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--text-faint);pointer-events:none;}

/* image-slot dark theming (drag-drop covers) */
image-slot::part(frame){background:linear-gradient(155deg,#161C28,#0C1019);}
image-slot::part(empty){color:var(--text-faint);}
image-slot{display:block;background:
  radial-gradient(80% 100% at 10% 10%,rgba(255,106,61,.18),transparent 58%),
  linear-gradient(155deg,#161C28,#0C1019);}

/* shared cover art (branded fallback look behind slot caption) */
.kb-cover{position:relative;overflow:hidden;}
.kb-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.kb-cover .kb-glyph{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;}
.kb-cover .kb-glyph svg{width:46%;height:46%;color:rgba(255,255,255,0.05);}
.kb-cover .kb-gridlines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(80% 80% at 30% 20%,#000,transparent 75%);mask-image:radial-gradient(80% 80% at 30% 20%,#000,transparent 75%);opacity:.5;}

/* featured */
.kb-featured{
  position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:0;overflow:hidden;
  background:var(--ink-1);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .45s var(--ease),border-color .4s;margin-bottom:clamp(28px,4vw,40px);
}
.kb-featured:hover{transform:translateY(-4px);border-color:var(--line-2);}
.kb-featured .feat-media{position:relative;min-height:340px;border-right:1px solid var(--line);}
.kb-featured image-slot{position:absolute;inset:0;width:100%!important;height:100%!important;}
.kb-featured image-slot::part(frame){border-radius:0;}
.kb-feat-badge{position:absolute;top:18px;left:18px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#0A0D14;
  background:var(--ember);padding:7px 12px;border-radius:8px;font-weight:500;}
.kb-feat-body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;}
.kb-feat-body .cat{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ember);}
.kb-feat-body a.cat:hover{color:var(--text);}
.kb-feat-body h2{font-size:clamp(24px,3.2vw,38px);margin-top:14px;letter-spacing:-0.025em;}
.kb-feat-body p{color:var(--text-dim);font-size:clamp(15px,1.7vw,17px);margin-top:16px;line-height:1.6;max-width:520px;}
.kb-feat-body .meta{margin-top:24px;}

/* meta row */
.kb-meta{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12.5px;color:var(--text-faint);letter-spacing:.02em;}
.kb-meta .who{display:flex;align-items:center;gap:9px;}
.kb-meta .ava{width:26px;height:26px;border-radius:50%;background:var(--ember-grad);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:11px;color:#0A0D14;flex:none;}
.kb-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint);opacity:.6;}
.kb-meta .rt{display:inline-flex;align-items:center;gap:6px;}
.kb-meta .rt svg{width:13px;height:13px;}

/* filter (reuse .filter-btn from work-page.css visual — redeclare minimal here) */
.kb-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,4vw,38px);}
.filter-btn{
  font-family:var(--f-display);font-weight:500;font-size:14.5px;letter-spacing:-0.01em;color:var(--text-dim);
  background:var(--ink-1);border:1px solid var(--line);border-radius:11px;padding:10px 17px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:color .3s,background .3s,border-color .3s,transform .3s var(--ease);
}
.filter-btn .cnt{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);transition:color .3s;}
.filter-btn:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px);}
.filter-btn.active{background:var(--ember);color:#0A0D14;border-color:var(--ember);box-shadow:0 8px 22px -10px var(--ember-glow);}
.filter-btn.active .cnt{color:rgba(10,13,20,0.55);}

/* grid */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.kb-card{
  position:relative;display:flex;flex-direction:column;background:var(--ink-1);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .45s var(--ease),border-color .4s;
}
.kb-card:hover{transform:translateY(-6px);border-color:var(--line-2);}
.kb-card .card-media{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);}
.kb-card image-slot{position:absolute;inset:0;width:100%!important;height:100%!important;}
.kb-card image-slot::part(frame){border-radius:0;}
.kb-card .cat-pill{position:absolute;top:13px;left:13px;z-index:4;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text);background:rgba(8,11,18,0.62);backdrop-filter:blur(6px);
  border:1px solid var(--line-2);padding:6px 10px;border-radius:7px;}
.kb-card .card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.kb-card h3{font-size:19px;letter-spacing:-0.02em;line-height:1.2;}
.kb-card .excerpt{color:var(--text-dim);font-size:14.5px;margin-top:10px;line-height:1.55;flex:1;}
.kb-card .kb-meta{margin-top:18px;font-size:12px;}
.kb-card .kb-meta .ava{width:24px;height:24px;font-size:10px;}
.kb-card.hide{display:none;}
@keyframes kbin{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}

.kb-empty{display:none;text-align:center;padding:60px 0;color:var(--text-faint);font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;}
.kb-empty.show{display:block;}
.kb-pagination{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:clamp(30px,5vw,52px);}
.kb-pagination a{min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--ink-1);color:var(--text-dim);font-family:var(--f-mono);font-size:13px;transition:.25s;}
.kb-pagination a:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px);}
.kb-pagination a.active{background:var(--ember);border-color:var(--ember);color:#0a0d14;font-weight:600;}

@media (max-width:780px){
  .kb-featured{grid-template-columns:1fr;}
  .kb-featured .feat-media{border-right:none;border-bottom:1px solid var(--line);min-height:240px;}
}