/* Nur die Blogübersicht: einzeilige Karten und gemeinsame Suche. */
article.blog-index .children.as-list .card {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .5rem .7rem;
  line-height: 1.4;
}
article.blog-index .children.as-list .card[hidden] { display: none; }
article.blog-index .children.as-list .card strong {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
article.blog-index .children.as-list .card .card-tags {
  flex: 0 1 auto;
  max-width: 34%;
  min-width: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}
article.blog-index .card-tags::-webkit-scrollbar { display: none; }
article.blog-index .card-tags .tag { flex: 0 0 auto; margin-bottom: 0; }
article.blog-index .children.as-list .card .desc {
  flex: 0 1 auto;
  max-width: 30%;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
article.blog-index .children.as-list .card .lock { flex: 0 0 auto; }
article.blog-index .blog-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.2rem 0 .5rem; }
article.blog-index .blog-search label { flex-basis: 100%; font-size: .85rem; color: var(--muted); }
article.blog-index .blog-search input { flex: 1 1 12rem; min-width: 0; width: auto; max-width: 35rem; font: inherit; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); color: var(--fg); }
article.blog-index .blog-search button { margin: 0; }
@media (max-width: 640px) {
  article.blog-index .children.as-list .card { gap: .3rem; padding: .45rem .5rem; }
  article.blog-index .card-tags .tag { font-size: .65rem; }
  article.blog-index .children.as-list .card .desc { font-size: .7rem; max-width: 27%; }
}