/**
 * Blog archive – page-scoped only.
 *
 * Everything structural comes from the kit: `.page-hero--compact`, `.filters`,
 * `.filter-pill`, `.card`, `.card--lift`, `.card__media`, `.grid--2`,
 * `.with-aside`, `.tag`, `.empty`, `.pagination`, `.cta-band`. What is here is
 * only what the kit does not already carry, and every class it introduces is
 * prefixed `blog__` so it cannot collide with another stylesheet in the same
 * global cascade.
 *
 * One token gap, flagged rather than fudged: the 44px tap target the mock-up
 * gives its pills has no token, so they take `--btn-min-height` (48px). Larger,
 * so still clear of the accessibility floor, but not the signed-off value. A
 * `--tap-min` token in tokens.css would close it.
 *
 * Media-query breakpoints carry raw px, matching pages.css. They are structural
 * thresholds rather than design values, and the kit sets that precedent.
 */

/* ---------------------------------------------------------------------------
 * 1. CATEGORY TOOLBAR
 *
 * Real links to the category archives, so filtering survives JavaScript being
 * off. `aria-current` rather than `aria-pressed`: these are navigation, not
 * toggles, and `aria-pressed` is not valid on an anchor.
 * ------------------------------------------------------------------------- */
.blog__toolbar {
  background: var(--paper);
  border-block-end: var(--border-hairline) solid var(--line);
  padding-block: var(--s-4);
  padding-inline: var(--gutter);
}
.blog__toolbar-inner {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}
.blog__pills {
  margin-inline: 0;
  max-inline-size: none;
}
.blog__pill {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--btn-min-height);
}
.blog__pill[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ---------------------------------------------------------------------------
 * 2. FEATURED POST
 *
 * One wide editorial card rather than a bigger grid card, composed on `.card`
 * so the border, radius, surface and lift transition all come from the kit.
 * ------------------------------------------------------------------------- */
.blog__feat {
  /* `.section` only pads; it does not constrain. Without a width of its own the
     card ran the full viewport while the toolbar, the grid and the side rail all
     stop at `--container-width`, so the featured article was the one element on
     the page that did not line up with anything. `.p-feat` in the approved
     mock-up carries exactly these two declarations. */
  max-inline-size: var(--container-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
/* No featured image is a real state, not a broken one. The body takes the whole
   card rather than leaving an empty column beside it. */
.blog__feat--no-media { grid-template-columns: 1fr; }
.blog__feat-media { display: grid; }
.blog__feat-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.blog__feat-body {
  position: relative;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* The dashed route arc, echoing the logo. The card's quiet brand mark. */
.blog__feat-body::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s-7) * -1);
  inset-inline-end: calc(var(--s-6) * -1);
  inline-size: calc(var(--s-8) + var(--s-7));
  block-size: calc(var(--s-8) + var(--s-7));
  border-radius: 50%;
  border: var(--border-rule) dashed var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.blog__feat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.blog__feat h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  max-inline-size: 22ch;
}
.blog__feat h2 a { transition: color var(--dur-fast) ease; }
.blog__feat h2 a:hover { color: var(--blue); }
.blog__feat .blog__feat-excerpt {
  font-size: var(--text-base);
  color: var(--ink-soft);
  max-inline-size: 52ch;
  line-height: 1.6;
}
.blog__feat-byline {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: var(--border-hairline) solid var(--line-soft);
  font-size: var(--text-s);
}
.blog__feat-avatar {
  inline-size: var(--s-6);
  block-size: var(--s-6);
  border-radius: 50%;
  flex: none;
  background: var(--blue);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
}
.blog__feat-byline b { display: block; color: var(--ink); }
/* The date and read-time line, by class rather than as `.blog__feat-byline span`.
   The avatar disc is also a span inside this row, so the descendant selector
   out-specified `.blog__feat-avatar` and repainted the initial `--ink-faint` on
   `--blue` (1.93:1, against a 4.5:1 floor) at `--text-xs`, and swapped its
   `display: grid` for `block` so `place-items: center` stopped applying and the
   letter sat in the top corner instead of the middle of the disc. */
.blog__feat-meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-weight: 600;
}

@media (min-width: 861px) {
  .blog__feat-body { padding: var(--s-6); }
}
@media (max-width: 860px) {
  .blog__feat { grid-template-columns: 1fr; }
  .blog__feat-media { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------------------
 * 3. POST CARDS  – image, category, title, date and read time
 * ------------------------------------------------------------------------- */
.blog__post .tag { align-self: flex-start; }
.blog__post h3 {
  font-size: var(--text-base);
  line-height: 1.35;
}
.blog__post h3 a { transition: color var(--dur-fast) ease; }
.blog__post h3 a:hover { color: var(--blue); }
.blog__post .blog__post-meta {
  margin-block-start: auto;
  padding-block-start: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

/* ---------------------------------------------------------------------------
 * 4. GRID HEAD
 * ------------------------------------------------------------------------- */
.blog__grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-block-end: var(--s-4);
}
.blog__grid-head h2 { font-size: var(--text-xl); }
.blog__count {
  font-size: var(--text-s);
  color: var(--ink-faint);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 5. SIDE RAIL
 *
 * Each block is a `.card`, so padding, border, radius and the column gap are
 * the kit's. Only the small-caps label needs saying.
 * ------------------------------------------------------------------------- */
.blog__side-block > h2 {
  font-family: var(--body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* The chip is inline-flex, so in the card's column flex it would otherwise
   stretch the full width and stop reading as a chip. */
.blog__side-block .placeholder-note { align-self: flex-start; }

.blog__mostread li {
  display: flex;
  gap: var(--s-2);
  padding-block: var(--s-2);
}
.blog__mostread li + li {
  border-block-start: var(--border-hairline) solid var(--line-soft);
}
.blog__rank {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--blue-tint-20);
  line-height: 1.1;
  flex: none;
}
.blog__mostread a {
  font-weight: 600;
  font-size: var(--text-s);
  color: var(--ink);
  transition: color var(--dur-fast) ease;
}
.blog__mostread a:hover { color: var(--blue); }
.blog__mr-meta {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
  margin-block-start: 0.25em;
}

.blog__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.blog__sub {
  background: var(--blue-tint-05);
  border-color: var(--blue-tint-20);
}

/* ---------------------------------------------------------------------------
 * 6. PAGINATION
 *
 * `the_posts_pagination()` wraps its links in a `.nav-links` div, so the kit's
 * flex row lands on the wrapper rather than the links. This puts it back where
 * the design expects it.
 * ------------------------------------------------------------------------- */
.blog__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
}