/* The public blog pages: the directory (templates/blogs.html), a blog's
   front page (blog_home.html) and a post or the About page (blog_post.html).
   Built on public.css — its chrome, buttons, cards, tags, notices and the
   .shared-content reading typography; this file adds the blog's masthead,
   the post list, the article and the aside. Tokens only (var(--…)): a blog
   follows its owner's theme. */

/* ── Masthead: the blog's own band under the site bar (front page) ── */
.blog-masthead { background: var(--sb-bg); color: var(--sb-text); }
.blog-masthead-inner { max-width: 1080px; margin: 0 auto; padding: 2.9rem 1.25rem 0; }
.blog-masthead-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 2.85rem); font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.1; color: var(--sb-text-strong); margin: 0 0 0.6rem;
    text-wrap: balance;
}
.pub-body .blog-masthead-title a { color: inherit; text-decoration: none; }
.blog-masthead-tagline { font-size: 1.1rem; line-height: 1.5; color: var(--sb-text-dim); max-width: 62ch; margin: 0; }
.blog-masthead-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0;
    margin-top: 1.25rem; font-size: 0.88rem; color: var(--sb-text-soft);
}
.blog-masthead-author { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--sb-text-strong); font-weight: 600; }
.blog-avatar-dark { background: var(--sb-bg-active); color: var(--sb-text-strong); }
.blog-masthead-meta .pub-meta-sep::before { color: var(--sb-text-faint); }

.blog-nav { display: flex; align-items: center; gap: 0.15rem; margin-top: 1.9rem; overflow-x: auto; scrollbar-width: none; }
.blog-nav::-webkit-scrollbar { display: none; }
.pub-body .blog-nav a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.75rem 0.9rem; white-space: nowrap;
    color: var(--sb-text-dim); font-size: 0.9rem; font-weight: 600; text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s, box-shadow 0.15s;
}
.pub-body .blog-nav a:hover { color: var(--sb-text-strong); }
.pub-body .blog-nav a.active { color: var(--sb-text-strong); box-shadow: inset 0 -2px 0 var(--sb-accent); }
.pub-body .blog-nav a.blog-nav-feed { margin-left: auto; }
.blog-nav svg { flex-shrink: 0; }
.blog-draft-chip {
    padding: 0.05rem 0.4rem; border-radius: var(--radius-pill);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--sb-bg-active); color: var(--sb-text-soft);
}

/* ── Blog bar: the masthead's slim form above an article ── */
.blog-bar { background: var(--surface-1); border-bottom: 1px solid var(--border-2); }
.blog-bar-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 1.25rem;
    min-height: 54px; display: flex; align-items: center; gap: 1rem;
}
.pub-body .blog-bar-title {
    font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-strong); text-decoration: none;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-body .blog-bar-title:hover { color: var(--accent-hover); }
.blog-bar-nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; flex-shrink: 0; }
.pub-body .blog-bar-nav a {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.65rem; border-radius: var(--radius-md);
    color: var(--text-3); font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.pub-body .blog-bar-nav a:hover { background: var(--surface-3); color: var(--text-strong); }
.pub-body .blog-bar-nav a.active { color: var(--text-strong); background: var(--surface-3); }

/* ── Owner notices ── */
/* width: the body is a flex column, where auto margins alone would shrink
   the box to its text. */
.blog-notices { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.4rem 1.25rem 0; }
.blog-notices-reading { max-width: 760px; }
.blog-notices .pub-notice { margin-bottom: 0.7rem; }
.blog-notices .pub-notice:last-child { margin-bottom: 0; }
.blog-notice-text { flex: 1; min-width: 12rem; }
.blog-notice-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pub-notice svg { flex-shrink: 0; }
.blog-owner-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    font-size: 0.86rem; color: var(--text-3);
}
.blog-owner-bar .blog-notice-text { min-width: 0; }
.blog-owner-bar a { font-weight: 600; text-decoration: none; }
.pub-body .blog-owner-bar a:hover { text-decoration: underline; }

/* ── Front page: the post list beside the aside ── */
.blog-wrap { padding-top: 2.4rem; }
.blog-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.6rem; align-items: start;
}
.blog-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
    margin-bottom: 1.2rem; font-size: 0.92rem; color: var(--text-3);
}
.blog-filter .pub-tag { font-size: 0.84rem; }
.pub-body .blog-filter-clear {
    display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto;
    font-size: 0.86rem; font-weight: 600; text-decoration: none;
}
.blog-posts { display: flex; flex-direction: column; gap: 1.1rem; }

