/* BitComfy — category archive template.
   Scope: `.bc-*` only. Loaded on is_category() after gp-bridge and shared.css.

   Every value comes from a design token except two, which the reference uses
   and the token set does not carry. They are deliberately local and must not
   be promoted into tokens/ without approval:
     --bc-ratio-acard : 3/2  (archive grid card image)
     --bc-hit         : 40px (pagination control box)

   Two reference values are met by the nearest token rather than exactly:
   the H1's -0.025em tracking uses --track-tight (-0.022em), and the card
   title's 1.3 line-height uses --lh-snug. Both differ by less than a quarter
   of a pixel at their rendered sizes.

   Verified reference geometry @1536:
     grid 764 + 72 + 340 = 1176 inside a 1240 box with 32px padding —
     the same column as the article template, so a story keeps its width
     when a reader moves from the section to the piece.

   One token name collides. `--text-body` is declared twice: as a colour in
   tokens/colors.css and as a font shorthand in tokens/typography.css, which
   loads second and wins. So `font: var(--text-body)` is correct and
   `color: var(--text-body)` is an invalid value that makes the element
   inherit instead — which inside a card anchor means the link colour, and
   turns deck copy clay red. Body copy here therefore names --ink-800
   directly, which is what --text-body was meant to resolve to. */

.bc-archive-page {
  --bc-ratio-acard: 3/2;
  --bc-hit: 40px;
  --bc-accent: var(--ink-500); /* overridden inline per category */
}

/* GP flexes .site-content for its content/sidebar pair. This template is a
   single child that manages its own grid, so the flex context must go. */
.category .site-content {
  display: block;
}

/* ---------------------------------------------------------------
   1. Section head
   --------------------------------------------------------------- */
.bc-archive__head {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--page-pad) 0;
}

.bc-archive__head .bc-breadcrumb {
  margin-bottom: var(--sp-6);
}

.bc-archive__masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-9);
  align-items: end;
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-rule);
}

.bc-archive__identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.bc-archive__rule {
  width: 56px;
  height: 4px;
  background-color: var(--bc-accent);
}

/* -0.025em, not --track-tight (-0.022em). The reference tracks its 68px
   section H1 and its 44px hero at -0.025 and only the 56px article H1 at
   -0.022, so the two cannot share a token. --track-tight stays correct on the
   article and on this page's 42px lead title; this one heading is explicit. */
.bc-archive__title {
  font: var(--text-display-lg);
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.bc-archive__description {
  font: var(--text-article-deck);
  color: var(--ink-600);
  margin: 0;
  max-width: var(--measure-deck);
  text-wrap: pretty;
}

.bc-archive__count {
  font: var(--text-meta);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   2. Shell — story column and the 340px rail
   --------------------------------------------------------------- */
.bc-archive {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-9) var(--page-pad) var(--sp-11);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-10);
  align-items: start;
}

.bc-archive__stream {
  min-width: 0;
}

/* Image placeholders for a post with no featured image. Tinted from the
   section accent so the grid keeps its rhythm rather than collapsing, and
   sized by the same aspect-ratio as a real image so nothing shifts. */
.bc-media--empty {
  background-color: var(--paper-sand);
  background-color: color-mix(in srgb, var(--bc-accent) 16%, var(--paper-sand));
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------
   3. Lead story — page one only, full column width
   --------------------------------------------------------------- */
.bc-archive__lead {
  padding-bottom: var(--sp-9);
  border-bottom: 1px solid var(--line-hairline);
}

.bc-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-out);
}

.bc-lead:hover {
  opacity: 0.9;
  text-decoration: none;
}

.bc-lead__media {
  aspect-ratio: var(--ratio-hero);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bc-lead__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bc-lead__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.bc-lead__eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bc-accent);
}

