/* Hub stylesheet: Projects / Blog / Docs sections.
   Inherits color tokens, fonts, radius and shadow from styles.css :root
   and html[data-theme="light"]. Additive only — no selectors here
   override or redeclare anything in styles.css. */

.hub-main{padding-top:6.5rem}
.hub-shell{width:min(calc(100% - 3rem),1240px);margin-inline:auto}
.hub-shell-narrow{width:min(calc(100% - 3rem),780px);margin-inline:auto}

.hub-breadcrumbs{font:500 .78rem/1.4 var(--font);color:var(--faint);margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.hub-breadcrumbs a{color:var(--faint)}
.hub-breadcrumbs a:hover{color:var(--ink)}
.hub-breadcrumbs span[aria-hidden]{opacity:.6}

.hub-hero{padding:2.5rem 0 3rem;border-bottom:1px solid var(--line)}
.hub-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:600 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--violet)}
.hub-title{font:800 clamp(2rem,4vw,3rem)/1.1 var(--font);margin:.75rem 0 1rem;letter-spacing:-.02em}
.hub-lede{font:500 1.05rem/1.6 var(--font);color:var(--muted);max-width:46rem}

.hub-section{padding-block:3.5rem}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.5rem}
.hub-card{display:flex;flex-direction:column;gap:.85rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .2s,transform .2s,box-shadow .2s}
.hub-card:hover{border-color:var(--line-strong);transform:translateY(-.2rem);box-shadow:var(--shadow)}
.hub-card-meta{display:flex;flex-wrap:wrap;gap:.5rem;font:600 .68rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.hub-card h3{margin:0;font:700 1.15rem/1.35 var(--font)}
.hub-card h3 a{color:inherit}
.hub-card h3 a:hover{color:var(--violet)}
.hub-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.hub-card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}

.pill{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:99px;background:var(--surface-2);color:var(--muted);font:600 .68rem/1 var(--mono);letter-spacing:.03em;text-decoration:none}
.pill:hover{color:var(--ink);background:var(--line)}
.pill-accent{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet-light)}

.hub-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}

.search-box{position:relative;max-width:34rem}
.search-box input{width:100%;padding:.9rem 1.1rem;border-radius:.9rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .95rem/1.4 var(--font)}
.search-box input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.search-results{margin-top:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.search-empty{color:var(--faint);font-size:.9rem}
.search-result{padding:1rem 1.2rem;border:1px solid var(--line);border-radius:.9rem}
.search-result a{font-weight:700}
.search-result p{margin:.3rem 0 0;color:var(--muted);font-size:.85rem}

.article-shell{width:min(calc(100% - 3rem),44rem);margin-inline:auto}
.article-header{padding:2.5rem 0 2rem;border-bottom:1px solid var(--line)}
.article-meta{display:flex;flex-wrap:wrap;gap:.9rem;color:var(--faint);font:600 .75rem/1 var(--mono);letter-spacing:.03em;text-transform:uppercase;margin-bottom:1rem}
.article-title{font:800 clamp(1.9rem,4vw,2.6rem)/1.18 var(--font);letter-spacing:-.02em;margin:0 0 1rem}
.article-dek{color:var(--muted);font-size:1.05rem;line-height:1.6}

.article-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-block:2.5rem}
.article-body{max-width:100%}
.article-body h2{font:700 1.5rem/1.35 var(--font);margin:2.4rem 0 1rem;letter-spacing:-.01em;scroll-margin-top:6rem}
.article-body h3{font:700 1.15rem/1.4 var(--font);margin:1.8rem 0 .8rem;scroll-margin-top:6rem}
.article-body p{color:var(--ink);opacity:.92;line-height:1.75;margin:0 0 1.1rem}
.article-body ul,.article-body ol{margin:0 0 1.1rem;padding-inline-start:1.4rem;line-height:1.75;color:var(--ink);opacity:.92}
.article-body li{margin-bottom:.4rem}
.article-body a{color:var(--violet);text-decoration:underline;text-underline-offset:.15em}
html[data-theme="light"] .article-body a{color:#5237b8}
.article-body blockquote{margin:1.5rem 0;padding:.2rem 1.3rem;border-inline-start:3px solid var(--violet);color:var(--muted);font-style:italic}
.article-body code{font:500 .85em/1.4 var(--mono);background:var(--surface-2);padding:.15em .4em;border-radius:.35em}
.article-body pre{background:#0d0e16;border:1px solid var(--line);border-radius:.9rem;padding:1.1rem 1.3rem;overflow-x:auto;margin:0 0 1.3rem}
html[data-theme="light"] .article-body pre{background:#171820}
.article-body pre code{background:none;padding:0;color:#e8e7ff;font-size:.85rem}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

.toc{padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:2rem}
.toc-title{margin:0 0 .6rem;font:700 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.toc ol{margin:0;padding-inline-start:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.toc a{font-size:.85rem;color:var(--muted)}
.toc a:hover{color:var(--violet)}

.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem;margin-top:1rem}

.doc-list{display:flex;flex-direction:column;gap:.6rem;list-style:none;padding:0;margin:0}
.doc-list a{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:.8rem;font-weight:600}
.doc-list a:hover{border-color:var(--violet)}

.taxonomy-grid{display:flex;flex-wrap:wrap;gap:.7rem}

@media(min-width:900px){
  .article-layout{grid-template-columns:15rem 1fr}
  .article-layout .toc{position:sticky;top:6.5rem;align-self:start}
}

@media(max-width:480px){
  /* .card-grid's minmax(19rem,1fr) track can exceed the available width on
     narrow phones (e.g. a 320px viewport leaves ~272px inside .hub-shell),
     causing horizontal overflow. Force a single, full-width column below
     480px, same pattern the homepage already uses for its own grids at its
     620px breakpoint. */
  .card-grid,.related-grid{grid-template-columns:1fr}
  .hub-hero{padding-block:1.8rem 2.2rem}
  .hub-section{padding-block:2.2rem}
  .pill{padding:.4rem .8rem}
  .search-box input{padding:.85rem 1rem;font-size:.9rem}
}