.blog-card {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;
    padding: 1.45rem 1.55rem;
}
.blog-card.has-cover { grid-template-columns: minmax(0, 1fr) 228px; }
.blog-card-cover {
    margin: 0; aspect-ratio: 16 / 9; overflow: hidden; align-self: start;
    border-radius: var(--radius-lg); background: var(--surface-3);
}
.blog-card-cover img, .blog-article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0;
    margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--text-3);
}
.blog-pinned {
    display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.7rem;
    color: var(--accent-deep); font-weight: 600;
}
.pub-card-title.blog-card-title { font-size: 1.34rem; line-height: 1.28; letter-spacing: -0.01em; margin-bottom: 0.45rem; text-wrap: balance; }
.blog-card-excerpt {
    margin: 0; color: var(--text-2); font-size: 0.97rem; line-height: 1.62;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.blog-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1rem;
    margin-top: 0.95rem; font-size: 0.82rem; color: var(--text-3);
}
/* Links inside a card sit above the title link stretched over it. */
.blog-card-foot a { position: relative; z-index: 1; }
.blog-comment-count { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.blog-card-featured { padding: 0; overflow: hidden; gap: 0; }
.blog-card-featured.has-cover { grid-template-columns: minmax(0, 1fr); }
.blog-card-featured .blog-card-cover { order: -1; border-radius: 0; }
.blog-card-featured .blog-card-body { padding: 1.5rem 1.75rem 1.6rem; }
.blog-card-featured:not(.has-cover) .blog-card-body { padding: 1.7rem 1.75rem; }
.pub-card-title.blog-card-featured-title { font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.2; }
.blog-card-featured .blog-card-excerpt { font-size: 1.02rem; -webkit-line-clamp: 4; line-clamp: 4; }

/* ── The aside ── */
.blog-aside { display: flex; flex-direction: column; gap: 1rem; }
.blog-aside-card {
    background: var(--surface-1); border: 1px solid var(--border-3);
    border-radius: var(--radius-xl); padding: 1.15rem 1.25rem 1.25rem;
}
.blog-aside-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-3); margin: 0 0 0.7rem;
}
.shared-content.blog-aside-desc { font-family: var(--font-ui); font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
.shared-content.blog-aside-desc p:last-child { margin-bottom: 0; }
.blog-aside-more { display: inline-block; margin-top: 0.7rem; font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.blog-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pub-body .blog-topic { display: inline-flex; align-items: center; gap: 0.35rem; }
.blog-topic-count { font-size: 0.7rem; font-weight: 600; opacity: 0.75; font-variant-numeric: tabular-nums; }
.pub-body .blog-topic.active { background: var(--accent); color: var(--text-inverse); }
.blog-aside-text { margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.55; color: var(--text-3); }

/* "Start your own blog" — the one place MathBB itself speaks on a blog. */
.blog-cta {
    display: flex; gap: 0.9rem; align-items: flex-start;
    background: var(--accent-bg); border: 1px solid var(--accent-faint); color: var(--text-2);
    border-radius: var(--radius-xl); padding: 1.15rem 1.25rem;
}
.blog-cta-mark { color: var(--accent-deep); --logo-accent: var(--accent); flex-shrink: 0; display: inline-flex; }
.blog-cta-title { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1rem; font-weight: 650; color: var(--text-strong); }
.blog-cta-text { margin: 0 0 0.75rem; font-size: 0.86rem; line-height: 1.5; }
.blog-cta-wide { margin-top: 2.6rem; padding: 1.5rem 1.6rem; align-items: center; }
.blog-cta-wide .blog-cta-body { flex: 1; }
.blog-cta-wide .blog-cta-text { margin: 0; }

/* ── The article ── */
body.pub-body.blog-body-reading { background: var(--surface-1); }
.blog-article { max-width: 760px; margin: 0 auto; padding: 3.1rem 1.25rem 0; }
.blog-article-tags { margin-bottom: 1.1rem; }
.blog-article-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 2.8rem); font-weight: 700; letter-spacing: -0.022em;
    line-height: 1.13; color: var(--text-strong); margin: 0; text-wrap: balance;
}
.blog-byline { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.4rem; }
.blog-byline .pub-avatar { width: 40px; height: 40px; font-size: 0.95rem; }
.blog-byline-name { font-weight: 600; color: var(--text-1); font-size: 0.95rem; }
.blog-byline-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.86rem; color: var(--text-3); }
.blog-byline-updated { white-space: nowrap; }
.blog-article-cover {
    margin: 2.2rem 0 0; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--surface-3);
}
.shared-content.blog-article-body { margin-top: 2.3rem; font-size: 1.13rem; line-height: 1.75; }
/* The post, rendered by RenderUtils.renderContentToElement(…, {sanitize: true})
   — anyone's markup. The sanitizer drops position: fixed and sticky from
   style attributes; this is the second wall, against everything it can't
   see (a page class, a drawing's <style>, a negative margin): paint
   containment clips the content to its box and makes the box the
   containing block of anything positioned inside it, so a post can't cover
   the header, the byline or the comments. The clip margin leaves room for
   focus rings and shadows at the edge. A last child's margin no longer
   collapses through the box, so it is dropped. */
