/* Blog filter tabs */
.blog-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.blog-tab {
  padding:8px 20px; border-radius:100px; font-size:13px; font-weight:600;
  border:1.5px solid var(--gray-border); background:var(--white); color:var(--gray-dark);
  cursor:pointer; transition:all .25s;
}
.blog-tab:hover,
.blog-tab.active { background:var(--green-primary); color:#fff; border-color:var(--green-primary); }

/* Featured post */
.blog-featured {
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--gray-border); background:var(--white);
  transition:all .4s; margin-bottom:56px;
}
.blog-featured:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.bf-thumb {
  min-height:360px; display:flex; align-items:center; justify-content:center;
  font-size:100px; background:var(--grad-main);
  position:relative; overflow:hidden;
}
.bf-thumb::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff10'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.bf-featured-label { position:absolute; top:20px; left:20px; background:rgba(255,255,255,.2); color:#fff; font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.3); }
.bf-body { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.bf-meta { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.bf-body h2 { font-size:1.6rem; font-weight:800; color:var(--charcoal); margin-bottom:14px; line-height:1.3; }
.bf-body p  { font-size:15px; color:var(--gray-dark); line-height:1.8; margin-bottom:24px; }
.bf-author { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:24px; border-top:1px solid var(--gray-border); }
.bf-author-av { width:40px; height:40px; border-radius:50%; background:var(--grad-main); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.bf-author-name  { font-size:14px; font-weight:600; color:var(--charcoal); }
.bf-author-title { font-size:12px; color:var(--gray-dark); }

/* Regular blog cards */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card {
  background:var(--white); border:1px solid var(--gray-border); border-radius:var(--radius-lg);
  overflow:hidden; transition:all .4s; display:flex; flex-direction:column;
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(5,150,105,.25); }
.bc-thumb { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:56px; position:relative; overflow:hidden; }
.bc-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.bc-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.bc-cat { background:var(--green-mint); color:var(--green-forest); font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.bc-date { font-size:12px; color:#94a3b8; }
.bc-read { font-size:12px; color:#94a3b8; margin-left:auto; }
.blog-card h3 { font-size:1.05rem; font-weight:700; color:var(--charcoal); margin-bottom:10px; line-height:1.4; }
.blog-card p  { font-size:14px; color:var(--gray-dark); line-height:1.7; flex:1; margin-bottom:20px; }
.bc-footer { display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--gray-border); }
.bc-author { display:flex; align-items:center; gap:8px; }
.bc-av { width:28px; height:28px; border-radius:50%; background:var(--grad-main); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.bc-av-name { font-size:12px; font-weight:600; color:var(--gray-dark); }
.blog-link { display:inline-flex; align-items:center; gap:4px; color:var(--green-primary); font-size:13px; font-weight:600; text-decoration:none; transition:gap .3s; }
.blog-link:hover { gap:8px; }
a.blog-card, .blog-featured  { text-decoration:none; }
/* Newsletter */
.newsletter-strip {
  background:var(--grad-forest); border-radius:var(--radius-lg); padding:48px;
  display:flex; align-items:center; gap:48px; margin-top:64px; flex-wrap:wrap;
}
.newsletter-text h3 { font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:8px; }
.newsletter-text p  { font-size:14px; color:rgba(255,255,255,.6); }
.newsletter-form { display:flex; gap:12px; flex:1; min-width:260px; }
.newsletter-form input { flex:1; padding:14px 20px; border-radius:100px; border:none; font-family:inherit; font-size:14px; outline:none; }
.newsletter-form input:focus { box-shadow:0 0 0 3px rgba(5,150,105,.3); }

/* Topics sidebar row */
.topics-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; }
.topic-chip { display:inline-flex; align-items:center; gap:8px; background:var(--gray-light); border:1px solid var(--gray-border); padding:8px 16px; border-radius:100px; font-size:13px; font-weight:500; color:var(--gray-dark); transition:all .2s; cursor:pointer; }
.topic-chip:hover { background:var(--green-mint); border-color:rgba(5,150,105,.3); color:var(--green-forest); }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:48px; }
.page-btn { width:40px; height:40px; border-radius:10px; border:1.5px solid var(--gray-border); background:var(--white); cursor:pointer; font-size:14px; font-weight:600; color:var(--gray-dark); transition:all .2s; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.page-btn:hover, .page-btn.active { background:var(--green-primary); border-color:var(--green-primary); color:#fff; }

@media (max-width:1024px) { .blog-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
  .blog-featured { grid-template-columns:1fr; }
  .bf-thumb { min-height:220px; }
  .bf-body { padding:28px; }
  .blog-grid { grid-template-columns:1fr; }
  .newsletter-strip { flex-direction:column; gap:24px; }
  .newsletter-form { width:100%; }
}