/* SPDX-License-Identifier: AGPL-3.0-only
 * Copyright (C) 2026 G ROX EOOD
 *
 * FR-87 (#1776) — the blog's styles, on top of docs.css (whose tokens they
 * use). Published and linked only once a post exists, so a site with no
 * posts ships exactly the bytes it did before.
 */

/* ── layout: one reading column and the table of contents ───────────── */
.layout--blog { grid-template-columns: minmax(0, 1fr) var(--toc-w); max-width: 1120px; }
@media (max-width: 1200px) { .layout--blog { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px)  { .layout--blog { gap: 0; } }
.content--blog { max-width: 760px; width: 100%; justify-self: center; }

/* ── a post ─────────────────────────────────────────────────────────── */
.post-head { margin-bottom: 8px; }
.post-dek { font-size: 1.2rem; line-height: 1.45; color: var(--ink-muted); margin: 0 0 14px; }
.post-byline { font-size: .9rem; color: var(--ink-faint); margin: 0 0 16px; }
.post-byline a { color: var(--ink-muted); font-weight: 600; }
.post .prose { font-size: 1.05rem; line-height: 1.7; }
.post .prose h2 { margin-top: 1.9em; }
/* A drawing scales without loss, so it takes the column; a photo keeps its
   own size, because stretching one past its pixels blurs it. */
.post .prose .figure img[src$=".svg"] { width: 100%; }
.post-syndication { font-size: .9rem; color: var(--ink-muted); margin: 2.2em 0 0; }
.post-syndication a, .author-box a, .on-the-blog a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: from-font;
}

.author-box {
  margin: 2.4em 0 0; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-soft);
}
.author-box__name { font-weight: 700; margin: 0 0 4px; }
.author-box__bio { margin: 0 0 6px; color: var(--ink-muted); }
.author-box__links { margin: 0; font-size: .88rem; color: var(--ink-faint); }

.related-docs { margin: 2.4em 0 0; }
.related-docs__head, .on-the-blog__head {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 10px; border: 0; padding: 0;
}

.post-cta {
  margin: 2.4em 0 0; padding: 20px 22px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #e0f2f1 0%, #e8f5e9 50%, #e0f7fa 100%);
  border: 1px solid var(--border-teal);
}
.post-cta__title { font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.post-cta p { margin: 0 0 10px; }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* ── the index ──────────────────────────────────────────────────────── */
.feed-link { font-size: .9rem; margin: -6px 0 22px; }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.post-card a {
  display: block; padding: 18px 20px; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.post-card a:hover { border-color: var(--teal); box-shadow: var(--shadow-card); text-decoration: none; }
.post-card__title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 6px; }
.post-card__dek { color: var(--ink-muted); margin: 0 0 8px; }
.post-card__meta { font-size: .85rem; color: var(--ink-faint); margin: 0; }
.blog-pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2em 0 0; font-size: .92rem; }
.blog-pages a { display: inline-flex; align-items: center; gap: 6px; }

/* ── on a docs page: the posts that link to it ──────────────────────── */
.on-the-blog {
  margin: 2.4em 0 0; padding: 12px 16px;
  border-left: 3px solid var(--teal); background: var(--bg-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.on-the-blog ul { margin: 0; padding-left: 1.2em; }
.on-the-blog li { margin: .2em 0; }