.mb-sanitized { contain: paint; overflow-clip-margin: 0.5rem; }
.mb-sanitized > :last-child { margin-bottom: 0; }
/* What a post shows when it can't be rendered safely (no DOMPurify, or
   markup nested too deep to parse): its source, as text. */
.mb-sanitized-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-noscript { margin-top: 2rem; color: var(--text-3); font-size: 0.92rem; }
.blog-empty-post { margin: 0; color: var(--text-3); font-style: italic; }

.blog-article-end { max-width: 760px; margin: 0 auto; padding: 2.6rem 1.25rem 0; }
.blog-article-end-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding-top: 1.4rem; border-top: 1px solid var(--border-2);
    font-size: 0.85rem; color: var(--text-3);
}
.blog-author-card {
    display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.6rem;
    padding: 1.3rem 1.4rem; border-radius: var(--radius-xl);
    background: var(--surface-2); border: 1px solid var(--border-2);
}
.blog-author-card .pub-avatar { width: 46px; height: 46px; font-size: 1.05rem; }
.blog-author-body { flex: 1; min-width: 0; }
.blog-author-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.blog-author-name { margin: 0.1rem 0 0.2rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 650; color: var(--text-strong); }
.blog-author-blog { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.blog-author-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

.blog-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.pub-body .blog-postnav-link {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1rem 1.15rem; text-decoration: none; color: var(--text-strong);
}
.blog-postnav-newer { grid-column: 2; text-align: right; }
.blog-postnav-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.blog-postnav-newer .blog-postnav-label { justify-content: flex-end; }
.blog-postnav-title { font-family: var(--font-display); font-weight: 650; font-size: 1rem; line-height: 1.35; }

.blog-comments { width: 100%; max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 0; }
.blog-comments > div { padding-top: 2rem; border-top: 1px solid var(--border-2); }
.blog-reading-foot { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 4.5rem; }
.blog-reading-foot .blog-cta-wide { margin-top: 0; }

/* ── Empty states and the pager ── */
.blog-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.1rem; }
.blog-pager-status { color: var(--text-3); font-size: 0.86rem; }
.blog-pager-spacer { width: 1px; }

@media (max-width: 900px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .blog-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
    .blog-masthead-inner { padding: 2.1rem 1rem 0; }
    .blog-masthead-tagline { font-size: 1rem; }
    .blog-nav { margin-top: 1.4rem; }
    .pub-body .blog-nav a { padding: 0.7rem 0.7rem; }
    .blog-bar-inner, .blog-notices, .blog-article, .blog-article-end, .blog-comments, .blog-reading-foot { padding-left: 1rem; padding-right: 1rem; }
    .blog-wrap { padding-top: 1.6rem; }
    .blog-card, .blog-card.has-cover { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1.15rem; }
    .blog-card.has-cover .blog-card-cover { order: -1; }
    .blog-card-featured, .blog-card-featured.has-cover { padding: 0; gap: 0; }
    .blog-card-featured .blog-card-body, .blog-card-featured:not(.has-cover) .blog-card-body { padding: 1.2rem 1.15rem 1.3rem; }
    .pub-card-title.blog-card-title { font-size: 1.2rem; }
    .blog-article { padding-top: 2.1rem; }
    .blog-article-cover { margin-top: 1.6rem; border-radius: var(--radius-lg); }
    .shared-content.blog-article-body { font-size: 1.06rem; margin-top: 1.8rem; }
    .blog-postnav { grid-template-columns: minmax(0, 1fr); }
    .blog-postnav-newer { grid-column: 1; text-align: left; }
    .blog-postnav-newer .blog-postnav-label { justify-content: flex-start; }
    /* "Updated …" takes a line of its own rather than wrapping mid-list. */
    .blog-byline-updated { flex-basis: 100%; }
    .blog-byline-updated .pub-meta-sep { display: none; }
    .blog-author-card { padding: 1.1rem; }
    .blog-cta-wide { flex-direction: column; align-items: flex-start; }
    .pub-body .blog-bar-nav a span { display: none; }
}
@media (min-width: 980px) {
    /* The cover breaks out of the reading column a little on a wide screen. */
    .blog-article-cover { margin-left: -2.5rem; margin-right: -2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-body .blog-nav a { transition: none; }
}