/* web/blog.css -- page-scoped styles for the blog index + post pages.
 * Builds on tokens/components from brand.css (loaded first). */

.blog-head {
  padding: 56px 0 8px;
}

.post-grid {
  display: grid;
  gap: 20px;
  padding-bottom: 88px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.post-card .post-date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

.post-card h2 {
  font-size: 1.4rem;
  margin: 0;
}

.post-card h2 a { color: var(--text); }
.post-card h2 a:hover { color: var(--accent-bright); }

.post-card .excerpt { margin: 0; }

.post-card .read-more {
  color: var(--accent-soft);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Article (single post) layout */
.article-wrap {
  padding: 56px 0 96px;
}

article.post {
  max-width: 68ch;
  margin: 0 auto;
}

article.post .post-date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-transform: uppercase;
}

article.post h1 {
  margin-top: 0.4rem;
}

article.post .byline {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin-bottom: 2rem;
}

article.post p {
  font-size: 1.04rem;
}

.back-to-blog {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--text-dim);
  font-weight: 500;
}
.back-to-blog:hover { color: var(--accent-bright); }

.back-to-blog::before {
  content: "\2190 ";
}

/* ---- Post-page code + mobile (the index was fine; posts have code) ----
   Inline code tokens (e.g. long generic types) wrap instead of overflowing
   the reading column; block code keeps its formatting and scrolls inside its
   own box, so a wide Rust snippet never widens the page on a phone. */
article.post :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
article.post pre { max-width: 100%; overflow-x: auto; }

/* Desktop: prose stays at a readable ~68ch, but code blocks break out of
   that column and use the empty side space, so wide snippets fit without
   scrolling. Centered on the column's centre line (which is the viewport
   centre, since the column is margin:0 auto); min(.,92vw) keeps it on-screen. */
@media (min-width: 1000px) {
  article.post pre {
    width: min(1120px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  .blog-head { padding: 36px 0 8px; }
  .article-wrap { padding: 32px 0 60px; }
  /* On a phone a wide code block that scrolls just reads as "cut off". Wrap
     it instead so every line is visible (alignment gives a little, which is
     the right trade for reading on mobile), and shrink it so it fits. */
  article.post pre { font-size: 0.72rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  article.post pre code { white-space: inherit; }
}