:root{
    --p:#B5143A;--p-dark:#e63535;--p-mid:#C41E3A;
    --p-soft:#FDEAEE;--p-softer:#FEF5F7;--p-border:#F5C6CE;
    --gold:#C9963A;--gold-light:#FDF5E6;
    --text-h:#1C1A1B;--text-b:#3D3640;--text-m:#7A6E72;--text-l:#ADA3A7;
    --bg-white:#FFFFFF;--bg-section:#FAFAFA;
    --radius:14px;--radius-sm:8px;
    --shadow:0 2px 16px rgba(181,20,58,.07);
    --shadow-md:0 6px 28px rgba(181,20,58,.12);
    --trans:.22s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text-b);background:var(--bg-white)}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ── HERO ── */
.blog-hero{
    background:linear-gradient(135deg,var(--p-dark) 0%,#8C1428 45%,var(--p-mid) 100%);
    padding:72px 0 60px;color:#fff;text-align:center;
    position:relative;overflow:hidden;
}
.blog-hero::before{
    content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:700px;height:700px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none;
}
.blog-hero .container{position:relative;z-index:1}
.hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
    border-radius:50px;padding:5px 16px;font-size:.75rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);
    margin-bottom:18px;
}
.blog-hero h1{font-family:'Poppins',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;margin-bottom:14px}
.blog-hero p{font-size:1.05rem;color:rgba(255,255,255,.82);max-width:540px;margin:0 auto 22px}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.65)}
.breadcrumb a{color:rgba(255,255,255,.8);transition:color var(--trans)}
.breadcrumb a:hover{color:#fff}
.breadcrumb svg{opacity:.5}

/* ── CONTAINER ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── FILTER BAR ── */
.filter-bar{background:var(--bg-white);border-bottom:1px solid var(--p-border);position:sticky;top:0;z-index:90}
.filter-inner{display:flex;align-items:center;gap:8px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.filter-inner::-webkit-scrollbar{display:none}
.filter-btn{
    flex-shrink:0;padding:7px 18px;border-radius:50px;
    font-size:.82rem;font-weight:600;cursor:pointer;
    border:1.5px solid var(--p-border);background:var(--bg-white);
    color:var(--text-m);transition:all var(--trans);white-space:nowrap;
    text-decoration:none;display:inline-flex;align-items:center;
}
.filter-btn:hover,.filter-btn.active{
    background:var(--p);border-color:var(--p);color:#fff;
}
.filter-count{
    display:inline-flex;align-items:center;justify-content:center;
    width:18px;height:18px;border-radius:50%;background:rgba(26,26,26,.12);
    color:var(--p);font-size:.65rem;font-weight:700;margin-left:4px;
}
.filter-btn.active .filter-count{background:rgba(255,255,255,.25);color:#fff}

/* ── MAIN LAYOUT ── */
.blog-body{padding:56px 0 80px}
.blog-grid-wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}

/* ── POST CARDS ── */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{
    background:var(--bg-white);border:1.5px solid var(--p-border);
    border-radius:var(--radius);overflow:hidden;
    transition:all var(--trans);
    display:flex;flex-direction:column;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--p-mid)}
.post-thumb{
    aspect-ratio:16/9;overflow:hidden;
    background:linear-gradient(135deg,var(--p-softer),var(--p-soft));
    position:relative;
}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-thumb img{transform:scale(1.04)}
.post-thumb-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.post-thumb-placeholder svg{opacity:.25;color:var(--p)}
.post-cat{
    position:absolute;top:12px;left:12px;
    background:var(--p);color:#fff;border-radius:50px;
    padding:3px 12px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.post-body{padding:18px;flex:1;display:flex;flex-direction:column}
.post-meta{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--text-l);margin-bottom:8px}
.post-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--p-border)}
.post-title{
    font-family:'Poppins',sans-serif;font-size:.97rem;font-weight:700;
    color:var(--text-h);line-height:1.4;margin-bottom:8px;
    transition:color var(--trans);
}
.post-card:hover .post-title{color:var(--p)}
.post-excerpt{font-size:.84rem;color:var(--text-m);line-height:1.6;flex:1}
.post-footer{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:16px;padding-top:12px;border-top:1px solid var(--p-border);
}
.post-author{display:flex;align-items:center;gap:7px}
.author-avatar{
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,var(--p),var(--p-mid));
    display:flex;align-items:center;justify-content:center;
    font-size:.62rem;font-weight:700;color:#fff;flex-shrink:0;
}
.author-name{font-size:.75rem;font-weight:600;color:var(--text-b)}
.post-read-link{
    font-size:.75rem;font-weight:700;color:var(--p);
    display:flex;align-items:center;gap:4px;transition:gap var(--trans);
}
.post-card:hover .post-read-link{gap:8px}

