/* ============================================================
   Blog – public pages (listing + detail)
   Used by: general/blog_index.blade.php
            general/blog_show.blade.php
   ============================================================ */

/* ── Blog listing: placeholder image when no featured image ── */
.letest-blog-img .blog-placeholder-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%);
}
.letest-blog-img:not(:has(img)) {
    display: block;
    height: 220px;
    background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%);
}

/* ── Sidebar: recent-post thumbnail placeholder ───────────── */
.recent-post-img-placeholder {
    display: block;
    width: 80px;
    height: 60px;
    min-width: 80px;
    background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%);
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Sidebar: active category / tag links ─────────────────── */
.categories-list ul li a.active,
.post-tags-section ul li a.active {
    color: var(--theme-color, #4f6af0);
    font-weight: 600;
}
.categories-list ul li a .badge-count {
    opacity: .65;
    font-size: .8em;
}

/* ── Pagination: disabled (ellipsis) ─────────────────────── */
.staco-pagination ul li.disabled a {
    pointer-events: none;
    cursor: default;
    opacity: .5;
}

/* ── Blog detail: body typography (Quill HTML output) ─────── */
.blog-details-body h2 { font-size: 1.4rem;  margin-top: 2.25rem; margin-bottom: .75rem; font-weight: 600; }
.blog-details-body h3 { font-size: 1.2rem;  margin-top: 1.75rem; margin-bottom: .6rem;  font-weight: 600; }
.blog-details-body h4 { font-size: 1.05rem; margin-top: 1.5rem;  margin-bottom: .5rem;  font-weight: 600; }
.blog-details-body p  { line-height: 1.85; margin-bottom: 1.1rem; }
.blog-details-body ul,
.blog-details-body ol { margin-bottom: 1rem; padding-left: 1.6rem; }
.blog-details-body li { margin-bottom: .45rem; line-height: 1.75; }
.blog-details-body blockquote {
    border-left: 4px solid var(--theme-color, #4f6af0);
    padding: .85rem 1.25rem;
    background: #f5f7ff;
    border-radius: 0 .4rem .4rem 0;
    margin: 1.75rem 0;
    font-style: italic;
    color: #555;
}
.blog-details-body img   { max-width: 100%; border-radius: .4rem; margin: 1rem 0; }
.blog-details-body pre   { background: #f1f3f5; border-radius: .375rem; padding: 1rem; overflow-x: auto; font-size: .875rem; }
.blog-details-body a     { color: var(--theme-color, #4f6af0); text-decoration: underline; }
.blog-details-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.blog-details-body th,
.blog-details-body td    { border: 1px solid #dee2e6; padding: .5rem .75rem; }
.blog-details-body th    { background: #f8f9fa; font-weight: 600; }
.blog-details-body strong { font-weight: 600; }

/* ── Prev/Next cards: placeholder for posts without image ─── */
.blog-card-img-placeholder {
    display: block;
    width: 100%;
    height: 90px;
    background: linear-gradient(135deg, #f0f4ff 0%, #dce8ff 100%);
    border-radius: 6px;
}