/* =========================================================
   VividFundy — Blog & Article page extras
   Loaded after style.css. Reuses existing design tokens.
   ========================================================= */

.blog-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.blog-search{
  width: 340px;
  max-width: 100%;
}
.category-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip-filter{
  border:1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size:13.5px;
  font-weight:700;
  background: var(--white);
  color: var(--navy);
  transition: all .2s ease;
}
.chip-filter:hover{ background: var(--cream-2); }
.chip-filter.is-active{ background: var(--navy); color: var(--white); border-color: var(--navy); }

.blog-results-count{
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

@media (max-width: 760px){
  .blog-controls{ flex-direction:column; align-items:stretch; }
  .blog-search{ width:100%; }
}

/* ---------- article page ---------- */
.article-hero-img{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 34px;
}
.article-hero-img img{ width:100%; height:auto; display:block; aspect-ratio: 16/9; object-fit:cover; }
.article-meta-row{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  flex-wrap:wrap;
}
.article-meta-row .dot{ width:4px; height:4px; border-radius:50%; background: var(--ink-soft); }
.article-body{
  max-width: 720px;
  margin: 0 auto;
}
.article-body p{
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 22px;
}
.article-body-wrap{
  max-width: 720px;
  margin: 0 auto 40px;
}
.article-share{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 30px 0 46px;
  max-width: 720px;
  margin-inline:auto;
}
.article-share span{ font-size:13px; font-weight:700; color: var(--navy); }
.article-share a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition: all .2s ease;
}
.article-share a:hover{ background: var(--navy); color: var(--white); border-color: var(--navy); }
.article-share a svg{ width:16px; height:16px; }

.article-not-found{
  text-align:center;
  padding: 80px 0;
}
.article-not-found svg{ width:60px; height:60px; opacity:.4; margin: 0 auto 18px; color: var(--ink-soft); }

.article-leadmagnet{
  max-width: 720px;
  margin: 40px auto 50px;
  background: linear-gradient(135deg, rgba(18,102,77,.94), rgba(11,26,51,.96));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
}
.article-leadmagnet h3{ color: var(--white); margin-bottom:10px; }
.article-leadmagnet p{ color:#dbe4ee; margin-bottom: 0; }
.article-leadmagnet .leadmagnet-form{ margin-top:20px; }

@media (max-width: 560px){
  .article-leadmagnet{ padding: 26px 22px; }
}