/* ================= HERO ================= */
.blog-hero { 
  background: var(--indigo); 
  position: relative; 
  padding: 80px 6% 80px; 
  overflow: hidden; 
  border-radius: 0 0 24px 24px;
}
.blog-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.blog-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
}
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; font-weight:600; color:#fff; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); padding:6px 14px; border-radius:999px; margin-bottom:20px; backdrop-filter:blur(4px); }
.hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:#10B981; }
.blog-hero h1 { font-size:clamp(2.5rem,6vw,3.8rem); font-weight:800; letter-spacing:-1px; line-height:1.2; color:#fff; margin-bottom:14px; max-width:680px; text-shadow: 0 4px 20px rgba(0,0,0,0.4); }

.blog-hero h1 em {
  font-style: normal;
  color: #F472B6; /* Vibrant Pink */
  position: relative;
  display: inline-block;
  z-index: 1;
}

.blog-hero h1 em::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: 6%;
  width: 104%;
  height: 32%;
  background: rgba(244, 114, 182, 0.25); /* Translucent pink */
  z-index: -1;
  border-radius: 4px;
  transform: rotate(-1.5deg);
}
.blog-hero p { color:var(--indigo-100); font-size:1.05rem; line-height:1.65; max-width:560px; }

/* ================= FILTER BAR ================= */
.filter-bar{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 6%; display:flex; align-items:center; gap:12px;  flex-wrap: wrap;
  position: sticky;
  top: 75px;
  z-index: 90;
  margin-top: 32px; }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.fpill{ padding:6px 15px; border-radius:999px; border:1px solid var(--border); background:none; font-size:0.82rem; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.fpill:hover{ border-color:var(--indigo); color:var(--indigo); transform: scale(1.05) translateY(-2px); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15); background: #ffffff; }
.fpill.active{ background:var(--indigo); border-color:var(--indigo); color:#fff; transform: scale(1.05); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25); }
.fpill.active:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35); background: var(--indigo); color: #fff; }
.search-wrap{ position:relative; margin-left:auto; }
.search-wrap input{ padding:8px 14px 8px 34px; border-radius:8px; border:1px solid var(--border); font-size:0.85rem; outline:none; background:var(--bg); color:var(--ink); width:220px; transition:all 0.15s; }
.search-wrap input:focus{ border-color:var(--indigo); background:#fff; }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); }
.search-icon svg{ width:15px; height:15px; }

/* ================= CONTENT ================= */
.blog-content{ padding:40px 6% 80px; max-width:1280px; margin:0 auto; }

/* ================= FEATURED POST ================= */
.featured-post{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:36px; align-items:stretch; background:#ffffff; border:1px solid rgba(0,0,0,0.04); border-radius:24px; overflow:hidden; margin-bottom:48px; box-shadow:0 10px 30px rgba(0,0,0,0.03); transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; }
.featured-post:hover { border-color:rgba(79, 70, 229, 0.2); transform:translateY(-6px); box-shadow:0 20px 40px rgba(79, 70, 229, 0.08); }
.featured-image{ background-color:var(--indigo-50); background-size: cover; background-position: center; min-height:340px; position:relative; overflow:hidden; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.featured-post:hover .featured-image { transform: scale(1.03); }
.featured-image svg{ width:100%; height:100%; }
.featured-body{ padding:40px 40px 40px 0; display:flex; flex-direction:column; justify-content:center; position: relative; z-index: 2; background: #ffffff; }
.featured-badge{ display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; color:var(--indigo); background:var(--indigo-50); padding:4px 12px; border-radius:999px; margin-bottom:16px; width:fit-content; text-transform:uppercase; letter-spacing:0.4px; }
.featured-body h2{ font-size:1.5rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:12px; }
.featured-body p{ font-size:0.92rem; color:var(--ink-soft); line-height:1.65; margin-bottom:20px; }
.post-meta{ display:flex; align-items:center; gap:14px; font-size:0.78rem; color:var(--slate); flex-wrap:wrap; }
.post-meta-item{ display:flex; align-items:center; gap:5px; }

/* ================= POST GRID ================= */
.posts-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.post-card{ background:#ffffff; border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; box-shadow:0 4px 6px rgba(0,0,0,0.02); transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.post-card:hover{ border-color:var(--border); transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.06); }
.post-card-image{ height:200px; background:var(--indigo-50); position:relative; overflow:hidden; }
.post-card-image img{ width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.post-card:hover .post-card-image img{ transform:scale(1.05); }
.post-card-image svg{ width:100%; height:100%; }
.post-card-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.post-card-category{ font-size:0.7rem; font-weight:700; color:var(--indigo); text-transform:uppercase; letter-spacing:0.4px; }
.post-card-title{ font-size:1.02rem; font-weight:600; color:var(--ink); line-height:1.4; }
.post-card-excerpt{ font-size:0.84rem; color:var(--slate); line-height:1.55; flex:1; }
.post-card-meta{ display:flex; align-items:center; gap:12px; font-size:0.74rem; color:var(--slate); padding-top:10px; border-top:1px solid var(--border-2); margin-top:auto; }

/* ================= EMPTY / LOADING STATE ================= */
.blog-empty{ text-align:center; padding:64px 20px; color:var(--slate); }
.blog-empty svg{ width:56px; height:56px; margin:0 auto 16px; opacity:0.5; }
.blog-empty p{ font-size:0.92rem; }

/* ================= PAGINATION ================= */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.page-btn{ width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-size:0.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.page-btn:hover{ border-color:var(--indigo); color:var(--indigo); }
.page-btn.active{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.page-btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* ================= NEWSLETTER / CTA STRIP ================= */
.blog-cta{ background:#ffffff; border:1px solid var(--border-2); border-radius:var(--r-lg); padding:48px 6%; text-align:center; margin-top:56px; box-shadow:0 4px 6px rgba(0,0,0,0.02); transition:box-shadow 0.3s ease; }
.blog-cta:hover{ box-shadow:0 12px 24px rgba(0,0,0,0.04); }
.blog-cta h2{ font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.blog-cta p{ color:var(--ink-soft); font-size:0.9rem; max-width:440px; margin:0 auto 24px; line-height:1.6; }

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .featured-post{ grid-template-columns:1fr; }
  .featured-body{ padding:28px; }
  .featured-image{ min-height:200px; }
}
@media(max-width:768px){
  .filter-bar {
    top: 75px;
  }
  .search-wrap{ margin-left:0; width:100%; }
  .search-wrap input{ width:100%; }
}