/* ===== Epic Essay • BLOGS (Clean Skin) =============================== */
/* Tokens */
:root{
    --ink:#0f172a; --muted:#667085; --line:rgba(15,23,42,.10);
    --card:#fff; --bg1:#eef3ff; --bg2:#f7f9ff;
    --brand-500:#2563eb; --brand-600:#1d4ed8; --brand-700:#1e40af;   /* blue brand */
    --accent-500:#ff7a45;                                           /* CTA orange if needed */
    --chip-bg:#eef2ff; --chip-fg:#1e3a8a; --chip-bd:#dbe4ff;
    --radius:22px; --radius-lg:28px; --shadow:0 16px 40px rgba(2,6,23,.08);
}

/* Page */
.blog-pro{ background:linear-gradient(180deg,var(--bg1),var(--bg2)); padding:0 0 56px }
.wrap{ width:min(1200px,92vw); margin:auto }

/* ===== FEATURED (Hero Card) ========================================== */
.feature-wrap{ background:linear-gradient(180deg,#eaf1ff,#f5f8ff); padding:18px 0 28px }
.feature-card{
    width:min(1200px,96vw); margin:auto; background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow);
}
.fc-media{ position:relative; height:300px }
.fc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.92) }
.fc-media::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(2,6,23,.35) 10%, rgba(2,6,23,.45) 60%, transparent 100%) }
.fc-badge{
    position:absolute; left:22px; top:18px; background:rgba(0,0,0,.55);
    color:#fff; font-weight:900; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.25)
}
.fc-title{
    position:absolute; left:22px; right:22px; bottom:20px;
    margin:0; color:#fff; font-weight:900; line-height:1.12; text-shadow:0 4px 18px rgba(0,0,0,.35);
    font-size:clamp(28px,4.6vw,56px);
}
.fc-body{ padding:20px 18px; display:flex; align-items:center; gap:16px; min-height:120px }
.fc-copy{ flex:1; display:flex; flex-direction:column; gap:12px }
.fc-dek{ margin:0; font-size:clamp(16px,1.7vw,20px); font-weight:800; color:var(--ink) }
.fc-tags, .fc-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:0; padding:0; list-style:none }
.fc-tags li{
    background:var(--chip-bg); color:var(--chip-fg); border:1px solid var(--chip-bd);
    padding:8px 12px; border-radius:999px; font-weight:900; display:flex; align-items:center; gap:8px
}
.fc-meta li{ color:var(--muted); font-weight:800; display:flex; align-items:center; gap:8px }
.avatar{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--brand-600); color:#fff; font-weight:900; font-size:12px }
.btn-cta{
    flex:0 0 auto; background:var(--brand-500); color:#fff; text-decoration:none;
    padding:14px 18px; border-radius:18px; font-weight:900; display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,.5); box-shadow:0 14px 28px color-mix(in oklab,var(--brand-500) 35%, transparent);
    transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-cta:hover{ transform:translateY(-2px); background:var(--brand-600);
    box-shadow:0 16px 34px color-mix(in oklab,var(--brand-600) 38%, transparent) }

@media (max-width:820px){ .fc-media{height:260px} .fc-body{flex-direction:column; align-items:flex-start} .btn-cta{width:100%; justify-content:center} }

/* ===== STICKY FILTER BAR ============================================= */
.bp-filters{
    position:sticky; top:0; z-index:6; margin-top:-20px; margin-bottom:18px; padding:10px 12px;
    border:1px solid var(--line); border-radius:var(--radius-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
    backdrop-filter:saturate(1.1) blur(8px); box-shadow:var(--shadow);
    display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ background:#f1f5f9; border:1px solid #e2e8f0; padding:8px 12px; border-radius:999px; font-weight:800; color:#0f172a; cursor:pointer }
.chip.is-active{ background:#eaf1ff; color:#1e40af; border-color:#c7d7ff }
.search{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 12px; min-width:220px }
.search svg{ width:18px; height:18px; color:#475569 } .search input{ border:0; outline:0; width:220px; max-width:38vw; font:inherit }

/* ===== LAYOUT ========================================================= */
.bp-layout{ display:grid; gap:18px; grid-template-columns:2fr 1fr }
@media (max-width:980px){ .bp-layout{ grid-template-columns:1fr } }

/* ===== GRID + CARDS =================================================== */
.bp-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr) }
@media (max-width:720px){ .bp-grid{ grid-template-columns:1fr } }

.bp-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s;
    display:flex; flex-direction:column;
}
.bp-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(2,6,23,.12) }
.bp-card .media{ aspect-ratio:10/7; background:#e2e8f0 }
.bp-card .media img{ width:100%; height:100%; object-fit:cover }
.bp-card .body{ padding:14px }
.tags{ display:flex; gap:8px; margin:0 0 8px; padding:0; list-style:none; flex-wrap:wrap }
.tags li{
    background:var(--chip-bg); color:var(--chip-fg); border:1px solid var(--chip-bd);
    padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px
}
.bp-card h3{ margin:0 0 8px; font-size:clamp(18px,2vw,22px); line-height:1.3 }
.bp-card h3 a{ color:var(--ink); text-decoration:none } .bp-card h3 a:hover{ color:var(--brand-600) }
.meta-sm{ display:flex; gap:12px; flex-wrap:wrap; list-style:none; margin:0; padding:0; color:#64748b; font-weight:700 }
.meta-sm .avatar{ background:var(--brand-600) }

/* ===== SIDEBAR ======================================================== */
.bp-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:92px; height:max-content }
.side-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow) }
.side-card h4{ margin:0 0 10px; font-size:16px; color:var(--ink); display:flex; align-items:center; gap:8px }
.side-card .dot{ width:8px; height:8px; border-radius:50%; background:#10b981 }
.side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.side-list li{ display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center }
.side-list img{ width:56px; height:56px; border-radius:12px; object-fit:cover }
.side-list a{ color:#0f172a; font-weight:900; text-decoration:none }
.side-list span{ display:block; color:#64748b; font-weight:700 }
.links{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.links a{ color:var(--brand-600); font-weight:900; text-decoration:none } .links a:hover{ text-decoration:underline }

/* ===== PAGER ========================================================== */
.bp-pager{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:18px }
.pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-weight:900 }
.page{ color:#475569; font-weight:800 }