/* Blog pages (overview + detail) */
.page-blog .blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.2rem;
}

.page-blog .blog-filter-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(var(--color-white-rgb), 0.22) !important;
  background: rgba(var(--color-white-rgb), 0.03) !important;
  color: rgba(var(--color-white-rgb), 0.9) !important;
  border-radius: 999px;
  padding: 0.34rem 0.86rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.page-blog .blog-filter-btn:hover,
.page-blog .blog-filter-btn:focus-visible,
.page-blog .blog-filter-btn.is-active {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  background: rgba(56, 234, 178, 0.08) !important;
}

.page-blog .blog-filter-empty {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.page-blog .card {
  /* background: rgba(var(--color-white-rgb), 0.05) !important; */
  background: transparent !important;
  border: none !important;
  color: var(--color-text-muted);
}

.page-blog .card .h5,
.page-blog .card .h6,
.page-blog .card h3,
.page-blog .card h5,
.page-blog .card strong,
.page-blog .card a.text-dark,
.page-blog .card .text-dark {
  color: #ffffff !important;
}

.page-blog .card a,
.page-blog .card .text-primary {
  color: var(--color-accent) !important;
}

.page-blog .card .badge {
  font-weight: 600;
}

.page-blog .badge {
  border: 1px solid rgba(var(--color-white-rgb), 0.28) !important;
  background: transparent !important;
  color: rgba(var(--color-white-rgb), 0.92) !important;
}

.page-blog .text-muted {
  color: var(--color-text-subtle) !important;
}

.page-blog pre {
  background: #1f2432 !important;
  color: #e8eef8 !important;
  border: 1px solid rgba(var(--color-white-rgb), 0.14);
  border-radius: 10px !important;
  overflow-x: auto;
}

.page-blog pre code {
  color: #e8eef8 !important;
  background: transparent !important;
}

.page-blog code {
  color: #f597d8;
  background: rgba(var(--color-white-rgb), 0.08);
  border-radius: 4px;
  padding: 0.08rem 0.32rem;
}