/*
 * Blog chrome — the index at /blog/ and all 149 posts.
 *
 * p-post.html loads this file before p-post.css, so everything both templates
 * render lives here: the meta line under a title, and the post card, which the
 * index grid and the related-posts block on every post both use. Rules only
 * the article needs — its header, the reading column, the contents rail — are
 * in p-post.css, and nothing is repeated between the two.
 *
 * Most of the index is already built: .subhero, .section-head, .pairs__list,
 * .cta-final from p-shared, .grid-3, .card and .pill from shared. What is left
 * is three components.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-blog.css
 * (-> p-post.css). Same constraint as the rest of the lab: no literal colour,
 * radius or font size.
 */

/* ---------- meta line ----------
   Category, date, author and read time, under a card title and under the
   article h1. The separators are pseudo-elements so the markup carries no
   decorative middots for a screen reader to read out one by one. The category
   is always the first child, so it never picks one up. */

.pmeta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs); color: var(--muted);
}
.pmeta > * + *::before {
  content: '\00B7';
  margin-right: var(--s-2);
  color: var(--line-strong);
}
.pmeta a:hover { color: var(--accent); }

/* ---------- topic rail ----------
   .pairs__list is already the pill-link row, so the rail reuses it and only
   the current-topic state is new. */

.pairs__list a[aria-current] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}

/* ---------- post card ----------
   The whole card is the link. Somebody scanning 149 posts should not have to
   find the title to click, and a card-sized target is the difference between
   usable and not on a phone. */

.post-card {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: border-color .2s var(--fx-ease), box-shadow .2s var(--fx-ease), transform .2s var(--fx-ease-out);
}
/* The prototype groups cards under editorial h2s, so its card titles are h3.
   The real archive has no grouping and its cards sit directly under the archive
   h1, where h2 is the correct level — and the related-posts strip on a post does
   have a section h2 above it, so there the level is h3. Both are card titles. */
.post-card :is(h2, h3) { font-size: var(--t-lg); }
.post-card p { font-size: var(--t-sm); color: var(--body); }
/* Titles run to two or three lines and excerpts to three or four, so without
   this the meta lines across a row of cards never line up. */
.post-card .pmeta { margin-top: auto; }
.post-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.post-card:hover :is(h2, h3) { color: var(--accent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .post-card:hover { transform: translateY(-3px); }
}

/* ---------- archive heading band ----------
   The live archive (index.php) has no topic rail under the hero, so the default
   subhero bottom (s-8) + section top (s-9) stacks to 160px and the heading
   floats above the cards. Pull both in. lab/p-blog.html keeps the prototype
   topic-rail rhythm and never matches these body classes. */

body.category .subhero,
body.tag .subhero,
body.author .subhero,
body.date .subhero,
body.blog .subhero {
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
}
body.category .subhero + .section,
body.tag .subhero + .section,
body.author .subhero + .section,
body.date .subhero + .section,
body.blog .subhero + .section {
  padding-top: var(--s-5);
}

/* ---------- author archive ----------
   Same subhero language as docs/contact: avatar + name + real ACF bio, then
   the post grid the blog archive already uses. No card chrome around the
   profile — the hero is the profile. */

.author-hero {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.author-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}
.author-hero__copy { min-width: 0; }
.author-hero__copy h1 { max-width: 18em; }
.author-hero__about {
  display: grid;
  gap: var(--s-3);
  max-width: 46em;
  font-size: var(--t-base);
  color: var(--body);
  line-height: var(--lh-body);
}
.author-hero__links a {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
}
.author-hero__links a:hover { color: var(--accent-hover); }
@media (max-width: 640px) {
  .author-hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* ---------- pagination ---------- */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }
.pager a,
.pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--t-sm); font-weight: 600; color: var(--body);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current] { border-color: var(--accent); background: var(--accent); color: var(--white); }
.pager .pager__gap { min-width: 0; border-color: transparent; background: none; color: var(--muted); }