/* ==========================================================
   BLOG.CSS - Article styles and blog components
   ========================================================== */

/* ---------------------------------------------------------
   Featured image
   --------------------------------------------------------- */
.article-featured-image img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   Article body
   --------------------------------------------------------- */
.article-body {
    line-height: 1.8;
    font-size: 1.1rem;

    /* Prevent inappropriate line breaks and orphan punctuation */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;

    /* Normalize spaces */
    white-space: normal;
}

/* Paragraph spacing (including empty ones) */
.article-body p {
    margin-bottom: 1.5rem;
    min-height: 1.2em;
}

/* Empty paragraphs take space */
.article-body p:empty {
    min-height: 2rem;
    display: block;
}

/* Headings spacing */
.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* List spacing */
.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------
   Article body images (drag & drop)
   --------------------------------------------------------- */
/* Base styles for all images */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Default image (centered) */
.article-body img:not(.img-left):not(.img-right) {
    display: block;
    margin: 1.5rem auto;
}

/* ---------------------------------------------------------
   Image layout classes
   --------------------------------------------------------- */
/* Image left with text right */
.article-body img.img-left {
    float: left;
    margin: 0 2rem 1rem 0;
    max-width: 40%;
}

/* Image right with text left */
.article-body img.img-right {
    float: right;
    margin: 0 0 1rem 2rem;
    max-width: 40%;
}

/* Clearfix to prevent following content from flowing under floating images */
.article-body::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------------------------------------------------------
   Author avatar
   --------------------------------------------------------- */
.author-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

/* ---------------------------------------------------------
   Blog card images (list view)
   --------------------------------------------------------- */
.blog-card-img {
    height: 280px;
    object-fit: cover;
}

/* Placeholder for articles without image */
.blog-card-placeholder {
    height: 280px;
}

/* ---------------------------------------------------------
   Related articles images
   --------------------------------------------------------- */
.related-article-img {
    height: 150px;
    object-fit: cover;
}