/* elegance/blog-list.css — blog index / post list in the "elegance" language.
   Centered editorial header, pill category chips, hairline-separated rows. */

.elg-blog-section {
  font-family: var(--elg-font);
  padding: 2.5rem 0 3rem;
}

/* ------------------------------------------------------------- header */

.elg-blog-header {
  text-align: center;
  margin-bottom: 2rem;
}

.elg-blog-title {
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--elg-ink);
  margin: 0 0 0.6rem;
}

.elg-blog-sub {
  color: var(--elg-muted);
  font-size: 1.08rem;
  margin: 0;
}

/* ------------------------------------------------------ category chips */

.elg-cat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}

.elg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  border-radius: var(--elg-radius-pill);
  border: 1px solid var(--elg-line-strong);
  background: var(--elg-bg);
  color: var(--elg-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.elg-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--elg-line-strong);
  transition: background 0.15s ease;
}

.elg-chip:hover,
.elg-chip:focus-visible {
  color: var(--elg-ink);
  border-color: var(--elg-accent);
}

.elg-chip:hover::before,
.elg-chip:focus-visible::before {
  background: var(--elg-accent);
}

.elg-chip.elg-chip-active {
  background: var(--elg-ink);
  border-color: var(--elg-ink);
  color: #fff;
}

.elg-chip.elg-chip-active::before {
  background: var(--elg-accent);
}

/* --------------------------------------------------------- post rows */

.elg-post-list {
  max-width: 50rem;
  margin: 0 auto;
  border-top: 1px solid var(--elg-line);
}

.elg-post-row {
  border-bottom: 1px solid var(--elg-line);
}

.elg-post-row-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.35rem 0.25rem;
  text-decoration: none;
}

.elg-post-row-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--elg-ink);
  margin: 0;
  transition: color 0.15s ease;
}

.elg-post-row-link:hover .elg-post-row-title,
.elg-post-row-link:focus-visible .elg-post-row-title {
  color: var(--elg-accent-ink);
}

.elg-post-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--elg-muted);
  font-size: 0.9rem;
}

.elg-post-row-meta .meta-separator {
  color: var(--elg-line-strong);
}

/* ------------------------------------------------------- empty state */

.elg-blog-empty {
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--elg-muted);
}

.elg-blog-empty a {
  color: var(--elg-accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------- pagination */

.elg-blog-section .blog-pagination {
  margin-top: 2.25rem;
}

.elg-blog-section .pagination {
  gap: 0.35rem;
}

.elg-blog-section .page-link {
  border: 1px solid var(--elg-line-strong);
  border-radius: var(--elg-radius-pill);
  color: var(--elg-muted);
  background: var(--elg-bg);
  min-width: 2.4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.elg-blog-section .page-link:hover {
  color: var(--elg-ink);
  border-color: var(--elg-accent);
  background: var(--elg-bg);
}

.elg-blog-section .page-item.active .page-link {
  background: var(--elg-ink);
  border-color: var(--elg-ink);
  color: #fff;
}

.elg-blog-section .page-item.disabled .page-link {
  color: var(--elg-line-strong);
  background: var(--elg-bg);
  border-color: var(--elg-line);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 575.98px) {
  .elg-post-row-title {
    font-size: 1.15rem;
  }

  .elg-blog-section {
    padding-top: 1.75rem;
  }
}