/* =====================================================
   Blog listing + detail pages
   Used by: blog.php, blog-detail.php
   ===================================================== */

section[id^="bl-"] p, section[id^="bl-"] ul, section[id^="bl-"] li, section[id^="bl-"] a{font-size:16px}

/* ── Listing grid — extends the global .blog-card with a featured image ── */
.blog-card{overflow:hidden}
.blog-img{aspect-ratio:16/10;display:block;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.blog-card:hover .blog-img img{transform:scale(1.05)}





/* ── Detail page — main column + sidebar ── */
.bl-detail-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start}
@media(min-width:900px){.bl-detail-grid{grid-template-columns:66fr 34fr}}
.bl-post-main{max-width:46rem}
.bl-post-hero-img{aspect-ratio:16/7;border-radius:1.5rem;overflow:hidden;margin-bottom:2rem}
.bl-post-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.bl-post-cat{display:inline-block;padding:.3rem .8rem;border-radius:9999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-600);margin-bottom:1rem}
.bl-post-title{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;color:var(--ink-800);line-height:1.2;margin:auto auto 1rem;max-width: 800px;}
.bl-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.85rem;color:var(--ink-400);margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--ink-100)}
.bl-post-meta strong{color:var(--ink-700);font-weight:700}
.bl-post-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-200)}

.bl-post-body p{color:var(--ink-600);line-height:1.85;margin:0 0 1.5rem}
.bl-post-body h2{font-size:1.4rem;font-weight:800;color:var(--ink-800);margin:2.25rem 0 1rem}
.bl-post-body ul{margin:0 0 1.5rem;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.65rem}
.bl-post-body ul li{position:relative;padding-left:1.6rem;color:var(--ink-600);line-height:1.7}
.bl-post-body ul li::before{content:'\2713';position:absolute;left:0;top:.05rem;width:18px;height:18px;border-radius:50%;background:var(--grad-brand-soft);color:var(--brand-600);font-size:.65rem;font-weight:900;display:flex;align-items:center;justify-content:center}

.bl-post-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--brand-600);text-decoration:none;margin-bottom:1.5rem}
.bl-post-back:hover{color:var(--brand-700)}

.bl-not-found{text-align:center;padding:4rem 0}

/* ── Sidebar — Latest Posts widget ── */
.bl-sidebar{position:sticky;top:6.5rem}
.bl-sidebar-card{background:var(--ink-50);border:1px solid var(--ink-100);border-radius:1.25rem;padding:1.5rem}
.bl-sidebar-title{font-size:1rem;font-weight:800;color:var(--ink-800);margin:0 0 1.1rem}
.bl-sidebar-item{display:flex;align-items:flex-start;gap:.85rem;padding:.75rem 0;border-top:1px solid var(--ink-100);text-decoration:none}
.bl-sidebar-item:first-of-type{border-top:none;padding-top:0}
.bl-sidebar-item img{width:60px;height:60px;border-radius:.65rem;object-fit:cover;flex-shrink:0}
.bl-sidebar-item-title{font-size:.85rem;font-weight:700;color:var(--ink-800);line-height:1.4;margin:0 0 .3rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bl-sidebar-item:hover .bl-sidebar-item-title{color:var(--brand-600)}
.bl-sidebar-item-date{font-size:.72rem;color:var(--ink-400);margin:0}
@media(max-width:899px){.bl-sidebar{position:static}}