/* ================================================================
   grafeio.IT — Blog styles
   Covers: breadcrumbs, posts index, KB category/section listing,
           post layout, prose typography, code blocks (Pygments monokai)
   ================================================================ */

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: .73rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3em;
  margin-bottom: 1.25rem;
}
.breadcrumbs a { color: var(--gold-ink); transition: color .15s; }
.breadcrumbs a:hover { color: var(--gold-ink); }
.breadcrumbs__sep { opacity: .35; }

/* ── Post hero ────────────────────────────────────────────────── */
.page-hero--post { padding-bottom: 2.5rem; }

.post-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  color: var(--text);
  line-height: 1.2;
  margin-bottom: .5rem;
}
.page-hero .post-description {
  color: var(--text-muted);
  font-size: 1.05rem;
  /* Explicit override, not just an absent property — .page-hero p (main.css)
     also matches this element and declares max-width: 560px. Cascade
     resolves per-property, so leaving this undeclared would let that rule's
     560px win despite lower specificity. See .post-result below for why
     "none" (full width, matching the h1 title) is the actual correct value,
     not some narrower number. */
  max-width: none;
  margin-bottom: 1rem;
}
.post-meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.post-meta .tag { font-size: .65rem; }
.page-hero .post-result {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--gold-ink);
  display: flex;
  align-items: center;
  gap: .4em;
  margin-bottom: 1rem;
  /* max-width: none — see .post-description above. The hero has no
     TOC-column offset, but .prose below is pushed right by one (220px +
     3.5rem gap); since .prose is the flexible last grid column, its right
     edge always lands on the container's right edge anyway. So matching
     means full width (same as the h1 title), not .prose's raw rendered
     width. */
  max-width: none;
}
.post-references {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--gold-ink);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color .15s;
}
.post-references:hover { color: var(--gold-ink); }

/* ── Section page: section-post removes extra padding ────────── */
.section--post { padding-top: 3rem; }

/* ── Blog category card link wrapper ─────────────────────────── */
.blog-cat-card { color: inherit; }
.blog-cat-card:hover { color: inherit; }

/* ── Section listing grid ─────────────────────────────────────── */
.blog-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

/* ── Post list (articles within a section) ───────────────────── */
.post-list { display: flex; flex-direction: column; gap: .6rem; }

.post-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.post-list-item:hover {
  border-color: var(--border-h);
  box-shadow: 0 0 18px var(--gold-glow);
  transform: translateX(3px);
}
.post-list-item__title {
  font-family: var(--font-head);
  font-size: .95rem;
  color: var(--text);
  flex: 1;
}
.post-list-item__date {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Post layout: sticky TOC sidebar + content ───────────────── */
.blog-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3.5rem;
  align-items: start;
}

.blog-toc {
  position: sticky;
  top: 90px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.blog-toc--empty {
  background: none;
  border: none;
  padding: 0;
}
.toc-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-bottom: .85rem;
}
/* Pygments toc extension wraps in .toc div — hide its own title */
.blog-toc .toc { }
.blog-toc .toctitle { display: none; }
.blog-toc .toc ul,
.blog-toc > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .82rem;
}
.blog-toc .toc li,
.blog-toc > ul li { margin: .35rem 0; }
.blog-toc .toc a,
.blog-toc > ul a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
  line-height: 1.4;
  display: block;
}
.blog-toc .toc a:hover,
.blog-toc > ul a:hover { color: var(--gold-ink); }
.blog-toc .toc ul ul,
.blog-toc > ul ul {
  padding-left: .9rem;
  margin-top: .2rem;
}
.blog-toc .toc ul ul li,
.blog-toc > ul ul li { font-size: .77rem; }

/* ── Prose typography ─────────────────────────────────────────── */
.prose {
  min-width: 0;
  color: var(--text);
  line-height: 1.82;
  font-size: 1rem;
}

.prose h1 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 .75rem;
  scroll-margin-top: 90px;
}
.prose h2 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--text);
  margin: 2.75rem 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.prose h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--text);
  margin: 2.25rem 0 .6rem;
  scroll-margin-top: 90px;
}
.prose h4 {
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold-ink);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 2rem 0 .5rem;
  scroll-margin-top: 90px;
}
.prose p { margin: 0 0 1.25rem; }
.prose ul,
.prose ol { padding-left: 1.6rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212,175,55,.5);
  transition: color .15s, text-decoration-color .15s;
}
.prose a:hover {
  color: var(--gold-ink);
  text-decoration-color: var(--gold-dim);
}
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--gold-ink); font-style: italic; }

