/* Post pager component (web/templates/_post_pager.html).
   Always one row of two equal slots: Previous left, Next (or RSS) right.
   A missing Previous leaves its slot empty so Next stays on the right.
   Colours come from the theme tokens in main.css; every pair meets WCAG AA. */

.post-pager { max-width: var(--measure); margin-top: 3rem; }

.post-pager__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.post-pager__item--next,
.post-pager__item--feed { grid-column: 2; text-align: right; }

.post-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;                        /* both buttons share the row height */
  padding: 0.875rem 1rem;              /* well above the 24px target size (WCAG 2.5.8) */
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text-base);
  overflow-wrap: anywhere;             /* long titles wrap inside half a phone screen */
  transition: border-color var(--t-fast), background var(--t-fast);
}
.post-pager__link:hover { border-color: var(--accent); }
.post-pager__link:hover .post-pager__title { text-decoration: underline; }

.post-pager__label { font-size: 0.8125rem; color: var(--text-muted); }
.post-pager__title { font-weight: 600; line-height: 1.35; }

/* Subscribe: the newest post invites the reader to follow the blog instead. */
.post-pager__link--feed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.post-pager__link--feed .post-pager__label { color: inherit; }
.post-pager__link--feed:hover { background: var(--accent-hover); border-color: var(--accent-hover); }