/* =========================================================================
   Blog (Pages/Blog/Index.cshtml + Pages/Blog/Post.cshtml) — page-scoped.
   ========================================================================= */

/* ---------- Index: header ---------- */
.blog-header-inner {
    max-width: 760px;
    text-align: center;
    margin: 0 auto;
}
.blog-subhead {
    font-size: 1.125rem;
    color: var(--slate);
    margin: 0;
}

/* ---------- Index: post list ---------- */
.blog-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.blog-card-date {
    color: var(--slate);
    font-size: 0.875rem;
    margin-bottom: 8px;
}
.blog-card-title {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    margin-bottom: 10px;
}
.blog-card-title a { color: var(--ink); }
.blog-card-title a:hover { color: var(--navy); }
.blog-card-excerpt {
    color: var(--slate);
    margin-bottom: 14px;
}
.blog-card-more { font-weight: 600; font-size: 0.95rem; }

.blog-empty {
    text-align: center;
    color: var(--slate);
    margin: 0;
}

/* ---------- Post ---------- */
.blog-post {
    max-width: 760px;
    margin: 0 auto;
}

.blog-back {
    font-size: 0.9rem;
    margin-bottom: 24px;
}
.blog-back-bottom {
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

.blog-post-header {
    margin-bottom: 36px;
}
.blog-post-header h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 16px;
}
.blog-byline {
    color: var(--slate);
    font-size: 0.95rem;
    margin: 0;
}
.blog-byline strong { color: var(--ink); font-weight: 600; }

/* Long-form body — matches the site's body copy (slate, ink headings). */
.blog-prose {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--slate);
}
.blog-prose h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    margin: 2em 0 0.6em;
    /* Heading ids are deep-linkable; clear the sticky 72px header. */
    scroll-margin-top: 88px;
}
.blog-prose h3 {
    margin: 1.6em 0 0.5em;
    scroll-margin-top: 88px;
}
.blog-prose p { margin: 0 0 1.1em; }
.blog-prose strong { color: var(--ink); font-weight: 600; }
.blog-prose ul,
.blog-prose ol {
    padding-left: 22px;
    margin: 0 0 1.2em;
}
.blog-prose li { margin-bottom: 10px; }
.blog-prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blog-prose hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 40px 0;
}

/* Convention: a post ends with `---` then its call-to-action paragraph,
   which renders as a tinted callout. */
.blog-prose hr + p {
    background: var(--tint);
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 20px 24px;
    margin-bottom: 0;
}