/* AuthSpoke Resources — shared styles for the knowledge hub + category pages.
   Reuses the design tokens defined in authspoke-blog.css (load both). */

/* --- Hub search --- */
.res-search { display:flex; align-items:center; gap:.7rem; max-width:560px; margin:1.6rem auto 0;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.85rem 1.2rem;
  box-shadow: var(--shadow-sm); }
.res-search svg { width:18px; height:18px; color:var(--muted); flex-shrink:0; }
.res-search input { border:none; outline:none; background:none; width:100%; font-size:1rem; color:var(--text);
  font-family:inherit; }
.post-hero .res-search { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.post-hero .res-search input { color:#eef2ff; }
.post-hero .res-search input::placeholder { color:#9fb0d8; }
.post-hero .res-search svg { color:#9fb0d8; }

/* --- Category grid (hub) --- */
.hub-section { margin: 3rem 0 1rem; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.1rem; }
.hub-card { position:relative; display:flex; flex-direction:column; gap:.5rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; text-decoration:none;
  color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height:150px; }
.hub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.hub-card .hc-ic { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(59,91,253,.14), rgba(34,211,238,.12)); color:var(--brand); margin-bottom:.3rem; }
.hub-card .hc-ic svg { width:22px; height:22px; }
.hub-card h3 { font-size:1.08rem; font-weight:700; margin:0; color:var(--text); }
.hub-card p { font-size:.9rem; color:var(--muted); margin:0; line-height:1.5; flex:1; }
.hub-card .hc-count { font-size:.76rem; font-weight:600; color:var(--brand); }
.soon { position:absolute; top:1.1rem; right:1.1rem; font-size:.6rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); background:var(--bg); border:1px solid var(--line);
  padding:3px 8px; border-radius:999px; }
.hub-card.is-soon { cursor:default; }
.hub-card.is-soon:hover { transform:none; border-color:var(--line); box-shadow:var(--shadow-sm); }

/* --- Breadcrumb --- */
.crumbs { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--muted); margin:1.4rem 0 0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--brand); }
.crumbs span { color:var(--line); }

/* --- Glossary --- */
.glossary { display:flex; flex-direction:column; gap:1rem; margin:1.4rem 0 3rem; }
.term { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; }
.term h3 { font-size:1.2rem; font-weight:800; margin:0 0 .3rem; color:var(--text); }
.term .def { font-size:1rem; color:var(--text); margin:.2rem 0 .8rem; line-height:1.6; }
.term .row { display:grid; grid-template-columns:150px 1fr; gap:.4rem 1rem; padding:.4rem 0; border-top:1px solid var(--line);
  font-size:.92rem; }
.term .row .k { color:var(--muted); font-weight:600; }
.term .row .v { color:var(--text); }
.term .related { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.term .related a { font-size:.8rem; color:var(--brand); background:rgba(59,91,253,.08); border:1px solid var(--line);
  padding:2px 9px; border-radius:999px; text-decoration:none; }
.term .empty-hit { display:none; }

/* --- Learning path / framework list --- */
.step-list, .fw-list { display:flex; flex-direction:column; gap:1rem; margin:1.4rem 0 3rem; }
.step { display:flex; gap:1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; text-decoration:none; color:inherit; transition:border-color .15s; }
.step:hover { border-color:var(--brand); }
.step .num { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; }
.step h3 { font-size:1.05rem; font-weight:700; margin:0 0 .25rem; color:var(--text); }
.step p { font-size:.9rem; color:var(--muted); margin:0; line-height:1.5; }
.step .lvl { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); }
.step .body { flex:1; }
.step .meta { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.step .tag { font-size:.72rem; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line);
  padding:2px 9px; border-radius:999px; }
/* Framework badge (abbreviation chip instead of a step number) */
.step .badge { flex-shrink:0; min-width:58px; height:40px; padding:0 .7rem; border-radius:10px;
  background:linear-gradient(135deg, rgba(59,91,253,.14), rgba(34,211,238,.12)); color:var(--brand);
  font-weight:800; font-size:.82rem; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; }

/* --- No-results message --- */
.no-results { text-align:center; color:var(--muted); padding:3rem 1rem; display:none; }

@media (max-width:720px){ .term .row { grid-template-columns:1fr; } }