/* Styles for components/blog/BlogPager.astro. Kept as a plain static file
   (not an Astro scoped <style> block) because scoped styles hit the
   documented Vite/Astro dev-mode hash-mismatch bug here on first use
   (2026-09-16): the inlined <style> block and the component's own DOM
   elements got stamped with two different data-astro-cid-* hashes, so the
   attribute-selector CSS silently never matched. See "Scoped-CSS hash
   mismatch" in astro-site/CLAUDE.md - a static file linked via
   <link rel="stylesheet"> is the fix that has held for this bug class. */

.blog-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 2.5rem 0 1rem;
}

.blog-pager__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-pager__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-pager__pill,
.blog-pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid #e2e0e8;
  background: #fff;
  color: #3a3550;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-pager__pill {
  font-size: 0.95rem;
  font-weight: 600;
}

.blog-pager__pill:hover {
  background: #f4f1fa;
  border-color: #c9bce6;
}

.blog-pager__pill.is-active {
  background: #693bb8;
  border-color: #693bb8;
  color: #fff;
  cursor: default;
}

.blog-pager__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 2.25rem;
  color: #9691a3;
}

.blog-pager__nav:hover {
  background: #f4f1fa;
  border-color: #c9bce6;
}

.blog-pager__chevron {
  width: 0.9rem;
  height: 0.9rem;
}

.blog-pager__chevron--prev { transform: rotate(90deg); }
.blog-pager__chevron--next { transform: rotate(-90deg); }

.blog-pager__status {
  margin: 0;
  font-size: 0.85rem;
  color: #6b6579;
}

@media (max-width: 480px) {
  .blog-pager__pill,
  .blog-pager__nav {
    height: 2rem;
    min-width: 2rem;
    font-size: 0.85rem;
  }
}