/* Blog list and post pages. Builds on products.css. Values from tokens.css only. */
.srv-motion [data-reveal] { opacity: 0; }

.srv-blog__header { max-width: calc(var(--content-width) * 0.62); margin-top: var(--space-4); color: var(--ink-soft); font: 300 var(--text-body-lg) var(--font-sans); }
.srv-blog__search { display: flex; gap: var(--space-3); max-width: calc(var(--content-width) * 0.5); margin-top: var(--space-8); }
.srv-blog__search-input { flex: 1; margin-top: 0; }
.srv-blog__search .srv-btn { flex-shrink: 0; }
.srv-blog__search .srv-btn svg { width: var(--space-4); height: var(--space-4); }

.srv-blog__count { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-blog__list { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.srv-blog__card .srv-card__inner { position: relative; padding-right: calc(var(--space-6) * 2 + var(--btn-arrow-size)); }
.srv-blog__meta { color: var(--accent); font: 400 var(--text-code-sm) var(--font-mono); }
.srv-blog__title { margin-top: var(--space-2); }
.srv-blog__version {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font: 600 var(--text-overline) var(--font-sans);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  vertical-align: 1px;
}
.srv-blog__meta > :first-child { margin-left: 0; }
.srv-blog__author { display: block; margin-top: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.srv-blog__write { margin-top: var(--space-6); }
.srv-blog__write-note { margin-top: var(--space-6); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-blog__write-note a { color: var(--accent); }
.srv-blog__headline { max-width: calc(var(--content-width) * 0.7); }
.srv-blog__empty { margin-top: var(--space-6); color: var(--ink-soft); }

.srv-blog__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); }
.srv-blog__pager .srv-btn svg { width: var(--space-4); height: var(--space-4); }
.srv-blog__page { color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }

/* Post */
.srv-post__inner { max-width: calc(var(--content-width) * 0.62 + var(--gutter) * 2); }
.srv-post__meta { margin-top: var(--space-8); }
.srv-post__title { margin-top: var(--space-3); }
.srv-post__headline { margin-top: var(--space-4); color: var(--ink); font: 500 var(--text-h4) var(--font-display); }
.srv-post__body { margin-top: var(--space-6); color: var(--ink-soft); font: 300 var(--text-body-lg) var(--font-sans); overflow-wrap: anywhere; }
.srv-post__body p + p { margin-top: var(--space-4); }
.srv-post__body strong { color: var(--ink); font-weight: 600; }
.srv-post__actions { margin-top: var(--space-8); }

@media (max-width: 767px) {
  .srv-blog__search { max-width: none; }
  .srv-blog__card .srv-card__inner { padding-right: var(--space-6); }
  .srv-blog__card .srv-product-card__arrow { display: none; }
}
