/* Blog index + single-post styling. Reuses color tokens from style.css (loaded
   first by x-frostrank.layout) rather than declaring its own palette. */

/* FILTER BAR */
.blog-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
.blog-filter-select{
  padding:8px 12px;border-radius:9px;border:1px solid var(--card-border);
  background:var(--card);color:var(--text);font-family:inherit;font-size:0.86rem;
}
.blog-filter-clear{font-size:0.84rem;color:var(--muted);}
.blog-filter-clear:hover{color:var(--accent-text);}
.blog-empty{color:var(--muted);padding:20px 0;}

/* GRID — auto-fill with a capped minmax so cards stretch to fill the row rather
   than leaving dead space (see the CSS-grid gotcha in CLAUDE.md); no
   justify-content, same as .tools-grid. */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:16px;}
.blog-card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);
  border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;
}
.blog-card:hover{border-color:var(--line1);transform:translateY(-4px);box-shadow:0 16px 32px -16px rgba(2,132,199,0.25);}
.blog-card-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.blog-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.blog-card-category{
  align-self:flex-start;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--accent-text);background:rgba(2,132,199,0.09);border-radius:20px;padding:2px 10px;
}
.blog-card h3{font-size:1.02rem;line-height:1.3;}
.blog-card p{font-size:0.86rem;color:var(--muted);flex:1;}
.blog-card-meta{font-size:0.76rem;color:var(--mono);display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;}

/* SINGLE POST */
.post-featured-image{width:100%;max-height:420px;object-fit:cover;border-radius:16px;border:1px solid var(--card-border);margin-bottom:24px;}
.post-body{font-size:1.02rem;line-height:1.75;color:var(--text);max-width:760px;}
.post-body h2{font-size:1.4rem;margin:28px 0 12px;}
.post-body h3{font-size:1.15rem;margin:22px 0 10px;}
.post-body p{margin-bottom:16px;}
.post-body ul,.post-body ol{margin:0 0 16px 22px;}
.post-body img{max-width:100%;border-radius:10px;}
.post-body a{color:var(--line1);text-decoration:underline;}
.post-body blockquote{border-left:3px solid var(--line1);padding-left:14px;color:var(--muted);margin:16px 0;}
.post-body pre{background:var(--bg-soft);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;overflow-x:auto;}

.post-sources{margin-top:24px;padding:14px 16px;background:var(--bg-soft);border:1px solid var(--card-border);border-radius:12px;font-size:0.86rem;color:var(--muted);}
.post-sources h2{font-size:0.9rem;color:var(--text);margin-bottom:6px;}
.post-sources p{white-space:pre-line;line-height:1.6;}

.post-author-box{
  display:flex;gap:14px;padding:16px;background:var(--card);border:1px solid var(--card-border);
  border-radius:14px;margin:28px 0;
}
.post-author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-soft);}
.post-author-name{font-weight:700;color:var(--text);font-size:0.98rem;}
.post-author-title{font-size:0.8rem;color:var(--muted);margin-bottom:6px;}
.post-author-bio{font-size:0.88rem;color:var(--muted);line-height:1.55;}
.post-author-link{font-size:0.82rem;margin-top:6px;display:inline-block;}

.related-posts-section h2{font-size:1.2rem;margin-bottom:14px;}

@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .post-author-box{flex-direction:column;align-items:flex-start;}
}

/* Public comments under a post (components/frostrank/post-comments.blade.php). */
.post-comments-heading{font-size:1.2rem;letter-spacing:-0.01em;margin-bottom:14px;}
.post-comments-empty{color:var(--muted);font-size:0.94rem;}
.post-comments-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:760px;}
.post-comment{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:16px 18px;}
.post-comment-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;}
.post-comment-name{font-weight:600;color:var(--text);}
.post-comment-stars{color:#f59e0b;letter-spacing:1px;font-size:0.9rem;}
.post-comment-stars-off{color:var(--card-border);}
.post-comment-date{font-family:'JetBrains Mono',monospace;font-size:0.74rem;color:var(--muted);}
.post-comment-text{color:var(--text);font-size:0.94rem;line-height:1.6;margin:0;overflow-wrap:anywhere;}