/* =========================================================
   mulhim-blog.css — Blog index & article (scoped)
   TOC, key takeaways, figures, FAQ, author/reviewer boxes (E-E-A-T), RTL paddings
   ========================================================= */
@layer mulhim {
    .mulhim.mulhim-blog .blog-article {
        max-width: 860px;
        margin: 0 auto
    }

    .mulhim.mulhim-blog .blog-cover {
        width: 100%;
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1);
        display: block
    }

    .mulhim.mulhim-blog .blog-title {
        margin: 14px 0 6px;
        font-weight: 900;
        font-size: clamp(26px, 4vw, 34px)
    }

    .mulhim.mulhim-blog .blog-subtitle {
        margin: 0 0 12px;
        color: var(--slate-600);
        font-size: 18px
    }

    .mulhim.mulhim-blog .blog-meta {
        color: var(--slate-500);
        font-size: 14px;
        margin: 4px 0 18px
    }

    /* TOC */
    .mulhim.mulhim-blog .toc {
        border-left: 4px solid var(--teal);
        padding: 10px 0 10px 14px;
        margin: 16px 0;
        background: var(--slate-50);
        border-radius: var(--r-sm)
    }

    .mulhim[dir="rtl"].mulhim-blog .toc {
        border-left: none;
        border-right: 4px solid var(--teal);
        padding: 10px 14px 10px 0
    }

    /* Key takeaways */
    .mulhim.mulhim-blog .key-takeaways {
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: var(--r-lg);
        padding: 16px;
        margin: 16px 0
    }

    /* Body content */
    .mulhim.mulhim-blog .blog-content {
        font-size: 17px;
        color: var(--slate-800)
    }

    .mulhim.mulhim-blog .blog-content h2 {
        margin: 20px 0 8px;
        font-size: clamp(20px, 3vw, 24px);
        font-weight: 800
    }

    .mulhim.mulhim-blog .blog-content h3 {
        margin: 16px 0 8px;
        font-size: clamp(18px, 2.5vw, 20px);
        font-weight: 800
    }

    .mulhim.mulhim-blog .blog-content ul,
    .mulhim.mulhim-blog .blog-content ol {
        padding-inline-start: 20px
    }

    .mulhim[dir="rtl"].mulhim-blog .blog-content ul,
    .mulhim[dir="rtl"].mulhim-blog .blog-content ol {
        padding-inline-start: 0;
        padding-inline-end: 20px
    }

    /* Pull quote */
    .mulhim.mulhim-blog .blog-quote {
        margin: 16px 0;
        padding: 12px 16px;
        border-left: 4px solid var(--blue-500);
        background: var(--slate-100);
        border-radius: var(--r-sm);
        font-style: italic;
        color: var(--slate-700)
    }

    .mulhim[dir="rtl"].mulhim-blog .blog-quote {
        border-left: none;
        border-right: 4px solid var(--blue-500)
    }

    /* Figures & captions */
    .mulhim.mulhim-blog figure {
        margin: 16px 0
    }

    .mulhim.mulhim-blog figure img {
        width: 100%;
        height: auto;
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-1)
    }

    .mulhim.mulhim-blog figcaption {
        font-size: 14px;
        color: var(--slate-700);
        text-align: center;
        margin-top: 6px
    }

    /* FAQ */
    .mulhim.mulhim-blog .faq {
        margin: 20px 0
    }

    .mulhim.mulhim-blog .faq dt {
        font-weight: 800;
        margin: 10px 0 6px
    }

    .mulhim.mulhim-blog .faq dd {
        margin: 0 0 10px 0
    }

    /* Author / reviewer (E-E-A-T) */
    .mulhim.mulhim-blog .author-box,
    .mulhim.mulhim-blog .reviewer-box {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        background: #fff;
        border: 1px solid var(--slate-200);
        border-radius: var(--r-lg);
        padding: 14px;
        margin: 18px 0
    }

    .mulhim.mulhim-blog .author-box img,
    .mulhim.mulhim-blog .reviewer-box img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: var(--shadow-1)
    }

    .mulhim.mulhim-blog .author-box .meta,
    .mulhim.mulhim-blog .reviewer-box .meta {
        font-size: 14.5px;
        color: var(--slate-700)
    }

    .mulhim.mulhim-blog .author-box .name,
    .mulhim.mulhim-blog .reviewer-box .name {
        font-weight: 800;
        color: var(--slate-900)
    }

    /* Inline CTA inside article */
    .mulhim.mulhim-blog .blog-cta {
        margin: 16px 0 0
    }

    .mulhim.mulhim-blog .blog-cta .btn {
        min-width: 200px
    }

    /* Code/Pre */
    .mulhim.mulhim-blog pre,
    .mulhim.mulhim-blog code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        background: #0f172a0d;
        color: #0f172a;
        border-radius: 8px
    }

    .mulhim.mulhim-blog pre {
        padding: 12px;
        overflow: auto
    }

    .mulhim.mulhim-blog code {
        padding: 2px 6px
    }

    /* Prevent CLS on sized images */
    .mulhim.mulhim-blog img[width][height] {
        height: auto
    }

    @media (max-width:768px) {
        .mulhim.mulhim-blog .blog-article {
            padding: 0 10px
        }
    }
}