/* Listing pages: Blogs + Newsletters (hero, filter bar, card grid) */
.page-blogs,.page-nl{--black:var(--ink);--white:#ffffff;--gray:#f0f0f0;--mid-gray:#e4e4e4}


.blogs-hero{padding:7vh 8vw 5vh;border-bottom:1px solid var(--mid-gray);display:flex;align-items:flex-end;justify-content:space-between;position:relative;overflow:hidden}
.blogs-hero-left{position:relative;z-index:2}
.blogs-hero-eyebrow{font-family:var(--font-body);font-size:var(--eyebrow-size);letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1rem}
.blogs-hero-headline{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:700;line-height:1.08;letter-spacing:-0.02em;color:var(--black)}
.blogs-hero-stats{display:flex;gap:2.5rem;margin-top:1.5rem}
.blogs-stat-num{font-family:var(--font-display);font-size:clamp(1.62rem,2.7vw,2.34rem);font-weight:600;line-height:1.15;display:block}
.blogs-stat-lbl{font-family:var(--font-body);font-size:var(--eyebrow-size);color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;margin-top:.2rem}
.blogs-hero-ghost{position:absolute;right:6vw;bottom:1rem;font-family:var(--font-display);font-size:clamp(3.6rem,9vw,8.1rem);font-weight:700;line-height:1.08;color:transparent;-webkit-text-stroke:1px #e8e8e8;user-select:none;pointer-events:none;letter-spacing:-0.02em}

.blogs-filter{position:sticky;top:var(--nav-h);z-index:50;background:#fff;border-bottom:1px solid var(--mid-gray);padding:1rem 8vw;display:flex;flex-direction:column;gap:.85rem}
.filter-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.filter-search-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--mid-gray);padding:9px 14px;max-width:280px;width:100%;background:#f9f9f9;transition:border-color .2s}
.filter-search-wrap:focus-within{border-color:var(--black)}
.filter-search-icon{font-size:12px;color:var(--muted-2)}
.filter-search-input{border:none;outline:none;background:transparent;font-size:12px;color:var(--black);width:100%;font-family:var(--font-body)}
.filter-search-input::placeholder{color:var(--muted-2)}
.blogs-count{font-size:.62rem;color:var(--muted-2);letter-spacing:.08em;font-family:var(--font-body);white-space:nowrap}
.filter-pills-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.filter-pills-label{font-size:var(--eyebrow-size);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-family:var(--font-body);margin-right:4px}

.f-pill{border:1px solid transparent;padding:5px 12px;font-family:var(--font-body);font-size:var(--eyebrow-size);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .15s;font-weight:600;border-radius:2px}
.f-pill:hover{opacity:.75}
.f-pill[data-cat="all"]{background:var(--cream);color:var(--text-2);border-color:var(--line)}
.f-pill[data-cat="all"].active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* category colours (assigned by popularity) */
.f-pill.cat-c1{background:#e6f5f0;color:#276b53;border-color:#b2ddd0} .f-pill.cat-c1.active{background:#276b53;color:#fff;border-color:#276b53} .blog-card.cat-c1::before{background:#276b53}
.f-pill.cat-c2{background:#e8f0fc;color:#25499a;border-color:#b5cbf0} .f-pill.cat-c2.active{background:#25499a;color:#fff;border-color:#25499a} .blog-card.cat-c2::before{background:#25499a}
.f-pill.cat-c3{background:#f4edfc;color:#622ca0;border-color:#d4b0f0} .f-pill.cat-c3.active{background:#622ca0;color:#fff;border-color:#622ca0} .blog-card.cat-c3::before{background:#8e44ad}
.f-pill.cat-c4{background:#fff4e4;color:#96580f;border-color:#f5d49a} .f-pill.cat-c4.active{background:#96580f;color:#fff;border-color:#96580f} .blog-card.cat-c4::before{background:#c47a1e}
.f-pill.cat-c5{background:#f8f0e4;color:#70461a;border-color:#e8cc98} .f-pill.cat-c5.active{background:#70461a;color:#fff;border-color:#70461a} .blog-card.cat-c5::before{background:#795548}
.f-pill.cat-c6{background:#e6eff8;color:#164878;border-color:#a0c4e8} .f-pill.cat-c6.active{background:#164878;color:#fff;border-color:#164878} .blog-card.cat-c6::before{background:#2980b9}
.f-pill.cat-c7{background:#eef8ee;color:#246624;border-color:#a0d4a0} .f-pill.cat-c7.active{background:#246624;color:#fff;border-color:#246624} .blog-card.cat-c7::before{background:#1e8449}
.f-pill.cat-c8{background:#fdecea;color:#aa3526;border-color:#f5b0a8} .f-pill.cat-c8.active{background:#aa3526;color:#fff;border-color:#aa3526} .blog-card.cat-c8::before{background:#c0392b}
.f-pill.cat-c9{background:#fdf8e0;color:#826608;border-color:#f0d860} .f-pill.cat-c9.active{background:#826608;color:#fff;border-color:#826608} .blog-card.cat-c9::before{background:#f39c12}
.f-pill.cat-c10{background:#eceef8;color:#283898;border-color:#a8b0e8} .f-pill.cat-c10.active{background:#283898;color:#fff;border-color:#283898} .blog-card.cat-c10::before{background:#1a237e}
.f-pill.cat-c11{background:#fce6f2;color:#9a2258;border-color:#f0a8cc} .f-pill.cat-c11.active{background:#9a2258;color:#fff;border-color:#9a2258} .blog-card.cat-c11::before{background:#c0186a}
.f-pill.cat-c12{background:#fff0e6;color:#9a3f18;border-color:#f5c4a0} .f-pill.cat-c12.active{background:#9a3f18;color:#fff;border-color:#9a3f18} .blog-card.cat-c12::before{background:#d35400}
.f-pill.cat-c13{background:#eef8e6;color:#336e18;border-color:#b8e096} .f-pill.cat-c13.active{background:#336e18;color:#fff;border-color:#336e18} .blog-card.cat-c13::before{background:#27ae60}
.f-pill.cat-c14{background:#f8ece4;color:#7a3018;border-color:#e8b898} .f-pill.cat-c14.active{background:#7a3018;color:#fff;border-color:#7a3018} .blog-card.cat-c14::before{background:#a04000}

.blogs-body{padding:2rem 8vw 6rem}
/* lines are drawn around each card (not by a grey grid background), so a short last row has no grey gap */
.blogs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:transparent}
.blogs-grid > .blog-card{box-shadow:0 0 0 1px var(--mid-gray)}
.blogs-grid > .blog-card:hover{box-shadow:0 0 0 1px var(--mid-gray),0 12px 30px rgba(0,0,0,.1)}

.blog-card{padding:1.6rem 1.4rem 1.8rem;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;min-height:170px;background:#fff;text-decoration:none;color:inherit}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.1);z-index:2}
.blog-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--line)}
.blog-card-cat{font-family:var(--font-body);font-size:var(--eyebrow-size);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.blog-card-title{margin:0;font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.35;flex:1;color:var(--ink)}
.blog-card-date{font-family:var(--font-body);font-size:.58rem;color:var(--muted-2);letter-spacing:.04em;margin-top:auto}
.blog-card-arrow{position:absolute;bottom:1.2rem;right:1.2rem;font-size:.68rem;color:var(--muted-2);transition:color .2s,transform .2s}
.blog-card:hover .blog-card-arrow{color:var(--text-3);transform:translate(2px,-2px)}
.blogs-no-results{padding:80px 0;text-align:center;color:var(--muted-2);font-size:13px;font-family:var(--font-body)}


@media(max-width:768px){
  .blogs-hero{padding:5vh 6vw 4vh}
  .blogs-filter{padding:1rem 6vw}
  .blogs-body{padding:2rem 4vw 5rem}
  .blogs-grid{grid-template-columns:1fr 1fr}
  .blogs-hero-ghost{display:none}
}
@media(max-width:480px){.blogs-grid{grid-template-columns:1fr}}
.f-pill .n{opacity:.5;font-size:.5rem}
.blog-card[hidden]{display:none}