/* maurice.sobiera.com — blog section.
   Loaded only on the /{lang}/blog/ pages, on top of site.css. It adds three
   things and nothing else: the post list, the article header and the article
   body. All colours, fonts and spacing come from the tokens in site.css, so
   the section cannot drift away from the rest of the site. */

/* 1. Post list ------------------------------------------------------------ */
.post-list { display: flex; flex-direction: column; gap: 22px; }

.post-card {
  background: var(--bg-card); border: 1px solid var(--line-card); border-radius: 14px;
  padding: 28px 30px 30px;
  transition: background-color .18s ease, border-color .18s ease;
}
.post-card:hover { background: var(--bg-card-hi); border-color: var(--line-rule); }

.post-kicker { margin: 0 0 10px; }
.post-more { margin-top: 2px; }
.post-title {
  font-family: var(--serif); font-weight: 500; font-size: 23px;
  margin: 0 0 10px; color: var(--fg-strong);
}
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: var(--accent-hi); }

.post-meta {
  font-size: 14.5px; color: var(--fg-mut-2); margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.post-excerpt { font-size: 16.5px; line-height: 1.62; color: var(--fg-mut); margin: 0 0 16px; }

/* 2. Empty state — shown while no article is published yet ---------------- */
.blog-empty {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 30px 34px;
}
.blog-empty h2 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  margin: 0 0 12px; color: var(--fg-strong);
}
.blog-empty p { font-size: 16.5px; line-height: 1.65; color: var(--fg-mut); margin: 0; max-width: 60ch; }
.blog-empty .btn-row { margin-top: 24px; }
/* The template article shows the same box as a note above its first paragraph. */
.post-body .blog-empty { margin-bottom: 34px; }

/* 3. Feed link ------------------------------------------------------------ */
.blog-feed { margin-top: 36px; font-size: 15px; color: var(--fg-mut-2); }

/* 4. Article -------------------------------------------------------------- */
.post-head { padding: 84px var(--pad) 34px; }
.post-head .h1 { margin-bottom: 18px; }
.post-head .post-meta { margin: 0; }

.post-body h2 {
  font-family: var(--serif); font-weight: 500; font-size: 24px;
  color: var(--fg-strong); margin: 44px 0 14px;
}
.post-body h2:first-child { margin-top: 0; }
.post-body h3 {
  font-size: 18px; font-weight: 600; letter-spacing: .01em;
  color: var(--fg); margin: 30px 0 10px;
}
.post-body p, .post-body li { font-size: 16.5px; line-height: 1.7; color: var(--fg-body); }
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; }
.post-body ul { list-style: none; }
.post-body ul li { padding-left: 18px; border-left: 2px solid var(--accent-rule); }
.post-body ol { padding-left: 22px; }
.post-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--fg-body-2);
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body figure { margin: 28px 0; }
.post-body figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-card); }
.post-body figcaption { margin-top: 10px; font-size: 14.5px; color: var(--fg-mut-2); }
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--bg-card); border: 1px solid var(--line-card);
  border-radius: 5px; padding: 1px 5px;
}
.post-body pre {
  background: var(--bg-card); border: 1px solid var(--line-card); border-radius: 12px;
  padding: 18px 20px; overflow-x: auto; margin: 0 0 20px;
}
.post-body pre code { background: none; border: 0; padding: 0; font-size: 14.5px; line-height: 1.6; }

/* 5. Article footer ------------------------------------------------------- */
.post-foot {
  border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: baseline;
  font-size: 15px; color: var(--fg-mut-2);
}

@media (max-width: 720px) {
  .post-card { padding: 24px 22px 26px; }
  .blog-empty { padding: 26px 22px 28px; }
  .post-head { padding-top: 60px; }
  .post-title { font-size: 21px; }
}