/**
 * assets/css/blog.css
 * Ger "Project Hope Bloggen" en egen identitet inom sajten — en tydlig
 * masthead med eget varumärke/tagline, kategorier, utvald post och en
 * sidopanel — snarare än att se ut som ännu en undersida i mängden.
 */
.blog-masthead {
    background: linear-gradient(135deg, rgba(124,110,242,.16), rgba(11,13,18,0));
    border-bottom: 1px solid var(--color-surface-border);
    padding: var(--space-4) 0 var(--space-3);
    margin-bottom: var(--space-4);
}
.blog-masthead-inner { text-align: center; }
.blog-brand {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -.01em;
}
.blog-brand span { color: var(--color-accent-soft); font-style: italic; }
.blog-masthead-tagline { color: var(--color-text-muted); max-width: 560px; margin: .6rem auto 1.2rem; font-size: .95rem; }
.blog-search { display: flex; justify-content: center; gap: .5rem; max-width: 420px; margin: 0 auto; }
.blog-search input { flex: 1; padding: .6rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--color-surface-border); background: var(--color-surface); color: var(--color-text); }
.blog-search button { padding: .6rem 1.4rem; border-radius: var(--radius-pill); border: none; background: var(--gradient-accent); color: #fff; font-weight: 600; cursor: pointer; }

.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } }

.blog-category-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-3); }
.blog-category-pill {
    display: inline-block; padding: .3rem .9rem; border-radius: var(--radius-pill);
    font-size: .78rem; text-decoration: none; color: var(--color-text-muted);
    background: var(--color-surface); border: 1px solid var(--color-surface-border);
    margin-bottom: .3rem;
}
.blog-category-pill--sm { font-size: .68rem; padding: .15rem .6rem; margin-bottom: .4rem; }
.blog-category-pill.is-active, .blog-category-pill:hover { color: #fff; background: var(--gradient-accent); border-color: transparent; }
.blog-category-pill--bygglogg { border-color: rgba(124,110,242,.4); }
.blog-category-pill--sponsring { border-color: rgba(240,180,60,.4); }
.blog-category-pill--nyheter { border-color: rgba(90,200,140,.4); }

.blog-featured-post {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-3);
    background: var(--color-surface); border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
    margin-bottom: var(--space-4);
}
.blog-featured-post img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.blog-featured-post-body { padding: var(--space-3) var(--space-3) var(--space-3) 0; display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.blog-featured-post-body h2 { margin: 0; font-size: 1.5rem; }
.blog-featured-post-body p { color: var(--color-text-muted); font-size: .95rem; margin: 0; }
@media (max-width: 700px) { .blog-featured-post { grid-template-columns: 1fr; } .blog-featured-post-body { padding: 0 var(--space-3) var(--space-3); } }

.blog-sidebar { display: flex; flex-direction: column; gap: var(--space-3); }
.blog-sidebar-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 700px) { .blog-sidebar-widgets { grid-template-columns: 1fr; } }
.blog-archive-widget { padding: var(--space-3); }
.blog-archive-widget h3 { margin-top: 0; font-size: 1rem; }
.blog-archive-widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.blog-archive-widget li { font-size: .85rem; color: var(--color-text-muted); text-transform: capitalize; }

/* --- Grundläggande postkort/artikel-stilar (flyttade hit från tidigare inline <style>) --- */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--space-3); }
.news-card-img { width:100%; height:160px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:.6rem; }
.news-card-date { color:var(--color-text-faint); font-size:.8rem; }
.news-card-sponsor { display:inline-block; font-size:.72rem; color:var(--color-accent-soft); margin-left:.5rem; }
.news-article { max-width: var(--container-narrow); margin: 0 auto; }
.news-article img { width:100%; border-radius:var(--radius-lg); margin-bottom:var(--space-3); }
.news-article-body { line-height:1.7; color:var(--color-text-muted); }
.news-back { display:inline-block; margin-bottom:var(--space-3); color:var(--color-accent-soft); text-decoration:none; }
.news-sponsor-badge { display:inline-block; background:var(--color-surface); border:1px solid var(--color-surface-border); border-radius:var(--radius-pill); padding:.3rem .9rem; font-size:.8rem; margin:.5rem 0; }
.news-gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:.6rem; margin-bottom:var(--space-3); }
.news-gallery img { width:100%; height:140px; object-fit:cover; border-radius:var(--radius-md); margin:0; cursor:zoom-in; }

/* --- Kommentarer --- */
.news-comments-section { margin-top: var(--space-5); }
.news-comment-form { display:flex; flex-direction:column; gap:.6rem; max-width:520px; margin:var(--space-2) 0 var(--space-4); }
.news-comment-form input, .news-comment-form textarea { padding:.6rem .8rem; border-radius:var(--radius-sm); border:1px solid var(--color-surface-border); background:var(--color-surface); color:var(--color-text); font-family:inherit; }
.news-comment-note { font-size:.78rem; color:var(--color-text-faint); }
.news-comment-list { display:flex; flex-direction:column; gap:.8rem; }
.news-comment-item { background:var(--color-surface); border:1px solid var(--color-surface-border); border-radius:var(--radius-md); padding:.8rem 1rem; }
.news-comment-item-name { font-weight:600; font-size:.85rem; margin-bottom:.2rem; }
.news-comment-item-body { font-size:.9rem; color:var(--color-text-muted); margin:0; }