/* ============================================================
   BLOG v2 (.bl-): single posts, post archives and the blog index.
   Mockup: mockups/blog-v2/{single,category}.html

   Loads ON TOP OF article.css: the shell (.av2-col, .av2-hero,
   .av2-byline, .av2-body, .av2-prose, .av2-author-card,
   .av2-comments) is the shipped article shell and is NOT restated
   here. This sheet is only what the blog genuinely adds: the post
   list, the archive inventory line, the guide bridge, the age note,
   the featured-image lead and the exits.
   ============================================================ */

/* ---- archive inventory line: how many posts, over what years, by
   whom. Answers "is this current?" in the first screen. ---- */
.bl-inventory {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2) var(--bji-space-5);
  margin-top: var(--bji-space-4);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-inverse-muted);
}
.bl-inventory b { color: #fff; font-weight: var(--bji-weight-semibold); }

/* ============================================================
   GUIDE BRIDGE: the archive is not the answer most searchers
   arrived with. Renders only when the category carries a
   bji_guide_page term meta.
   ============================================================ */
.bl-bridge {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--bji-space-4);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  margin-bottom: var(--bji-space-6);
}
.bl-bridge .lede { margin: 0; font-weight: var(--bji-weight-bold); color: var(--bji-navy-900); }
.bl-bridge .note { margin: var(--bji-space-1) 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.bl-bridge .go {
  display: inline-block;
  white-space: nowrap;
  background: var(--bji-blue-600);
  color: #fff;
  text-decoration: none;
  font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-sm);
  padding: 10px var(--bji-space-4);
  border-radius: var(--bji-radius-sm);
}
.bl-bridge .go:hover, .bl-bridge .go:focus { background: var(--bji-blue-700); color: #fff; }
@media (max-width: 640px) {
  .bl-bridge { grid-template-columns: 1fr; }
  .bl-bridge .go { text-align: center; }
}

/* ============================================================
   POST LIST. Only 24 of 68 posts carry a featured image and three
   categories carry none, so the row is TEXT-FIRST: the image is an
   enhancement the row renders fine without. No placeholder art, no
   initial tiles.
   ============================================================ */
.bl-year {
  display: flex;
  align-items: center;
  gap: var(--bji-space-4);
  margin: var(--bji-space-6) 0 var(--bji-space-3);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-text-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bl-year::after { content: ""; flex: 1; height: 1px; background: var(--bji-border); }
.bl-year:first-child { margin-top: 0; }

.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bji-space-1);
  padding: var(--bji-space-4) 0;
  border-top: 1px solid var(--bji-border);
}
.bl-item:first-child { border-top: 0; }
.bl-item.has-img {
  grid-template-columns: 1fr 148px;
  grid-template-areas: "meta img" "title img" "dek img" "foot img";
  column-gap: var(--bji-space-5);
}
.bl-item.has-img .meta  { grid-area: meta; }
.bl-item.has-img h3     { grid-area: title; }
.bl-item.has-img .dek   { grid-area: dek; }
.bl-item.has-img .foot  { grid-area: foot; }
.bl-item.has-img .thumb { grid-area: img; align-self: start; }

.bl-item .meta {
  margin: 0;
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
  font-variant-numeric: tabular-nums;
}
.bl-item h3 {
  margin: 0;
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-snug);
  letter-spacing: -0.01em;
}
.bl-item h3 a { color: var(--bji-navy-900); text-decoration: none; }
.bl-item h3 a:hover, .bl-item h3 a:focus { color: var(--bji-link); }
.bl-item .dek {
  margin: 0;
  color: var(--bji-text-muted);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-body);
}
.bl-item .foot { margin: 0; font-size: var(--bji-text-xs); color: var(--bji-text-faint); }
.bl-item .foot a { color: var(--bji-link); text-decoration: none; }
.bl-item .foot a:hover { text-decoration: underline; }
.bl-item .thumb a { display: block; }
.bl-item .thumb img {
  display: block;
  width: 148px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--bji-radius-sm);
  border: 1px solid var(--bji-border);
}
@media (max-width: 560px) {
  .bl-item.has-img { grid-template-columns: 1fr; grid-template-areas: "meta" "img" "title" "dek" "foot"; }
  .bl-item.has-img .thumb { margin-bottom: var(--bji-space-2); }
  .bl-item .thumb img { width: 100%; height: 160px; }
}

/* ---- pagination ---- */
.bl-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-2);
  align-items: center;
  margin-top: var(--bji-space-6);
  padding-top: var(--bji-space-5);
  border-top: 1px solid var(--bji-border);
}
.bl-pager .page-numbers {
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-sm);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-link);
  text-decoration: none;
}
.bl-pager a.page-numbers:hover { background: var(--bji-blue-050); }
.bl-pager .is-current {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-900);
  color: #fff;
}
.bl-pager .next { margin-left: auto; }

/* ============================================================
   EXITS. Pagination was the only way out of the legacy archive.
   ============================================================ */
