/* =========================================================
   Content Discovery (Milestone 4) — blog index, categories,
   search, author archives. Reuses Design-System tokens.
   ========================================================= */

/* ---- Archive header ---- */
.archive-header { max-width: var(--reading); margin-bottom: var(--sp-4); }
.archive-header__title { margin: var(--sp-1) 0 var(--sp-2); }
.archive-header__intro { color: var(--muted); }
.archive-header__intro p:last-child { margin-bottom: 0; }

/* ---- Discovery toolbar (chips + sort) ---- */
.discovery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; }
.chip { display: inline-block; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--navy); font-size: var(--fs-small); font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip:hover { background: var(--surface); text-decoration: none; }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.sort-form { display: inline-flex; align-items: center; gap: 8px; }
.sort-form label { font-size: var(--fs-small); color: var(--muted); }
.sort-form select { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: var(--fs-small); }
@media (max-width: 640px) {
  .discovery-toolbar { align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}

/* ---- Featured pillar (category hub) ---- */
.archive-featured { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-4); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-6); }
.archive-featured__media img { border-radius: var(--radius-md); width: 100%; }
.archive-featured__title { margin: var(--sp-1) 0 var(--sp-2); }
.archive-featured__title a { color: var(--navy); }
.archive-featured__excerpt { color: var(--muted); margin-bottom: var(--sp-3); }
@media (max-width: 760px) { .archive-featured { grid-template-columns: 1fr; } .archive-featured__media { order: -1; } }

/* ---- Matching topics (search) ---- */
.matching-topics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.matching-topics__label { font-size: var(--fs-small); color: var(--muted); }

/* ---- Empty / no-results states ---- */
.no-results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-6); text-align: center; }
.no-results .search-form { max-width: 480px; margin: var(--sp-3) auto; }
.no-results__topics { margin-top: var(--sp-4); }
.no-results__topics .chips { justify-content: center; }

/* ---- Author header (EEAT) ---- */
.author-header { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-3) 0 var(--sp-4); }
.author-header__media img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.author-header__name { margin: 2px 0; }
.author-header__role { color: var(--muted); margin: 0 0 var(--sp-1); }
.author-header__bio { max-width: 640px; margin: 0; }
@media (max-width: 560px) { .author-header { flex-direction: column; text-align: center; } }

/* ---- Pagination ---- */
.pagination { margin-top: var(--sp-6); }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers { display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-weight: 600; }
.pagination .page-numbers:hover { background: var(--surface); }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination .page-numbers.dots { border: 0; }