/* blog.css — extracted from page-blog.php in 1.2.0.
   A <style> element is metadata content and belongs in <head>; inside <main>
   it is invalid, and it also cannot be cached. Enqueued conditionally from
   functions.php. */
.blog-hero{padding:7rem 2rem 4rem;background:var(--navy-deep);position:relative;overflow:hidden;}
.blog-hero::before{content:'';position:absolute;inset:0;background-image:var(--tho-banner);background-size:cover;background-position:center;opacity:0.08;}
.blog-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,26,46,0.7) 0%,rgba(12,26,46,1) 100%);}
.blog-hero__inner{position:relative;z-index:1;}
.filter-bar{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-top:2.5rem;}
.category-filter{font-family:var(--font-ui);font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);background:var(--navy-card);border:1px solid var(--navy-border);padding:0.4rem 1rem;border-radius:1px;cursor:pointer;transition:all var(--transition);}
.category-filter:hover{color:var(--cream);border-color:var(--gold-dim);}
.category-filter.active{color:var(--navy-deep);background:var(--gold);border-color:var(--gold);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.blog-card-icon{height:160px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy-mid),var(--navy-border));position:relative;}
.blog-card-icon::before{content:attr(data-initial);font-family:var(--font-display);font-size:5rem;font-weight:300;color:rgba(201,168,76,0.15);position:absolute;}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}

/* Same treatment: the empty-state heading is now an <h2> for the outline's
   sake and keeps the size it had as an <h3>. */
.blog-empty__title{font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:400;margin-bottom:1rem;}