.bc-lead__title {
  font: var(--text-h1);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.bc-lead__deck {
  font: var(--text-body);
  color: var(--ink-800); /* not var(--text-body): see note at top of file */
  margin: 0;
  text-wrap: pretty;
}

.bc-lead__meta {
  font: var(--text-meta);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   4. Story grid
   --------------------------------------------------------------- */
.bc-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

/* The lead only exists on page one; the grid opens the column otherwise. */
.bc-archive__lead + .bc-archive__grid {
  margin-top: var(--sp-9);
}

.bc-acard {
  min-width: 0;
}

.bc-acard__link {
  height: 100%;
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-out);
}

.bc-acard__link:hover {
  opacity: 0.9;
  text-decoration: none;
}

/* overflow:hidden is load-bearing, not cosmetic. Without it the box height
   stays indefinite, so the image's height:100% cannot resolve, it falls back
   to its own intrinsic ratio, and any source taller than 3:2 stretches the
   box past the aspect-ratio — giving a row of cards with mismatched image
   bands. Clipping makes the height definite and lets object-fit crop. */
.bc-acard__media {
  aspect-ratio: var(--bc-ratio-acard);
  overflow: hidden;
}

.bc-acard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The placeholder inherits the card's square top corners, not its own. */
.bc-acard__media.bc-media--empty {
  border-radius: 0;
}

.bc-acard__body {
  flex: 1 1 auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.bc-acard__cat {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bc-accent);
}

.bc-acard__title {
  font: var(--text-h3);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.bc-acard__deck {
  font: var(--text-body-sm);
  color: var(--ink-800); /* not var(--text-body): see note at top of file */
  margin: 0;
  text-wrap: pretty;
}

/* Pinned to the foot of the card so the rules line up across a row whose
   titles and decks run to different lengths.

   --ink-500, not the reference's --ink-400. At 13px on the white card,
   #8D7D6E gives 3.96:1 against WCAG AA's 4.5:1 minimum; #6F5F51 gives 5.66:1.
   This is one token step inside the existing system rather than a new value,
   and it is the same token the reference already uses for the lead story's
   meta line — so the two meta treatments now agree instead of differing. */
.bc-acard__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-hairline);
  font: var(--text-caption);
  color: var(--ink-500);
}

/* ---------------------------------------------------------------
   5. Pagination — standard WordPress nav/ul/li markup
   --------------------------------------------------------------- */
.bc-pagination {
  margin-top: var(--sp-10);
}

.bc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.bc-pagination .page-numbers {
  min-width: var(--bc-hit);
  height: var(--bc-hit);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--text-button);
  color: var(--ink-700);
  text-decoration: none;
}

.bc-pagination a.page-numbers:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
  text-decoration: none;
}

.bc-pagination .page-numbers.current {
  background-color: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.bc-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--text-muted);
}

.bc-pagination .prev,
.bc-pagination .next {
  padding: 0 20px;
  letter-spacing: var(--track-ui);
  color: var(--text-strong);
}

/* ---------------------------------------------------------------
   6. Empty section
   --------------------------------------------------------------- */
.bc-archive__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-9) 0;
  max-width: var(--measure-deck);
}

.bc-archive__empty-title {
  font: var(--text-h2);
  letter-spacing: var(--track-heading);
  color: var(--text-strong);
  margin: 0;
}

.bc-archive__empty-text {
  font: var(--text-body);
  color: var(--ink-800); /* not var(--text-body): see note at top of file */
  margin: 0;
}

.bc-archive__empty-link {
  font: var(--text-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bc-accent);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--bc-accent);
}

/* ---------------------------------------------------------------
   7. Responsive
   The reference carries no layout media queries. These breakpoints mirror
   the article template's so the two never disagree, and the type scales
   itself: the token ramp at <=768px already moves the H1 68 -> 40 and the
   description 26 -> 20.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bc-archive__head {
    padding-top: var(--sp-8);
  }

  .bc-archive {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-9);
  }
}

@media (max-width: 600px) {
  .bc-archive__masthead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .bc-archive__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .bc-archive__lead + .bc-archive__grid {
    margin-top: var(--sp-8);
  }

  .bc-archive__lead {
    padding-bottom: var(--sp-8);
  }
}