.blog-post img {
    width: 100%;
}

/* Post thumbnail in list views (blog index, search results) */
.post-thumbnail-lg {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

/* Post thumbnail in compact views (home page, 404 suggestions) */
.post-thumbnail-sm {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

/* Quick Takeaways callout box — blockquote in blog post Markdown */
.blog-post blockquote {
    background-color: rgba(0, 133, 161, 0.07);
    border-left: 4px solid #0085A1;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 2rem 1.5rem;
    margin: 1.75rem 0 2rem;
}

    .blog-post blockquote p strong {
        color: #0085A1;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .blog-post blockquote p:first-child {
        margin-top: 0;
    }



    .blog-post blockquote > *:last-child {
        margin-bottom: 0;
    }

    .blog-post blockquote ul,
    .blog-post blockquote ol {
        padding-left: 1.25rem;
    }

/* ---------------------------------------------------------------------
   Comments (Artalk) brand theming
   Scoped to #artalk-comments so it never leaks outside the widget.
   This site (Clean Blog theme) is light — white body, dark Lora/Open
   Sans text — so Artalk's own light-mode defaults are left in place;
   only the accent color is overridden to the site's teal brand color
   (--bs-primary: #0085A1, see clean-blog.css) so the "Send" button,
   comment count, and usernames pick up the DreamAtlas palette instead
   of Artalk's default blue.
--------------------------------------------------------------------- */
.comments-title {
    color: #0085A1;
}

#artalk-comments {
    --at-color-main: #0085A1;
}