/* Articles index — pagination, category chips, guides teaser (P1/P2)
   Page-scoped styles; uses flame design tokens from app.css. Do not
   duplicate rules that belong in the global system. */

.article-count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}

/* Category hub chips */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* Pagination */
.article-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-10);
}

.article-pagination .btn { min-width: 2.5rem; justify-content: center; }

.article-pagination__dots {
  padding: 0 var(--s-2);
  color: var(--text-dim);
}

/* Guides teaser link-out */
.guides-more { margin-top: var(--s-2); }
.guides-more a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.guides-more a:hover { text-decoration: underline; }