/* ===== Sterling Blog Enhancement Layer =====
   Adds styling for the new blog post pages and card grid.
   Brand: #4B1FA0 (purple), #5ec5cc (teal). Loads AFTER style.css. */

:root{
  --sgs-purple:#4B1FA0;
  --sgs-purple-soft:#7b64cb;
  --sgs-teal:#5ec5cc;
  --sgs-ink:#222222;
  --sgs-muted:#777777;
  --sgs-line:#ececec;
}

/* ---------- Single post ---------- */
.blog-single-enhanced .content-text{padding:26px 4px 0}
.post-cat-badge{
  display:inline-block;background:var(--sgs-purple);color:#fff;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:5px 14px;border-radius:20px;margin-bottom:14px;
}
.post-title{
  font-size:30px;line-height:1.25;color:var(--sgs-ink);
  margin:6px 0 14px;font-weight:700;
}
.post-meta{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--sgs-line)}
.post-meta span{color:var(--sgs-muted);font-size:14px}
.post-meta i{color:var(--sgs-purple);margin-right:6px}
.post-body p{color:#555;font-size:16px;line-height:1.8;margin-bottom:18px}
.post-subhead{
  font-size:21px;color:var(--sgs-purple);font-weight:700;
  margin:30px 0 14px;line-height:1.35;
}
.post-list{margin:0 0 20px;padding:0;list-style:none}
.post-list li{
  position:relative;padding:8px 0 8px 30px;color:#555;font-size:16px;line-height:1.6;
  border-bottom:1px dashed var(--sgs-line);
}
.post-list li:before{
  content:"\f00c";font-family:FontAwesome;color:var(--sgs-teal);
  position:absolute;left:0;top:9px;font-size:14px;
}
.post-tags{margin:26px 0 10px}
.post-tags a{
  display:inline-block;background:#f4f2fb;color:var(--sgs-purple);
  font-size:13px;padding:5px 14px;border-radius:4px;margin:0 6px 8px 0;
  text-decoration:none;transition:.3s;
}
.post-tags a:hover{background:var(--sgs-purple);color:#fff}

/* CTA block inside post */
.post-cta{
  background:linear-gradient(135deg,var(--sgs-purple),var(--sgs-purple-soft));
  color:#fff;border-radius:12px;padding:30px 32px;margin:34px 0 10px;
}
.post-cta h4{color:#fff;margin:0 0 10px;font-size:22px;font-weight:700}
.post-cta p{color:#eee;margin:0 0 18px;font-size:15px;line-height:1.7}
.post-cta .btn-style-one{background:#fff;color:var(--sgs-purple);border-color:#fff}
.post-cta .btn-style-one:hover{background:var(--sgs-teal);color:#fff;border-color:var(--sgs-teal)}

/* Related posts */
.related-posts{margin-top:44px;padding-top:26px;border-top:1px solid var(--sgs-line)}
.related-posts .sec-title h6{color:var(--sgs-purple);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:20px}
.related-card{background:#fff;border:1px solid var(--sgs-line);border-radius:10px;
  overflow:hidden;margin-bottom:24px;transition:.3s;height:100%}
.related-card:hover{box-shadow:0 12px 28px rgba(75,31,160,.12);transform:translateY(-4px)}
.related-card img{width:100%;height:150px;object-fit:cover;display:block}
.related-card .related-cat{display:block;color:var(--sgs-teal);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:12px 14px 0}
.related-card h5{font-size:15px;line-height:1.4;color:var(--sgs-ink);
  padding:6px 14px 16px;margin:0;font-weight:600}
.related-card a{text-decoration:none}
.related-card:hover h5{color:var(--sgs-purple)}

/* Sidebar recent posts */
.recent-posts{margin-top:30px}
.recent-list{list-style:none;padding:0;margin:0}
.recent-list li{padding:12px 0;border-bottom:1px solid var(--sgs-line)}
.recent-list li a{color:var(--sgs-ink);font-size:14px;font-weight:600;
  text-decoration:none;line-height:1.4;display:block}
.recent-list li a:hover{color:var(--sgs-purple)}
.recent-list li span{color:var(--sgs-muted);font-size:12px;display:block;margin-top:4px}

/* ---------- Blog listing grid ---------- */
.blog-grid-section{padding:60px 0}
.blog-filter{text-align:center;margin-bottom:40px}
.blog-filter button{
  background:#fff;border:1px solid var(--sgs-purple);color:var(--sgs-purple);
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:8px 20px;border-radius:24px;margin:0 6px 10px;cursor:pointer;transition:.3s;
}
.blog-filter button:hover,.blog-filter button.active{background:var(--sgs-purple);color:#fff}
.blog-card{
  background:#fff;border:1px solid var(--sgs-line);border-radius:12px;overflow:hidden;
  margin-bottom:30px;transition:.3s;display:flex;flex-direction:column;height:calc(100% - 30px);
}
.blog-card:hover{box-shadow:0 14px 34px rgba(75,31,160,.14);transform:translateY(-5px)}
.blog-card .card-img{position:relative;overflow:hidden}
.blog-card .card-img img{width:100%;height:200px;object-fit:cover;display:block;transition:.5s}
.blog-card:hover .card-img img{transform:scale(1.06)}
.blog-card .card-cat{position:absolute;top:14px;left:14px;background:var(--sgs-purple);
  color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:5px 12px;border-radius:20px}
.blog-card .card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.blog-card .card-meta{color:var(--sgs-muted);font-size:13px;margin-bottom:10px}
.blog-card .card-meta i{color:var(--sgs-purple);margin-right:5px}
.blog-card h4{font-size:18px;line-height:1.4;margin:0 0 12px;font-weight:700}
.blog-card h4 a{color:var(--sgs-ink);text-decoration:none}
.blog-card:hover h4 a{color:var(--sgs-purple)}
.blog-card p{color:#666;font-size:14px;line-height:1.65;margin:0 0 18px;flex:1}
.blog-card .read-link{color:var(--sgs-purple);font-weight:700;font-size:14px;
  text-decoration:none;text-transform:uppercase;letter-spacing:.5px}
.blog-card .read-link:hover{color:var(--sgs-teal)}
.blog-card .read-link i{margin-left:6px;transition:.3s}
.blog-card:hover .read-link i{margin-left:10px}

/* Newsletter strip */
.blog-newsletter{background:linear-gradient(135deg,var(--sgs-purple),var(--sgs-purple-soft));
  border-radius:14px;padding:40px;text-align:center;color:#fff;margin:10px 0 40px}
.blog-newsletter h3{color:#fff;margin:0 0 10px;font-size:24px}
.blog-newsletter p{color:#eee;margin:0 0 20px}

@media(max-width:767px){
  .post-title{font-size:24px}
  .post-cta{padding:24px 20px}
  .blog-card .card-img img{height:180px}
}