/* blog.css — compact, theme-agnostic stylesheet for the blog partials */
:root{
    --blog-accent:#2b6cb0;
    --blog-bg:#ffffff;
    --blog-muted:#6b7280;
    --blog-border:#e6e6e6;
    --blog-radius:0px;
}

/* Layout helpers */
.container{width:100%; margin:0 auto; padding:1rem}
.flex{display:flex}
.flex-column{display:flex; flex-direction: column;}
.grid-gap{gap:2rem}

/* Blog index */
.post-summary{background:var(--blog-bg); border:1px solid var(--blog-border); border-radius:var(--blog-radius); padding:1rem; display:flex; gap:1rem}
.post-summary__body{display:flex; flex-direction: column; gap:.1rem; width: 100%;}
.post-summary__thumb img{width:180px; height:120px; object-fit:cover; border-radius:4px}
.post-summary__title{font-size:1.5rem; margin:0}
.post-summary__meta{color:var(--blog-muted); font-size:1rem}
.post-summary__taxonomy{display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0}
.post-summary__excerpt{color:#222; padding:1em 0em; }
.post-summary__readmore{display: flex; justify-content: end;}
.post-summary__readmore a{background:var(--blog-accent); color:#fff; padding:.45rem .7rem; text-decoration:none; border:none;}

/* Sidebar */
.blog-index__sidebar{background:#ededed; border:1px solid var(--blog-border); padding:.85rem; border-radius:4px}
.widget h4{margin:0 0 .5rem}
.tag{padding:.25rem .5rem; border-radius:4px; border:1px solid #ddd; background: #fafafa; text-decoration:none; display:inline-block}

/* Category & tag pills */
.post-category{display:inline-block; text-decoration:none;}
.post-tag{font-size:.95rem; display:inline-block; padding:.2em .55em; font-weight:500; text-decoration:none; border:1px solid var(--blog-border)}
.post-tag:hover{background:#e2e8f0; border-color:#c0c9d6}

/* Post footer taxonomy (single post view) */
.blog-post__footer .post-tags{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:.75rem 0; border-top:1px solid var(--blog-border)}
.blog-post__footer .post-tags strong{font-size:.85rem; color:var(--blog-muted); margin-right:.15rem}

/* Single post — two-column layout */
.blog-post__header h1{font-size:2rem; margin:0}
.blog-post__meta{color:var(--blog-muted); margin:.5rem 0}
.blog-post__content{font-size:1.05rem; line-height:1.75; color:#222}

.blog-post__layout{display:flex; gap:2rem; align-items:flex-start; margin-top:1.5rem}
.blog-post__main{flex:1 1 0; min-width:0}
.blog-post__sidebar{flex:0 0 280px; display:flex; flex-direction:column; gap:1.5rem}

/* Sidebar image */
.blog-post__sidebar-image img{width:100%; height:auto; border-radius:var(--blog-radius); display:block}

/* Author box */
.author-box{background:#fafafa; border-radius:6px; padding:1rem}
.author-box h4{margin:0 0 .65rem}
.author-box__inner{display:flex; gap:.75rem; align-items:flex-start}
.author-box__avatar{width:56px; height:56px; object-fit:cover; border-radius:50%; flex-shrink:0}
.author-box__bio{margin:.25rem 0 0; font-size:.9rem; color:var(--blog-muted)}

/* Comments */
.blog-post__comments{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--blog-border)}
.comment-list{list-style:none; padding:0; margin:0}
.comment-list .comment{padding:.75rem 0; border-bottom:1px solid var(--blog-border)}
.comment__inner{display:flex; gap:.75rem; align-items:flex-start}
.comment__avatar{width:40px; height:40px; object-fit:cover; border-radius:50%; flex-shrink:0}
.comment__author{font-weight:600}
.comment__date{font-size:.85rem; color:var(--blog-muted); margin-bottom:.25rem}
.comment-form{margin-top:1.5rem}
.comment-form__fields{display:flex; flex-direction:column; gap:.5rem}
.comment-form input, .comment-form textarea{width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px}
.comment-form button{background:var(--blog-accent); color:#fff; border:none; padding:.5rem .75rem; border-radius:4px; cursor:pointer; align-self:flex-start}

/* Recent posts by author */
.author-recent-posts{margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--blog-border)}
.author-recent-posts h4{margin-bottom:1rem}
.author-recent-posts__list{display:flex; flex-direction:column; gap:.75rem}
.author-recent-posts__item{display:flex; gap:1rem; align-items:flex-start}
.author-recent-posts__thumb img{width:72px; height:54px; object-fit:cover; border-radius:3px; display:block}
.author-recent-posts__title{font-weight:600; text-decoration:none; color:inherit; display:block}
.author-recent-posts__title:hover{text-decoration:underline}
.author-recent-posts__date{font-size:.85rem; color:var(--blog-muted); margin-top:.15rem}

/* Lightbox */
.blog-lightbox-trigger{cursor:zoom-in}
#blog-lightbox{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; transition:opacity .2s ease; pointer-events:none}
#blog-lightbox.is-open{opacity:1; pointer-events:all}
#blog-lightbox img{max-width:100%; max-height:calc(100vh - 4rem); object-fit:contain; border-radius:4px; box-shadow:0 8px 40px rgba(0,0,0,.6)}
#blog-lightbox figcaption{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:#fff; font-size:.9rem; background:rgba(0,0,0,.55); padding:.3em .8em; border-radius:3px; white-space:nowrap; max-width:80%; overflow:hidden; text-overflow:ellipsis}
#blog-lightbox-close{position:absolute; top:.75rem; right:1rem; background:none; border:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; opacity:.8}
#blog-lightbox-close:hover{opacity:1}

/* Utilities & responsiveness */
@media (max-width:900px){
    .blog-index__grid{flex-direction:column}
    .post-summary{flex-direction:column}
    .post-summary__thumb{width:100%}
    /* Post show: sidebar moves below main content on mobile */
    .blog-post__layout{flex-direction:column}
    .blog-post__sidebar{flex:none; width:100%}
    .blog-post__sidebar-image img{max-height:320px; object-fit:cover}
}

@media (max-width:480px){
    .container{padding:.75rem}
    .blog-index__header h1{font-size:1.5rem}
    .blog-post__header h1{font-size:1.5rem}
}