/* Article / project detail page styles — layered on top of style.css */

.breadcrumbs { font-size: 0.82rem; margin-bottom: 20px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }

.article-hero {
  padding: 150px 0 60px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(124,58,237,0.16), transparent 70%);
}
.article-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 16px; max-width: 780px; }
.article-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; margin-top: 20px; font-family: var(--font-mono); }

.article-layout { display: grid; grid-template-columns: 220px 1fr; gap: 50px; padding: 50px 0 20px; align-items: start; }
.article-toc { position: sticky; top: 110px; }
.article-toc ul { display: grid; gap: 10px; margin-top: 4px; }
.article-toc a { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.article-toc a:hover { color: var(--accent); }
.toc-level-3 { padding-left: 14px; }
.toc-controls { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.toc-controls .btn { width: 100%; font-size: 0.82rem; padding: 10px; }

.article-body { max-width: 720px; font-size: 1.05rem; line-height: 1.8; }
.article-body h2 { font-size: 1.5rem; margin-top: 42px; margin-bottom: 16px; }
.article-body h3 { font-size: 1.2rem; margin-top: 30px; margin-bottom: 12px; }
.article-body p { margin-top: 16px; color: rgba(255,255,255,0.88); }
.article-body ul, .article-body ol { margin-top: 16px; padding-left: 24px; color: rgba(255,255,255,0.88); }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--muted);
  font-style: italic;
}
.article-body code { background: rgba(255,255,255,0.08); padding: 2px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.88em; }
.article-body pre { background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 18px; overflow-x: auto; margin-top: 20px; }
.article-body pre code { background: none; padding: 0; }
.article-body hr { border: none; border-top: 1px solid var(--card-border); margin: 40px 0; }
.article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(0,229,255,0.35); }
.article-cover { width: 100%; border-radius: var(--radius); margin-bottom: 30px; }

.article-body.is-reading-mode { font-size: 1.2rem; line-height: 2; max-width: 660px; }
.article-body.is-reading-mode h2 { font-size: 1.65rem; }

.article-tags { display: flex; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.article-share { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--card-border); font-size: 0.88rem; }
.article-share a { color: var(--accent); }

.article-notfound { padding: 200px 0 120px; text-align: center; }
.article-notfound h1 { font-size: 2rem; }
.article-notfound .btn { margin-top: 24px; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; order: 2; }
  .article-body { order: 1; max-width: none; }
}