.prose img {
  width: 100%;
  margin: 1.75rem 0;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.prose .concept-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-card);
  padding: 1.1rem 1.5rem;
  margin: 1.75rem 0;
}
.prose .concept-box__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-bottom: .5rem;
}
.prose .concept-box__title {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
}
.prose .concept-box p {
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0;
}

.prose blockquote {
  border-left: 3px solid var(--gold);
  margin: 1.75rem 0;
  padding: .85rem 1.35rem;
  background: rgba(212,175,55,.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
}
.prose blockquote p { margin-bottom: 0; }
.prose blockquote strong { color: var(--gold-ink); }

.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ── Inline code ──────────────────────────────────────────────── */
.prose code {
  font-family: var(--font-mono);
  font-size: .82em;
  background: rgba(212,175,55,.10);
  color: var(--gold-ink);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 3px;
  padding: .1em .42em;
}
/* Reset for code inside .highlight blocks */
.prose .highlight code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Code blocks — Pygments monokai ──────────────────────────── */
.prose .highlight {
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  position: relative;
}
.prose .highlight pre {
  margin: 0;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.65;
}

/* Pygments monokai colour palette */
pre { line-height: 125%; }
.highlight { background: #272822; color: #F8F8F2 }
.highlight .c  { color: #959077 }
.highlight .err { color: #ED007E; background-color: #1E0010 }
.highlight .k  { color: #66D9EF }
.highlight .l  { color: #AE81FF }
.highlight .n  { color: #F8F8F2 }
.highlight .o  { color: #FF4689 }
.highlight .p  { color: #F8F8F2 }
.highlight .ch { color: #959077 }
.highlight .cm { color: #959077 }
.highlight .cp { color: #959077 }
.highlight .c1 { color: #959077 }
.highlight .cs { color: #959077 }
.highlight .kc { color: #66D9EF }
.highlight .kd { color: #66D9EF }
.highlight .kn { color: #FF4689 }
.highlight .kp { color: #66D9EF }
.highlight .kr { color: #66D9EF }
.highlight .kt { color: #66D9EF }
.highlight .ld { color: #E6DB74 }
.highlight .m  { color: #AE81FF }
.highlight .s  { color: #E6DB74 }
.highlight .na { color: #A6E22E }
.highlight .nb { color: #F8F8F2 }
.highlight .nc { color: #A6E22E }
.highlight .no { color: #66D9EF }
.highlight .nd { color: #A6E22E }
.highlight .ne { color: #A6E22E }
.highlight .nf { color: #A6E22E }
.highlight .nt { color: #FF4689 }
.highlight .nv { color: #F8F8F2 }
.highlight .ow { color: #FF4689 }
.highlight .w  { color: #F8F8F2 }
.highlight .mb { color: #AE81FF }
.highlight .mf { color: #AE81FF }
.highlight .mh { color: #AE81FF }
.highlight .mi { color: #AE81FF }
.highlight .mo { color: #AE81FF }
.highlight .s2 { color: #E6DB74 }
.highlight .se { color: #AE81FF }
.highlight .sh { color: #E6DB74 }
.highlight .si { color: #E6DB74 }
.highlight .sx { color: #E6DB74 }
.highlight .sr { color: #E6DB74 }
.highlight .s1 { color: #E6DB74 }
.highlight .ss { color: #E6DB74 }
.highlight .bp { color: #F8F8F2 }
.highlight .fm { color: #A6E22E }
.highlight .il { color: #AE81FF }

/* ── Tables ───────────────────────────────────────────────────── */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
}
.prose th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border-h);
  background: var(--bg-surface);
  white-space: nowrap;
}
.prose td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: none; }
.prose tr:hover td { background: rgba(27,51,88,.025); }

/* ── Definition lists ─────────────────────────────────────────── */
.prose dl { margin: 1.25rem 0; }
.prose dt {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--text);
  font-weight: 700;
  margin-top: 1rem;
}
.prose dd {
  color: var(--text-muted);
  padding-left: 1.5rem;
  margin: .3rem 0 0;
  font-size: .95rem;
}

/* ── Posts index list ─────────────────────────────────────────── */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 760px;
}
.posts-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background .15s;
}
.posts-list-item:last-child { border-bottom: none; }
.posts-list-item:hover { background: var(--bg-card); }

.posts-list-item__main { flex: 1; min-width: 0; }
.posts-list-item__title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: .35rem;
  transition: color .15s;
}
.posts-list-item:hover .posts-list-item__title { color: var(--gold-ink); }
.posts-list-item__desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 .6rem;
}
.posts-list-item__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.posts-list-item__date {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: .15rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 920px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-toc {
    position: static;
    max-height: none;
  }
  .blog-toc--empty { display: none; }
}