/* ============================================================
   VoxiaFlow Blog — Public Styles (v2)
   ============================================================ */

/* ── Hero Blog ────────────────────────────────────────────── */
.blog-hero{
    padding:120px 0 60px;
    background:linear-gradient(135deg,#0B1020 0%,#131827 100%);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.blog-hero h1{font-size:2.4rem;font-weight:800;color:#fff;}
.blog-hero .lead{color:rgba(255,255,255,.55);font-size:1rem;max-width:600px;}

/* ── Category pill (reusable) ────────────────────────────── */
.blog-cat-pill{
    font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    padding:4px 12px;border-radius:6px;display:inline-block;
    background:color-mix(in srgb, var(--cat-color,#6366F1) 18%, transparent);
    color:var(--cat-color,#818CF8);
}
.blog-type-pill{
    font-size:.68rem;padding:3px 8px;border-radius:4px;font-weight:600;
    background:rgba(139,92,246,.12);color:#A78BFA;
}

/* ── Category filter pills ───────────────────────────────── */
.blog-pill{
    font-size:.82rem;font-weight:600;padding:6px 16px;border-radius:20px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.6);text-decoration:none;transition:.2s;
    display:inline-flex;align-items:center;gap:6px;
}
.blog-pill:hover{background:rgba(99,102,241,.12);color:#818CF8;border-color:rgba(99,102,241,.3);}
.blog-pill.active{background:#6366F1;color:#fff;border-color:#6366F1;}
.blog-pill-count{
    font-size:.7rem;background:rgba(255,255,255,.15);padding:1px 7px;border-radius:10px;
}
.blog-pill.active .blog-pill-count{background:rgba(255,255,255,.25);}

/* ── Meta row ────────────────────────────────────────────── */
.blog-card-meta-row{
    display:flex;align-items:center;gap:14px;font-size:.78rem;
    color:rgba(255,255,255,.4);
}
.blog-card-meta-row i{margin-right:3px;}

/* ══════════════════════════════════════════════════════════════
   FEATURED — Main (left, tall)
   ══════════════════════════════════════════════════════════════ */
.blog-feat-main{
    background:linear-gradient(145deg,rgba(99,102,241,.06),rgba(139,92,246,.04));
    border:1px solid rgba(99,102,241,.18);border-radius:20px;overflow:hidden;
    display:flex;flex-direction:column;transition:.3s;position:relative;
}
.blog-feat-main:hover{box-shadow:0 20px 60px rgba(99,102,241,.15);transform:translateY(-4px);}
.blog-feat-main .blog-feat-img{
    width:100%;height:260px;overflow:hidden;position:relative;
}
.blog-feat-main .blog-feat-img img{width:100%;height:100%;object-fit:cover;}
.blog-feat-main .blog-feat-content{
    padding:28px 28px 24px;flex:1;display:flex;flex-direction:column;
}
.blog-feat-main h2{
    font-size:1.5rem;font-weight:800;color:#fff;margin:10px 0 8px;line-height:1.35;
}
.blog-feat-excerpt{
    font-size:.92rem;color:rgba(255,255,255,.55);line-height:1.65;flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:14px;
}

/* Placeholder gradient quand pas d'image */
.blog-feat-placeholder{
    background:linear-gradient(135deg,#1e225a 0%,#2a1f5e 50%,#1a2755 100%);
    display:flex;align-items:center;justify-content:center;
}
.blog-feat-placeholder i{font-size:3.5rem;color:rgba(255,255,255,.1);}

/* ══════════════════════════════════════════════════════════════
   FEATURED — Side cards (right, stacked)
   ══════════════════════════════════════════════════════════════ */
.blog-feat-side{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
    border-radius:16px;overflow:hidden;transition:.3s;
}
.blog-feat-side:hover{box-shadow:0 12px 40px rgba(0,0,0,.2);transform:translateY(-3px);}
.blog-feat-side-img{
    width:160px;min-height:100%;flex-shrink:0;overflow:hidden;position:relative;
}
.blog-feat-side-img img{width:100%;height:100%;object-fit:cover;}
.blog-feat-placeholder-sm{
    background:linear-gradient(135deg,#1e225a,#2a1f5e);
    display:flex;align-items:center;justify-content:center;
}
.blog-feat-placeholder-sm i{font-size:2rem;color:rgba(255,255,255,.1);}
.blog-feat-side-body{
    padding:20px;flex:1;display:flex;flex-direction:column;justify-content:center;
}
.blog-feat-side-body h3{
    font-size:1.05rem;font-weight:700;color:#fff;line-height:1.4;margin:8px 0 10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media(max-width:991px){
    .blog-feat-side{flex-direction:column;}
    .blog-feat-side-img{width:100%;height:160px;}
}
@media(max-width:768px){
    .blog-feat-main .blog-feat-img{height:200px;}
}

/* ══════════════════════════════════════════════════════════════
   POST CARDS — Grid listing
   ══════════════════════════════════════════════════════════════ */
.blog-card{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
    border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;
    display:flex;flex-direction:column;height:100%;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.25);}

.blog-card-img-wrap{
    width:100%;height:180px;overflow:hidden;position:relative;
}
.blog-card-img-wrap img{width:100%;height:100%;object-fit:cover;}

/* Placeholder quand pas d'image */
.blog-card-placeholder{
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.blog-card-placeholder i{font-size:2.5rem;color:rgba(255,255,255,.08);}

.blog-card-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;}
.blog-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.blog-card-title{
    font-size:1.05rem;font-weight:700;color:#fff;
    margin-bottom:8px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-excerpt{
    font-size:.86rem;color:rgba(255,255,255,.5);line-height:1.6;flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:14px;margin-top:auto;border-top:1px solid rgba(255,255,255,.06);
    font-size:.78rem;color:rgba(255,255,255,.35);
}
.blog-card-footer i{margin-right:3px;}

/* ── Sidebar ──────────────────────────────────────────────── */
.blog-sidebar-section{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
    border-radius:14px;padding:20px;margin-bottom:20px;
}
.blog-sidebar-title{
    font-size:.85rem;font-weight:700;color:#fff;margin-bottom:14px;
    text-transform:uppercase;letter-spacing:.04em;
}

/* Recent posts in sidebar */
.blog-recent-item{
    display:flex;gap:12px;text-decoration:none;padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.05);transition:.15s;
}
.blog-recent-item:last-child{border-bottom:none;}
.blog-recent-item:hover{padding-left:4px;}
.blog-recent-thumb{
    width:56px;height:44px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
}
.blog-recent-thumb i{font-size:1.1rem;color:rgba(255,255,255,.15);}
.blog-recent-info h6{
    color:#fff;font-size:.82rem;font-weight:600;margin:0 0 3px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-recent-info small{color:rgba(255,255,255,.35);font-size:.72rem;}

/* Tags */
.blog-tag-cloud{display:flex;flex-wrap:wrap;gap:6px;}
.blog-tag{
    font-size:.75rem;padding:4px 12px;border-radius:20px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);text-decoration:none;transition:.2s;
}
.blog-tag:hover{background:rgba(99,102,241,.15);color:#818CF8;border-color:rgba(99,102,241,.3);}

/* Newsletter card */
.blog-newsletter-card{
    background:linear-gradient(145deg,rgba(99,102,241,.1),rgba(139,92,246,.06));
    border:1px solid rgba(99,102,241,.2);text-align:center;
}
.blog-newsletter-card h4{color:#fff;font-weight:700;font-size:.92rem;margin-bottom:8px;}
.blog-newsletter-card p{color:rgba(255,255,255,.5);font-size:.85rem;margin-bottom:14px;}
.blog-newsletter-card input{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    color:#fff;border-radius:8px;
}
.blog-newsletter-card input::placeholder{color:rgba(255,255,255,.3);}
.blog-nl-btn{
    background:#6366F1;color:#fff;border:none;font-weight:600;border-radius:8px;
    padding:8px 16px;transition:.2s;
}
.blog-nl-btn:hover{background:#4F46E5;color:#fff;}

/* ── Pagination ──────────────────────────────────────────── */
.blog-pagination .page-link{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.6);padding:8px 14px;border-radius:8px;margin:0 3px;
}
.blog-pagination .page-link:hover{background:rgba(99,102,241,.15);color:#818CF8;}
.blog-pagination .page-item.active .page-link{
    background:#6366F1;color:#fff;border-color:#6366F1;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE SINGLE
   ══════════════════════════════════════════════════════════════ */
.blog-article{padding:100px 0 60px;}
.blog-article-header{margin-bottom:32px;}
.blog-article-title{font-size:2.2rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:16px;}
.blog-article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:rgba(255,255,255,.45);font-size:.88rem;}

.blog-article-content{
    color:rgba(255,255,255,.75);font-size:1.02rem;line-height:1.85;
}
.blog-article-content h2{font-size:1.5rem;font-weight:700;color:#fff;margin:32px 0 14px;}
.blog-article-content h3{font-size:1.25rem;font-weight:600;color:#fff;margin:24px 0 10px;}
.blog-article-content p{margin-bottom:18px;}
.blog-article-content img{max-width:100%;border-radius:12px;margin:20px 0;}
.blog-article-content a{color:#818CF8;text-decoration:underline;}
.blog-article-content blockquote{
    border-left:4px solid #6366F1;padding:16px 20px;margin:24px 0;
    background:rgba(99,102,241,.06);border-radius:0 10px 10px 0;
    font-style:italic;color:rgba(255,255,255,.6);
}
.blog-article-content code{
    background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;
    font-size:.9em;color:#A78BFA;
}
.blog-article-content pre{
    background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
    border-radius:10px;padding:20px;overflow-x:auto;margin:20px 0;
}
.blog-article-content pre code{background:none;padding:0;color:rgba(255,255,255,.7);}
.blog-article-content ul,.blog-article-content ol{margin:16px 0;padding-left:24px;}
.blog-article-content li{margin-bottom:8px;}
.blog-article-content table{width:100%;border-collapse:collapse;margin:20px 0;}
.blog-article-content th,.blog-article-content td{
    padding:10px 14px;border:1px solid rgba(255,255,255,.1);font-size:.9rem;
}
.blog-article-content th{background:rgba(255,255,255,.04);font-weight:600;color:#fff;}

/* ── Tags article ────────────────────────────────────────── */
.blog-article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;}

/* ── Comments ────────────────────────────────────────────── */
.blog-comments{
    background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
    border-radius:16px;padding:28px;margin-top:40px;
}
.blog-comment{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.blog-comment:last-child{border-bottom:none;}
.blog-comment-author{font-weight:600;color:#fff;font-size:.92rem;}
.blog-comment-date{font-size:.78rem;color:rgba(255,255,255,.35);}
.blog-comment-text{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:8px;line-height:1.6;}

/* ── Related posts ───────────────────────────────────────── */
.blog-related{margin:48px 0 0;}
.blog-related h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:20px;}

/* ── Breadcrumb ──────────────────────────────────────────── */
.blog-breadcrumb{padding:8px 0;font-size:.82rem;}
.blog-breadcrumb a{color:rgba(255,255,255,.45);text-decoration:none;}
.blog-breadcrumb a:hover{color:#818CF8;}
.blog-breadcrumb .separator{color:rgba(255,255,255,.2);margin:0 6px;}
.blog-breadcrumb .current{color:rgba(255,255,255,.7);}