/* The blog directory, /blogs (templates/blogs.html; docs/blogs.md § The
   directory): the search in the header band, the toolbar with the sort control, the
   blog cards, and the aside with the latest posts and the reader's own blog.
   Built on public.css (chrome, cards, tags, buttons, the pager) and
   blog-public.css (.blog-aside-card, .blog-cta, the empty-state actions).
   Tokens only (var(--…)). */

/* ── Search, in the header band ──
   Beside the title and caption where there is room (public.css's
   .pub-hero-index), under them on a phone. The caption is short, so the
   text asks for less room than the band's default and the search stays
   beside it down to a tablet's width. */
.bd-hero .pub-hero-text { flex-basis: 220px; }
.bd-search {
    display: flex; gap: 0.5rem; align-items: stretch;
    flex: 1 1 340px; max-width: 440px;
}
.bd-search-field { position: relative; flex: 1; min-width: 0; display: flex; }
.bd-search-icon {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; color: var(--text-3); pointer-events: none;
}
.bd-search-input {
    width: 100%; min-width: 0; height: 2.75rem;
    padding: 0 0.9rem 0 2.65rem;
    border: 1px solid var(--sb-border-strong); border-radius: var(--radius-lg);
    background: var(--surface-1); color: var(--text-1);
    font: inherit; font-size: 0.98rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bd-search-input::placeholder { color: var(--text-4); }
.bd-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--sb-accent);
}
.bd-search-btn { height: 2.75rem; padding: 0 1.3rem; font-size: 0.94rem; border-radius: var(--radius-lg); }
/* The button's magnifier shows only on a phone, where the button is just that. */
.bd-search-btn svg { display: none; }
.bd-search-btn:focus-visible { outline-color: var(--sb-accent); }

/* ── Page layout: results beside the aside ── */
.bd-wrap { padding-top: 2rem; }
.bd-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.4rem; align-items: start;
}
.bd-main { min-width: 0; }

