/* ====================================================================
   BLOG — feed screen body + kr-card terminal layout
   ==================================================================== */

.blog-body {
  padding: 32px 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ─── page head ─── */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 4px;
}

.page-kicker {
  font-family: var(--io-font-display);
  font-size: var(--io-fs-micro);
  letter-spacing: 0.14em;
  color: var(--io-accent-bright);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-kicker .dot {
  margin-right: 4px;
  animation: page-kicker-flicker 4s ease-in-out infinite;
}
@keyframes page-kicker-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 98%      { opacity: 0.3; }
}

.page-title {
  font-family: var(--io-font-display);
  font-size: 36px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--io-text-primary);
  margin: 0;
}

.page-lede {
  margin-top: 14px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-sm);
  line-height: 1.65;
  color: var(--io-text-secondary);
  max-width: 720px;
}
.page-lede .kr-tag { margin: 0 2px; }

.page-stats {
  text-align: right;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  color: var(--io-text-tertiary);
  line-height: 1.85;
  flex-shrink: 0;
}
.page-stats .v       { color: var(--io-text-primary);  margin-left: 4px; }
.page-stats .accent  { color: var(--io-accent-bright); margin-left: 4px; }

/* ─── filter / sort divider ─── */

.filter-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
}
.filter-divider .rule {
  flex: 1;
  height: 1px;
  background: var(--io-border);
}
.filter-divider .label {
  font-family: var(--io-font-display);
  font-size: var(--io-fs-micro);
  letter-spacing: 0.22em;
  color: var(--io-text-tertiary);
  text-transform: uppercase;
}

/* ─── toolbar (uses local kr-btn-toolbar to avoid colliding with card kr-btn) ─── */

.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.toolbar .spacer { flex: 1; }

.kr-btn-toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-micro);
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-sm);
  color: var(--io-text-secondary);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space: nowrap;
  text-decoration: none;
}
.kr-btn-toolbar.ghost { background: transparent; }
.kr-btn-toolbar.ghost:hover {
  background: var(--io-surface-overlay);
  border-color: var(--io-accent-dim);
  color: var(--io-text-primary);
}
.kr-btn-toolbar.primary {
  background: var(--io-accent);
  border-color: var(--io-accent);
  color: var(--io-on-accent);
  font-weight: 700;
}
.kr-btn-toolbar.primary:hover {
  background: var(--io-accent-bright);
  border-color: var(--io-accent-bright);
  color: var(--io-on-accent);
  box-shadow: 0 0 8px var(--io-accent-glow);
}
.kr-btn-toolbar.icon { padding: 5px 8px; }
.kr-btn-toolbar.sm   { padding: 4px 10px; }

/* ─── cards grid (2 columns) ─── */

.cards-grid {
  display: grid;
  /* auto-fill (not auto-fit) keeps empty tracks reserved — a single card on
     /blog/tag/<foo> stays card-sized instead of stretching to the full row
     width and ballooning its cover image. */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 22px;
  align-items: stretch;
  /* When the row only partially fills, pin cards to the start so they
     don't drift toward the center or right edge. */
  justify-content: start;
}

/* CardB: vertical stack of horizontal cards */
.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* CardC: minimal list, no gap, dividers come from card itself */
.cards-list {
  display: flex;
  flex-direction: column;
}

/* ─── pagination ─── */

.pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
}
.pag-n { min-width: 32px; padding: 4px 8px; }