/* Blog pages only (loaded by blog.py on /blog/ and /tr/blog/).
   Builds on the tokens, .page-head and .prose rules in styles.css; adds nothing global. */

/* ---------- Index ---------- */
.blog-head { padding-bottom: var(--s-7); }
.blog-index { padding-bottom: var(--s-9); }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-card { position: relative; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.post-card h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); line-height: 1.15; margin: var(--s-2) 0 var(--s-3); }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link target */
.post-card h2 a:focus-visible { outline: none; }
.post-card:has(h2 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.post-card:hover h2 a { color: var(--accent); }
.post-card > p:not(.post-meta) { color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--s-3); }

.post-meta { margin: 0; font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.post-tags li {
  font-size: var(--t-xs); line-height: 1; color: var(--ink-2); padding: 6px 10px; border-radius: 999px;
  background: var(--bg-sunk); margin: 0;
}

/* ---------- Post header ---------- */
.post-head { padding-bottom: var(--s-6); }
.post-head h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem); line-height: 1.08; }
.post-back { margin: 0 0 var(--s-5) !important; font-size: var(--t-sm) !important; }
.post-back a { color: var(--ink-3); text-decoration: none; }
.post-back a:hover { color: var(--accent); }
.post-head .post-lede { margin-top: var(--s-4); }
.post-head .post-meta { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Post body (extends .prose) ---------- */
.post-body { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.post-body > p:first-child { margin-top: 0; }
.post-body h2 { scroll-margin-top: 88px; }
.post-body h3 { scroll-margin-top: 88px; }
.post-body h2:first-child { margin-top: 0; }
.post-body p, .post-body li { line-height: 1.7; }
.post-body a { overflow-wrap: anywhere; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.post-body img { display: block; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.post-body figure { margin: var(--s-6) 0; }
.post-body .callout { margin: var(--s-5) 0; max-width: 68ch; }
.post-body .callout p { color: var(--ink); line-height: 1.6; }
.post-body .callout p + p { margin-top: .6em; }
.post-body kbd { vertical-align: .08em; }

.post-body pre {
  margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) var(--s-5); overflow-x: auto;
  background: var(--bg-sunk); border-radius: var(--r); max-width: 100%;
  font: 400 .875rem/1.6 var(--font-mono); color: var(--ink); tab-size: 2;
}
.post-body pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre; }

.table-wrap { margin: var(--s-5) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.5; }
.post-body th, .post-body td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.post-body th { font-weight: 600; color: var(--ink); background: var(--bg-sunk); white-space: nowrap; }
.post-body td { color: var(--ink-2); min-width: 9em; }
.post-body td:first-child { color: var(--ink); font-weight: 500; min-width: 7em; }
.post-body tbody tr:last-child td { border-bottom: 0; }

/* ---------- End-of-post CTA ---------- */
.post-cta {
  margin: var(--s-8) 0 var(--s-6); padding: var(--s-6); border-radius: var(--r-lg);
  background: var(--accent-wash); max-width: 68ch;
}
.post-cta h2 { font-size: 1.5rem !important; line-height: 1.2; margin: 0 0 var(--s-3) !important; }
.post-cta p { color: var(--ink-2); margin: 0 0 var(--s-5); }
.post-cta .cta-row { margin: 0; }
.post-cta .post-cta-fine { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.post-other-lang { font-size: var(--t-sm); color: var(--ink-3) !important; margin: 0 0 var(--s-4); }
.prose .post-tags { padding-left: 0; margin-top: var(--s-4); }
.prose .post-tags li { margin: 0; color: var(--ink-2); max-width: none; }

@media (max-width: 600px) {
  .post-cta { padding: var(--s-5); }
  .post-body pre { padding: var(--s-4); font-size: .8125rem; margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); max-width: none; border-radius: 0; }
  .post-card { padding: var(--s-5) 0; }
}