/* ── Toolbar: the count and the sort control ── */
.bd-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.25rem; margin-bottom: 1.1rem; min-height: 2.25rem;
}
.bd-count {
    margin: 0; min-width: 0; overflow-wrap: anywhere;
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 650;
    color: var(--text-strong); font-variant-numeric: tabular-nums;
}
.bd-count-q { color: var(--accent-deep); }
.bd-sort { display: flex; align-items: center; gap: 0.6rem; }
.bd-sort-label { font-size: 0.82rem; font-weight: 600; color: var(--text-3); }
/* A segmented control: links, so each order is an address of its own. */
.bd-seg {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--surface-3); border: 1px solid var(--border-3);
    border-radius: var(--radius-lg);
}
.pub-body .bd-seg-item {
    padding: 0.32rem 0.8rem; border-radius: var(--radius-md);
    font-size: 0.84rem; font-weight: 600; line-height: 1.3; white-space: nowrap; text-align: center;
    color: var(--text-3); text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.pub-body .bd-seg-item:hover { color: var(--text-strong); }
.pub-body .bd-seg-item.is-active {
    background: var(--surface-1); color: var(--text-strong);
    box-shadow: 0 1px 2px var(--shadow-1), 0 0 0 1px var(--border-3);
}
.bd-seg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bd-query-note { margin: -0.4rem 0 1.1rem; font-size: 0.88rem; }
.pub-body .bd-clear {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-weight: 600; text-decoration: none;
}
.pub-body .bd-clear:hover { text-decoration: underline; }

/* ── Blog cards ── */
/* Each card is its own height (align-items: start): stretched to the
   tallest in its row, a blog with no tagline, description or topics would
   be a tall box with nothing in it above its Latest line. */
.bd-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.1rem; align-items: start;
}
.bd-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 1.3rem 1.4rem 1.2rem; }
.pub-card-title.bd-card-title {
    margin: 0; font-size: 1.2rem; line-height: 1.28; letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.bd-card-tagline {
    margin: -0.2rem 0 0; font-size: 0.93rem; line-height: 1.5; color: var(--text-2);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bd-card-byline {
    display: flex; align-items: center; min-width: 0;
    font-size: 0.84rem; color: var(--text-3);
}
.bd-card-byline .pub-avatar { width: 24px; height: 24px; font-size: 0.68rem; margin-right: 0.5rem; }
.bd-card-author {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--text-1);
}
.bd-card-count { white-space: nowrap; }
.bd-card-desc {
    margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-3);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* Links inside a card sit above the title link stretched over it. */
.bd-card-tags, .bd-card-latest-title { position: relative; z-index: 1; }
.bd-card-tags { gap: 0.3rem; }
.bd-card-latest {
    padding-top: 0.8rem; border-top: 1px solid var(--border-2);
    display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.bd-card-latest-label {
    display: flex; align-items: center;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-3);
}
.bd-card-latest-label time { letter-spacing: 0.02em; font-weight: 600; text-transform: none; font-size: 0.78rem; }
.pub-body .bd-card-latest-title {
    font-size: 0.92rem; font-weight: 600; line-height: 1.4; color: var(--text-1); text-decoration: none;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pub-body .bd-card-latest-title:hover { color: var(--accent-hover); text-decoration: underline; }

/* The pager: Previous and Next at the ends, the page count centred. */
.bd-main .pub-pager { display: grid; grid-template-columns: 1fr auto 1fr; }
.bd-main .pub-pager > :first-child { justify-self: start; }
.bd-main .pub-pager > :last-child { justify-self: end; }

/* ── The aside: latest posts, the reader's blog or a way to start one ── */
.bd-aside { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bd-stream-list { list-style: none; margin: 0; padding: 0; }
.bd-stream-item { padding: 0.85rem 0; border-top: 1px solid var(--border-2); min-width: 0; }
.bd-stream-item:first-child { padding-top: 0.1rem; border-top: none; }
.bd-stream-item:last-child { padding-bottom: 0; }
.pub-body .bd-stream-title {
    display: block; font-family: var(--font-display);
    font-size: 0.96rem; font-weight: 650; line-height: 1.35; color: var(--text-strong);
    text-decoration: none; overflow-wrap: anywhere;
}
.pub-body .bd-stream-title:hover { color: var(--accent-hover); text-decoration: underline; }
.bd-stream-meta {
    display: flex; align-items: center; margin-top: 0.2rem;
    font-size: 0.78rem; color: var(--text-3); min-width: 0;
}
/* One line: a long blog title gives way, the date never wraps under it. */
.pub-body .bd-stream-meta a {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-2); font-weight: 600; text-decoration: none;
}
.bd-stream-meta .pub-meta-sep, .bd-stream-meta time { flex: none; white-space: nowrap; }
.pub-body .bd-stream-meta a:hover { color: var(--accent-hover); text-decoration: underline; }
.bd-stream-excerpt {
    margin: 0.3rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-3);
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.bd-cta { padding: 1.1rem 1.15rem; }
.bd-cta .blog-cta-text { margin-bottom: 0.85rem; }
.bd-own-name {
    margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 650;
    line-height: 1.3; overflow-wrap: anywhere;
}
.pub-body .bd-own-name a { color: var(--text-strong); text-decoration: none; }
.pub-body .bd-own-name a:hover { color: var(--accent-hover); text-decoration: underline; }
.bd-own-state { margin: 0 0 0.9rem; font-size: 0.86rem; line-height: 1.55; color: var(--text-3); }
.bd-own-state .pub-badge { margin-right: 0.3rem; vertical-align: 0.06em; }
.bd-own .pub-btn svg { flex-shrink: 0; }

/* ── Empty states ── */
.bd-empty { display: flex; flex-direction: column; align-items: center; }
.bd-empty-mark { display: inline-flex; color: var(--accent-deep); --logo-accent: var(--accent); margin-bottom: 0.8rem; }
.bd-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; margin-bottom: 0.8rem;
    background: var(--accent-bg); color: var(--accent-deep);
}
.bd-empty-title {
    margin: 0 0 0.3rem; max-width: 100%; overflow-wrap: anywhere;
    font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: var(--text-2);
}
.bd-empty-text { max-width: 54ch; margin: 0 auto; font-size: 0.93rem; line-height: 1.55; }
.bd-wrap > .bd-own { max-width: 420px; margin: 1.4rem auto 0; }

/* ── Smaller screens ── */
@media (max-width: 980px) {
    /* The aside goes under the results; its posts in two columns. */
    .bd-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .bd-stream-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.8rem; }
    .bd-stream-item:nth-child(2) { border-top: none; padding-top: 0.1rem; }
}
@media (max-width: 640px) {
    .bd-wrap { padding-top: 1.5rem; }
    .bd-search { max-width: none; }
    .bd-card { padding: 1.15rem 1.15rem 1.05rem; }
    /* One column of posts, a rule between each. */
    .bd-stream-list { display: block; }
    .bd-stream-item:nth-child(2) { border-top: 1px solid var(--border-2); padding-top: 0.85rem; }
}
@media (max-width: 520px) {
    .bd-sort { width: 100%; }
    .bd-sort-label { display: none; }
    .bd-seg { flex: 1; }
    .pub-body .bd-seg-item { flex: 1; padding-left: 0.4rem; padding-right: 0.4rem; }
    /* A phone: the magnifier moves from the field to the button, which
       leaves the field room for its whole placeholder. */
    .bd-search { gap: 0.4rem; }
    .bd-search-icon { display: none; }
    .bd-search-input { padding: 0 0.75rem; }
    .bd-search-btn { width: 2.75rem; padding: 0; flex-shrink: 0; }
    .bd-search-btn svg { display: block; }
    .bd-search-btn-text {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}
@media (max-width: 360px) {
    .bd-search-input { padding: 0 0.6rem; font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bd-search-input, .pub-body .bd-seg-item { transition: none; }
}