/* MAIN LAYOUT */
.lp-blog-wrap { padding: 48px 0 64px; }
.lp-blog-wrap .blog-main { padding-right: 8px; }
.lp-blog-wrap .blog-sidebar { padding-left: 8px; }

/* BLOG GRID */
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.blog-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: 0 6px 24px rgba(26,158,92,0.09); transform: translateY(-2px); }
.blog-card .bc-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.blog-card .bc-cat { position: absolute; top: 10px; left: 10px; background: #1a9e5c; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.4px; text-transform: uppercase; }
.blog-card .bc-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.blog-card .bc-date { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #aaa; margin-bottom: 8px; }
.blog-card .bc-date svg { width: 12px; height: 12px; stroke: #aaa; fill: none; stroke-width: 2; stroke-linecap: round; }
.blog-card .bc-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; }
.blog-card .bc-excerpt { font-size: 12.5px; color: #666; line-height: 1.65; flex: 1; margin-bottom: 14px; }
.blog-card .bc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.05); }
.blog-card .bc-read { font-size: 12px; font-weight: 600; color: #1a9e5c; display: flex; align-items: center; gap: 4px; }
.blog-card .bc-read svg { width: 13px; height: 13px; stroke: #1a9e5c; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.blog-card .bc-tag { font-size: 10px; font-weight: 500; color: #888; background: #f5f7f5; border: 1px solid rgba(0,0,0,0.07); padding: 2px 8px; border-radius: 12px; }

/* SIDEBAR */
.sidebar-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; padding: 22px 20px; margin-bottom: 18px; }
.sidebar-card:last-child { margin-bottom: 0; }
.sidebar-card .sc-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.sidebar-card .sc-title svg { width: 16px; height: 16px; stroke: #1a9e5c; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Category list */
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer; transition: color 0.2s; }
.cat-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cat-list li:first-child { padding-top: 0; }
.cat-list li:hover .cat-name { color: #1a9e5c; }
.cat-list li .cat-name { font-size: 13px; color: #444; display: flex; align-items: center; gap: 7px; transition: color 0.2s; }
.cat-list li .cat-name svg { width: 13px; height: 13px; stroke: #1a9e5c; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cat-list li .cat-count { font-size: 11px; color: #fff; background: #1a9e5c; padding: 1px 7px; border-radius: 20px; font-weight: 600; }
.cat-list-item{
    display: flex; align-items: center; justify-content: space-between; 
}

/* Newsletter card */
.newsletter-card { background: linear-gradient(135deg, #1a9e5c 0%, #6c3fc5 100%); border-radius: 16px; padding: 24px 20px; text-align: center; }
.newsletter-card h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.newsletter-card p { font-size: 12px; color: rgba(255,255,255,0.82); margin-bottom: 16px; line-height: 1.55; }
.newsletter-card .nl-input-wrap { display: flex; gap: 8px; flex-direction: column; }
.newsletter-card input { width: 100%; border: none; border-radius: 8px; padding: 10px 14px; font-size: 13px; font-family: 'Inter', sans-serif; outline: none; color: #1a1a1a; }
.newsletter-card button { background: #ffffff; color: #0f6e3e; border: none; border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; font-family: 'Inter', sans-serif; }
.newsletter-card button:hover { opacity: 0.9; }

/* RESPONSIVE */
@media (max-width: 991px) {
  .lp-blog-wrap .blog-main { padding-right: 0; margin-bottom: 32px; }
  .lp-blog-wrap .blog-sidebar { padding-left: 0; }
}
@media (max-width: 767px) {
  .lp-page-hero h1 { font-size: 26px; }
  .blog-grid { grid-template-columns: 1fr; }
}