/* Hallmark · page: Blog index + post · macrostructure: Index (featured + filterable list) / Long Document (post)
 * theme: custom "Night + Mint" · topic colour via [data-vertical] (matches Solutions) · nav: N11 · footer: Ft3 + mast
 * enrichment: none (typography) · pre-emit critique: P4 H5 E4 S4 R5 V4
 * motion: none beyond link/hover colour (reduced-motion safe)
 */

/* ═════════════ Post cards ═════════════ */
.bpost {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-block: var(--space-md);
  border-block-start: var(--rule-width) solid var(--color-rule);
}
.bpost[hidden] { display: none; }
.bpost__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.bpost__cat { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-strong); color: var(--color-accent-text); }
.bpost__dot, .bchip__dot, .phero .vhero__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1.5px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.bpost:not([data-vertical]) .bpost__dot { background: var(--color-accent-text); }
.bpost__meta time { font-family: var(--font-mono); }
.bpost__title { font-size: var(--text-md); letter-spacing: -0.02em; line-height: 1.25; }
.bpost__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-base) var(--ease-out); }
.bpost__title a:hover { background-size: 100% 1px; }
.bpost__title a::after { content: ""; position: absolute; inset: 0; }
.bpost { position: relative; }
.bpost:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.bpost__title a:focus-visible { outline: none; }
.bpost__excerpt { font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Featured (latest) */
.blatest { padding-block-end: 0; }
.bpost--feature {
  padding: var(--space-lg);
  border: var(--rule-width) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  gap: var(--space-sm);
}
.bpost--feature .bpost__title { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1.1; max-width: 26ch; }
.bpost--feature .bpost__excerpt { font-size: var(--text-md); -webkit-line-clamp: unset; max-width: 60ch; }
@media (min-width: 52rem) { .bpost--feature { padding: var(--space-xl) var(--space-2xl); } }

/* ═════════════ All articles: toolbar + grid ═════════════ */
.ball__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-md); }
.ball__head h2 { font-size: var(--text-xl); }
.bsearch { width: min(100%, 20rem); }
.bsearch[hidden] { display: none; }
.bchips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.bchips[hidden] { display: none; }
.bchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bchip:hover { border-color: var(--color-ink); }
.bchip__n { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-muted); }
.bchip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.bchip[aria-pressed="true"] .bchip__n { color: var(--color-paper); }
@media (pointer: coarse) { .bchip { min-height: 2.75rem; } }

.bcount { margin-block: var(--space-md) 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); min-height: 1lh; }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-lg); }
@media (min-width: 40rem) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); } }

.bempty { display: grid; gap: var(--space-sm); justify-items: start; padding-block: var(--space-xl); color: var(--color-muted); }
.bempty[hidden] { display: none; }
.bmore { display: flex; justify-content: center; padding-block-start: var(--space-lg); }
.bmore[hidden] { display: none; }

/* ═════════════ Post (single) — one centred reading column, no side panel ═════════════ */
.phero__inner { display: grid; gap: var(--space-md); justify-items: start; max-width: 46rem; margin-inline: auto; }
.phero h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); max-width: 24ch; }
.phero__cat { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-accent-text); }
.phero .vhero__dot { background: var(--color-spark); }
.phero__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); max-width: 60ch; }
.phero__meta { font-size: var(--text-sm); color: var(--color-muted); }
.phero__meta time { font-family: var(--font-mono); }

/* Featured image rises into the header; without one, the header ends normally */
.phero--image { padding-block-end: calc(var(--space-3xl) + var(--space-3xl)); }
.pfig-wrap { margin-block-start: calc(var(--space-3xl) * -1 - var(--space-lg)); position: relative; z-index: var(--z-base); }
.pfig {
  max-width: 56rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-2);
}
.pfig img { display: block; width: 100%; height: auto; }
@media (min-width: 60rem) {
  .phero--image { padding-block-end: calc(var(--space-4xl) + var(--space-3xl)); }
  .pfig-wrap { margin-block-start: calc(var(--space-4xl) * -1 - var(--space-lg)); }
}

.pdoc { max-width: 46rem; margin-inline: auto; }
.pdoc .lsec:first-child { border-block-start: var(--rule-width) solid var(--color-rule); padding-block-start: var(--space-lg); }
.ldoc__body h3 { font-size: var(--text-md); letter-spacing: -0.01em; margin-block-start: var(--space-sm); }
.pdoc > p:first-child { font-size: var(--text-md); line-height: 1.6; }

.pshare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding-block: var(--space-md);
  border-block: var(--rule-width) solid var(--color-rule);
}
.pshare p { font-size: var(--text-sm); color: var(--color-muted); }

.pcta {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink);
}
.pcta__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.2; }
.pcta p:not(.pcta__title) { color: var(--color-muted); }
.pcta__btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.prelated { background: var(--color-paper-2); }
.prelated .bpost { border-block-start-color: var(--color-control); }

@media (prefers-reduced-motion: reduce) {
  .bpost__title a { transition: none; }
}

/* Buttons inside article prose keep their own colours (".prose a" would otherwise recolour them) */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary { color: var(--color-on-accent); }
.prose a.btn--primary:hover { color: var(--color-on-accent-hover); }
.prose a.btn--ghost { color: var(--color-ink); }