/* Public blog (/blog): index, post, tag archive and sidebar. Loaded per page via @section Styles so
   it never ships on any other page. Colours come from brand.css's --brand-color. */

/* ---- post list ---- */
.blog-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
    background: #fff;
}
.blog-card-image { display: block; background: #f3f4f6; }
.blog-card-image img { display: block; width: 100%; height: auto; }
.blog-card-body { padding: 18px 22px 20px; }
.blog-card-title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.blog-card-title a { color: #1f2937; text-decoration: none; }
.blog-card-title a:hover { color: var(--brand-color); }
.blog-card-meta { color: #6b7280; font-size: 0.85rem; margin: 0 0 10px; }
.blog-card-summary { margin: 0 0 12px; color: #374151; }
.blog-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-card-more { font-weight: 600; font-size: 0.9rem; margin-right: 6px; }
.blog-tag {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #4b5563;
    text-decoration: none;
}
.blog-tag:hover { border-color: var(--brand-color); color: var(--brand-color); }

/* ---- post body ----
   The editor (TipTap) emits plain h2/h3/p/ul/ol/li/blockquote/table/img. List items hold a single
   <p> (see the authoring notes in saiconference.md), which is what the bullet layout below relies on. */
.blog-featured-image { display: block; width: 100%; height: auto; border-radius: 8px; margin: 0 0 24px; }

.blog-post-body { font-size: 1.05rem; line-height: 1.75; color: #1f2937; overflow-wrap: anywhere; }
.blog-post-body > :first-child { margin-top: 0; }
.blog-post-body h2 { font-size: 1.65rem; font-weight: 700; line-height: 1.3; margin: 2.25rem 0 0.75rem; }
.blog-post-body h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin: 1.75rem 0 0.6rem; }
.blog-post-body h4 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.blog-post-body p { margin: 0 0 1.1rem; }
.blog-post-body a { color: var(--brand-color); text-decoration: underline; }
.blog-post-body a:hover { color: var(--brand-color-dark); }
.blog-post-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.75rem 0; }
.blog-post-body hr { margin: 2rem 0; border-top: 1px solid #e5e7eb; }

/* bullets: a check mark drawn with a CSS mask, no icon font. Numbered lists stay numbered. */
.blog-post-body ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.blog-post-body ul > li { position: relative; padding-left: 1.75rem; margin-bottom: 0.45rem; }
.blog-post-body ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 1rem;
    height: 1rem;
    background-color: var(--brand-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.blog-post-body ol { list-style: decimal; padding-left: 1.6rem; margin: 0 0 1.25rem; }
.blog-post-body ol > li { margin-bottom: 0.45rem; }
.blog-post-body li > p { margin: 0 0 0.35rem; }
.blog-post-body li > ul, .blog-post-body li > ol { margin-top: 0.4rem; }

/* Key Takeaways box: a blockquote right after the intro */
.blog-post-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #f5f7fb;
    border-left: 4px solid var(--brand-color);
    border-radius: 4px;
}
.blog-post-body blockquote > :last-child { margin-bottom: 0; }
.blog-post-body blockquote ul { margin-top: 0.6rem; }

/* tables: Bootstrap's .table/.table-bordered come from the editor; the rest is spacing and mobile scroll */
.blog-post-body table { width: 100%; margin: 1.5rem 0; font-size: 0.95rem; }
.blog-post-body th { background: #f3f4f6; font-weight: 700; text-align: left; }
.blog-post-body th, .blog-post-body td { padding: 0.55rem 0.75rem; vertical-align: top; }
.blog-post-body td > p, .blog-post-body th > p { margin: 0; }
@media (max-width: 767px) {
    .blog-post-body table { display: block; overflow-x: auto; }
}

.blog-post-body pre { background: #f3f4f6; padding: 0.9rem 1rem; border-radius: 6px; overflow-x: auto; margin: 0 0 1.25rem; }
.blog-post-body code { font-size: 0.9em; }

/* ---- sidebar ---- */
.blog-sidebar-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 22px;
    background: #fff;
}
.blog-sidebar-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; }
.blog-sidebar-sub { color: #6b7280; font-size: 0.85rem; margin: 0 0 14px; }

.blog-open-item {
    border-left: 4px solid #2c2c2c;
    padding: 4px 0 4px 12px;
    margin-bottom: 16px;
}
.blog-open-item:last-child { margin-bottom: 0; }
.blog-open-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

@media (min-width: 992px) {
    .blog-sidebar { position: sticky; top: 20px; }
}