/* =========================================================
   CyberEdge Technologies — Knowledge Hub
   ---------------------------------------------------------
   insights.html (the index) and insights/<slug>.html (articles).
   Design tokens come from style.css.
   ========================================================= */

/* ---------- index: toolbar + category chips ---------- */
.in-tools{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:16px 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.in-tools input[type=search]{
  font:inherit;font-size:.94rem;padding:.6rem .85rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);flex:1 1 260px;min-width:0;
}
.in-tools input[type=search]:focus{outline:2px solid var(--ce-blue);outline-offset:-1px;border-color:var(--ce-blue)}
.in-count{font-size:.85rem;color:var(--ink-2);white-space:nowrap}
.in-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.in-chip{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);transition:.16s var(--ease);
}
.in-chip:hover{border-color:var(--ce-blue);color:var(--ce-blue)}
.in-chip.on{background:var(--ce-blue);border-color:var(--ce-blue);color:#fff}
.in-chip-n{
  font-size:.7rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;
  background:var(--bg-alt);color:var(--ink-3);
}
.in-chip.on .in-chip-n{background:rgba(255,255,255,.22);color:#fff}

/* ---------- index: article cards ---------- */
.in-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.in-card{
  display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:.18s var(--ease);text-decoration:none!important;
}
.in-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d8e8}
.in-card .pill{align-self:flex-start}
.in-card h3{margin:0;font-size:1.06rem;line-height:1.32;color:var(--ce-navy)}
.in-card p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55;flex:1}
.in-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:11px;
}
.in-empty{
  padding:48px;text-align:center;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--radius-lg);
}

/* ---------- article page ---------- */
.art-head{
  background:linear-gradient(150deg,#052b4e,#0b1c2c 65%);color:#dfe7ef;
  padding:clamp(30px,5vw,60px) 0 clamp(26px,4vw,44px);
}
.art-head .crumbs{color:#8fa9c0;margin-bottom:14px}
.art-head .crumbs a{color:var(--ce-accent)}
.art-head h1{color:#fff;margin:12px 0 14px;font-size:clamp(1.7rem,1.2rem + 2vw,2.8rem)}
.art-head .lead{color:#a9bccf;margin:0}
.art-head .pill-cat{background:rgba(28,200,200,.16);color:var(--ce-accent)}
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;
  font-size:.8rem;color:#8fa9c0;
}
.art-meta span{display:inline-flex;align-items:center;gap:6px}
.art-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:#4d6b85;margin-right:2px}

.art-body{padding:clamp(32px,4vw,52px) 24px clamp(20px,3vw,36px)}
.art-body > p{font-size:1.06rem;line-height:1.75;color:var(--ink);margin:0 0 1.15rem}
.art-body h2{
  font-size:clamp(1.2rem,1rem + .7vw,1.5rem);margin:2.2rem 0 .9rem;
  padding-top:.6rem;border-top:1px solid var(--line);
}
.art-body ul.tick{margin:0 0 1.4rem}
.art-quote{
  margin:1.6rem 0;padding:16px 22px;border-left:4px solid var(--ce-accent);
  background:var(--bg-tint);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.06rem;color:var(--ce-blue-darker);font-style:italic;
}
.art-sources{
  margin-top:2.4rem;padding:22px 24px;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.art-sources h2{margin:0 0 6px;font-size:1rem;border:0;padding:0}
.art-sources p{margin:0 0 12px;font-size:.82rem;color:var(--ink-3)}
.art-sources ul{margin:0;padding-left:1.1rem}
.art-sources li{margin-bottom:7px;font-size:.9rem}
.art-cta{
  margin-top:24px;padding:24px 26px;border-radius:var(--radius-lg);
  background:linear-gradient(110deg,var(--ce-blue-darker),var(--ce-blue));color:#fff;
}
.art-cta h3{color:#fff;margin:0 0 6px}
.art-cta p{color:#cfe3f6;margin:0 0 16px;font-size:.94rem}
.art-cta .btn-primary{background:#fff;color:var(--ce-blue-darker)}
.art-cta .btn-primary:hover{background:#eaf2fb}

.art-rels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.art-rel{
  display:block;padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:.16s var(--ease);text-decoration:none!important;
}
.art-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d8e8}
.art-rel b{display:block;color:var(--ce-navy);font-size:.98rem;line-height:1.35;margin-bottom:6px}
.art-rel small{display:block;color:var(--ink-2);font-size:.84rem;line-height:1.5}

@media (pointer:coarse){
  .in-chip{min-height:var(--tap)}
  .in-tools input[type=search]{min-height:var(--tap);font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .in-card,.art-rel{transition:none}
  .in-card:hover,.art-rel:hover{transform:none}
}
@media print{
  .in-tools,.in-chips,.art-cta,.art-rels{display:none!important}
  .art-head{background:#052b4e!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}