.bl-topics { margin-top: var(--bji-section-gap); }
.bl-topics h2 {
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
  margin: 0 0 var(--bji-space-4);
}
.bl-topic-grid { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); }
.bl-topic-grid a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 7px 14px;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-navy-800);
  text-decoration: none;
}
.bl-topic-grid a:hover, .bl-topic-grid a:focus {
  border-color: var(--bji-blue-500);
  color: var(--bji-link);
  background: var(--bji-blue-050);
}
.bl-topic-grid .n { color: var(--bji-text-faint); font-size: var(--bji-text-xs); font-variant-numeric: tabular-nums; }

/* ============================================================
   AUTHOR PAGE (author.php). The E-E-A-T page behind every byline:
   photo, name and the stored bio lead, because "who is this and why
   should I trust them" is the question that brought the reader here.
   ============================================================ */
.bl-author-id {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--bji-space-5);
  align-items: start;
}
.bl-author-id .photo {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgb(255 255 255 / 0.18);
  background: var(--bji-navy-700);
}
.bl-author-id .kicker {
  display: block;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bji-blue-300);
  margin-bottom: var(--bji-space-1);
}
.bl-author-id h1 { margin-bottom: var(--bji-space-3); }
.bl-author-id .bio {
  color: var(--bji-text-inverse-muted);
  font-size: var(--bji-text-base);
  line-height: var(--bji-leading-body);
  max-width: 42rem;
}
.bl-author-id .bio p { margin: 0 0 var(--bji-space-2); }
.bl-author-id .bio p:last-child { margin-bottom: 0; }
.bl-author-id .bio a { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
  .bl-author-id { grid-template-columns: 1fr; }
  .bl-author-id .photo { width: 88px; height: 88px; }
}

/* section heading shared by the author page's post list */
.bl-section-head {
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
  margin: 0 0 var(--bji-space-4);
}

/* ============================================================
   SINGLE POST
   ============================================================ */

/* ---- age note: the blog spans 2004 to 2025 and the old posts open
   on sentences like "this Saturday (tomorrow)". Saying so is honest,
   and it gives a stale post a live exit. ---- */
.bl-age {
  background: var(--bji-amber-100);
  border-left: 4px solid var(--bji-amber-500);
  border-radius: 0 var(--bji-radius-sm) var(--bji-radius-sm) 0;
  padding: var(--bji-space-3) var(--bji-space-4);
  margin-bottom: var(--bji-space-5);
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-body);
  color: var(--bji-gray-800);
}
.bl-age p { margin: 0; }
.bl-age strong { color: var(--bji-amber-700); }

/* ---- featured image lead. 24 of 68 posts have one; the legacy
   single template shows it on none of them. ---- */
.bl-lead { margin: 0 0 var(--bji-space-5); }
.bl-lead img { display: block; width: 100%; height: auto; border-radius: var(--bji-radius-md); }
.bl-lead figcaption {
  margin-top: var(--bji-space-2);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
  text-align: center;
}

/* ---- categories + tags: same data as the legacy "Posted in X and
   tagged Y." sentence, without a sentence wrapped around it. ---- */
.bl-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-2);
  margin-top: var(--bji-space-6);
  padding-top: var(--bji-space-4);
  border-top: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
.bl-tags .lbl { color: var(--bji-text-faint); }
.bl-tags a {
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  padding: 5px 12px;
  color: var(--bji-navy-800);
  text-decoration: none;
  font-weight: var(--bji-weight-medium);
}
.bl-tags a:hover, .bl-tags a:focus {
  border-color: var(--bji-blue-500);
  color: var(--bji-link);
  background: var(--bji-blue-050);
}

/* ---- previous / next within the category ---- */
.bl-updown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bji-space-4);
  margin-top: var(--bji-space-6);
}
/* at the archive edges only one neighbour exists; it takes the full
   width rather than leaving a hole where the other card would be */
.bl-updown:has(> a:only-child) { grid-template-columns: 1fr; }
.bl-updown a {
  display: block;
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4);
  text-decoration: none;
  background: var(--bji-surface);
}
.bl-updown a:hover, .bl-updown a:focus { border-color: var(--bji-blue-300); background: var(--bji-blue-050); }
.bl-updown .dir {
  display: block;
  font-size: var(--bji-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bji-text-faint);
  margin-bottom: 6px;
}
.bl-updown .ttl {
  display: block;
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
  line-height: var(--bji-leading-snug);
  font-size: var(--bji-text-sm);
}
.bl-updown a.next { text-align: right; }
@media (max-width: 560px) {
  .bl-updown { grid-template-columns: 1fr; }
  .bl-updown a.next { text-align: left; }
}

/* ---- more from this category: the same row component as the
   archive, not a second card design ---- */
.bl-more { margin-top: var(--bji-section-gap); }
.bl-more h2 {
  font-size: var(--bji-text-xl);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
  margin: 0 0 var(--bji-space-3);
}
.bl-more .all {
  display: inline-block;
  margin-top: var(--bji-space-4);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-link);
  text-decoration: none;
}
.bl-more .all:hover { text-decoration: underline; }

/* ---- empty archive ---- */
.bl-none {
  border: 1px dashed var(--bji-border-strong);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-6);
  text-align: center;
  color: var(--bji-text-muted);
}