/* blog.css — compact, theme-agnostic stylesheet for the blog partials.
   Colors come from the theme's neutral --theme-* tokens when it provides them
   (light and dark schemes alike), with the module's own light defaults as
   fallbacks. Themes can also set the --blog-* variables directly. */
:root{
    --blog-accent:var(--theme-primary, #2b6cb0);
    --blog-on-accent:var(--theme-on-primary, #fff);
    --blog-bg:var(--theme-surface, #ffffff);
    --blog-surface-alt:var(--theme-surface-alt, #fafafa);
    --blog-sidebar-bg:var(--theme-surface-alt, #ededed);
    --blog-text:var(--theme-text, #222);
    --blog-muted:var(--theme-text-muted, #6b7280);
    --blog-border:var(--theme-border, #e6e6e6);
    --blog-border-strong:var(--theme-border-strong, #8a8f98);
    --blog-radius:var(--theme-radius, 0px);
}

/* Visually hidden text for screen readers. */
.blog-sr-only{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important}

/* 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:var(--blog-text); padding:1em 0em; }
.post-summary__readmore{display: flex; justify-content: end;}
.post-summary__readmore a{background:var(--blog-accent); color:var(--blog-on-accent); padding:.45rem .7rem; text-decoration:none; border:none;}

/* Sidebar */
.blog-index__sidebar{background:var(--blog-sidebar-bg); color:var(--blog-text); border:1px solid var(--blog-border); padding:.85rem; border-radius:4px}
.widget h2, .widget h4{margin:0 0 .5rem; font-size:1.15rem}
.tag{padding:.25rem .5rem; border-radius:4px; border:1px solid var(--blog-border); background:var(--blog-surface-alt); 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:var(--blog-surface-alt); border-color:var(--blog-border-strong)}

/* 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:var(--blog-text)}

.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:var(--blog-surface-alt); color:var(--blog-text); 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}
/* Field borders at 3:1 or more (WCAG 1.4.11). */
.comment-form input, .comment-form textarea{width:100%; padding:.5rem; border:1px solid var(--blog-border-strong); border-radius:4px; background:var(--blog-bg); color:var(--blog-text)}
.comment-form button{background:var(--blog-accent); color:var(--blog-on-accent); border:none; padding:.5rem .75rem; border-radius:4px; cursor:pointer; align-self:flex-start}

/* Preview banner (logged-in preview of an unpublished post): dark text on
   amber, about 8:1. */
.blog-preview-banner{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.5rem; padding:.75rem 1.25rem; border-radius:4px; background:#f0a500; color:#1b1b1b}
.blog-preview-banner__status{margin-left:auto; padding:.2em .6em; border-radius:3px; background:rgba(0,0,0,.12); font-size:.85em; text-transform:uppercase; letter-spacing:.04em}

/* 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}
}