/* ---------- Entry list row layout (read/index page) ---------- */
/*
  Deliberately a <div>-based grid, not tag-list.css's <a>-based
  `.entry-list-link`. On this page, tags are real links out to
  /tags/<tag>/ (unlike a tag-listing page, where linking to a tag
  from within its own listing wouldn't make sense -- see §6.5). That
  means a row here can contain more than one independently-clickable
  link (the title, and each tag), so the row itself can't also be one
  big <a> -- nesting <a> inside <a> is invalid and breaks the
  accessibility tree. Same visual grid, different wrapper element.
*/
.entry-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.entry-meta-small {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin: 0;
}

.entry-date-small {
  font-family: var(--font-sans);
}

/* Tags ARE links here -- the opposite of tag-list.css's
   .entry-tags-small, which is plain text by design (§6.5). */
.entry-tags-small a.entry-tag-link {
  color: var(--color-ink-soft);
  text-decoration: none;
  text-underline-offset: 2px;
}
.entry-tags-small a.entry-tag-link:hover,
.entry-tags-small a.entry-tag-link:focus-visible {
  color: var(--color-thread);
  text-decoration: underline;
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
}

.prev-page,
.next-page {
  color: var(--color-thread);
  text-decoration: none;
}
.prev-page:hover,
.next-page:hover {
  color: var(--color-thread-light);
}

.prev-page-inactive,
.next-page-inactive {
  color: var(--color-line);
}