/* ── PAGINATION ── */
.pag-wrap nav { display:flex; justify-content:center; margin-top:44px; }
.pag-wrap nav > div { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.pag-wrap span[aria-current] span,
.pag-wrap a {
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 10px;border-radius:8px;
    font-size:.85rem;font-weight:600;text-decoration:none;
    border:1.5px solid var(--p-border);color:var(--text-m);
    transition:all .22s ease;
}
.pag-wrap a:hover { background:var(--p);border-color:var(--p);color:#fff; }
.pag-wrap span[aria-current] span { background:var(--p);border-color:var(--p);color:#fff; }
.pag-wrap span:not([aria-current]) span { color:var(--text-l);border-color:transparent; }

/* ── SIDEBAR ── */
.sidebar{display:flex;flex-direction:column;gap:28px}
.sidebar-card{
    background:var(--bg-white);border:1.5px solid var(--p-border);
    border-radius:var(--radius);overflow:hidden;
}
.sidebar-head{
    padding:16px 20px;border-bottom:1px solid var(--p-border);
    font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:700;color:var(--text-h);
    display:flex;align-items:center;gap:8px;
}
.sidebar-head svg{color:var(--p)}
.sidebar-body{padding:16px 20px}

/* Search */
.search-wrap{position:relative}
.search-wrap input{
    width:100%;padding:10px 40px 10px 14px;
    border:1.5px solid var(--p-border);border-radius:var(--radius-sm);
    font-size:.88rem;color:var(--text-h);background:var(--bg-section);
    outline:none;transition:border-color var(--trans);
}
.search-wrap input:focus{border-color:var(--p);background:#fff}
.search-wrap button{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:var(--text-m);
    transition:color var(--trans);padding:2px;
}
.search-wrap button:hover{color:var(--p)}

/* Categories */
.cat-list{display:flex;flex-direction:column;gap:0}
.cat-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 0;border-bottom:1px solid var(--p-border);
    font-size:.88rem;color:var(--text-b);transition:color var(--trans);
    text-decoration:none;
}
.cat-item:last-child{border-bottom:none}
.cat-item:hover{color:var(--p)}
.cat-item.active{color:var(--p);font-weight:700}
.cat-item span:first-child{display:flex;align-items:center;gap:8px}
.cat-dot{width:6px;height:6px;border-radius:50%;background:var(--p);flex-shrink:0}
.cat-num{
    background:var(--p-soft);color:var(--p);border-radius:50px;
    padding:1px 8px;font-size:.72rem;font-weight:700;
}

/* Popular posts */
.pop-list{display:flex;flex-direction:column;gap:14px}
.pop-item{display:flex;gap:12px;align-items:flex-start}
.pop-thumb{
    width:64px;height:52px;border-radius:var(--radius-sm);flex-shrink:0;overflow:hidden;
    background:linear-gradient(135deg,var(--p-softer),var(--p-soft));
}
.pop-thumb img{width:100%;height:100%;object-fit:cover}
.pop-info{}
.pop-title{font-size:.83rem;font-weight:700;color:var(--text-h);line-height:1.4;margin-bottom:3px;transition:color var(--trans)}
.pop-item:hover .pop-title{color:var(--p)}
.pop-date{font-size:.72rem;color:var(--text-l)}

/* Tags cloud */
.tags-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag-pill{
    background:var(--bg-section);border:1.5px solid var(--p-border);
    border-radius:50px;padding:5px 12px;font-size:.76rem;font-weight:600;
    color:var(--text-m);transition:all var(--trans);
    text-decoration:none;display:inline-block;
}
.tag-pill:hover{background:var(--p-soft);border-color:var(--p);color:var(--p)}

/* Newsletter sidebar card */
.nl-card{background:linear-gradient(135deg,var(--p-dark),var(--p));color:#fff;border:none}
.nl-card .sidebar-head{border-bottom-color:rgba(255,255,255,.2);color:#fff}
.nl-card .sidebar-head svg{color:rgba(255,255,255,.8)}
.nl-body{padding:16px 20px 20px}
.nl-body p{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.55;margin-bottom:14px}
.nl-form{display:flex;flex-direction:column;gap:8px}
.nl-form input{
    padding:10px 14px;border-radius:var(--radius-sm);border:none;
    font-size:.85rem;outline:none;background:rgba(255,255,255,.15);
    color:#fff;
}
.nl-form input::placeholder{color:rgba(255,255,255,.55)}
.nl-form input:focus{background:rgba(255,255,255,.22)}
.nl-form button{
    padding:10px;border-radius:var(--radius-sm);border:none;
    background:var(--gold);color:#fff;font-size:.85rem;font-weight:700;
    cursor:pointer;transition:background var(--trans);
}
.nl-form button:hover{background:#b8842e}

/* ── FADE-UP ANIMATION ── */
.fu{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.fu.in{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
    .blog-grid-wrap{grid-template-columns:1fr}
    .sidebar{display:grid;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .posts-grid{grid-template-columns:repeat(2,1fr)}
    .sidebar{grid-template-columns:1fr}
}
@media(max-width:480px){
    .posts-grid{grid-template-columns:1fr}
    .blog-hero{padding:52px 0 44px}
}