/* Blog styles */

.blog-header {
  margin-block-end: var(--block-space);
}

.blog-header h1 {
  margin: 0;
}

.blog-header__filter {
  margin-block-start: var(--block-space-half);
  color: var(--color-ink-dark);
  font-size: var(--text-small);
}

.blog-header__clear {
  margin-inline-start: var(--block-space-half);
}

/* Category Navigation */
.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half);
  margin-block-end: var(--block-space-double);
  padding-block-end: var(--block-space);
  border-block-end: 1px solid var(--color-ink-lighter);
}

.blog-categories__item {
  padding: 0.25rem 0.75rem;
  background: var(--color-ink-lightest);
  border-radius: 1rem;
  font-size: var(--text-small);
  text-decoration: none;
  color: var(--color-ink-dark);
  transition: background 0.15s;
}

.blog-categories__item:hover {
  background: var(--color-ink-lighter);
}

.blog-categories__item--active {
  background: var(--color-ink);
  color: var(--color-canvas);
}

/* Blog List */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-double);
}

/* Blog Card */
.blog-card {
  padding-block-end: var(--block-space-double);
  border-block-end: 1px solid var(--color-ink-lighter);
}

.blog-card:last-child {
  border-block-end: none;
}

.blog-card__header {
  display: flex;
  gap: var(--block-space);
  align-items: center;
  margin-block-end: var(--block-space-half);
  font-size: var(--text-small);
  color: var(--color-ink-dark);
}

.blog-card__category {
  background: var(--color-ink-lightest);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

.blog-card__title {
  margin: 0 0 var(--block-space-half) 0;
  font-size: var(--text-large);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-brand);
}

.blog-card__excerpt {
  margin: 0 0 var(--block-space) 0;
  color: var(--color-ink-dark);
}

.blog-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-small);
}

.blog-card__author {
  color: var(--color-ink-dark);
}

.blog-card__link {
  font-weight: 500;
}

.blog-empty {
  text-align: center;
  color: var(--color-ink-dark);
  padding: var(--block-space-double);
}

.blog-footer {
  margin-block-start: var(--block-space-double);
  padding-block-start: var(--block-space);
  border-block-start: 1px solid var(--color-ink-lighter);
}

.blog-footer__rss {
  display: inline-flex;
  align-items: center;
  gap: var(--block-space-half);
  font-size: var(--text-small);
  color: var(--color-ink-dark);
}

/* Blog Post (Single) */
.blog-post__header {
  margin-block-end: var(--block-space-double);
  padding-block-end: var(--block-space);
  border-block-end: 1px solid var(--color-ink-lighter);
}

.blog-post__category {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: var(--color-ink-lightest);
  border-radius: 0.25rem;
  font-size: var(--text-small);
  text-decoration: none;
  color: var(--color-ink-dark);
  margin-block-end: var(--block-space-half);
}

.blog-post__title {
  margin: 0 0 var(--block-space-half) 0;
}

.blog-post__meta {
  display: flex;
  gap: var(--block-space);
  color: var(--color-ink-dark);
  font-size: var(--text-small);
}

.blog-post__body {
  line-height: 1.7;
}

.blog-post__body h2 {
  margin-block-start: var(--block-space-double);
}

.blog-post__body p {
  margin-block-end: var(--block-space);
}

.blog-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.blog-post__footer {
  margin-block-start: var(--block-space-double);
  padding-block-start: var(--block-space);
  border-block-start: 1px solid var(--color-ink-lighter);
}