/* ========= Tokens ========= */
:root{
    --ink:#0f172a; --muted:#667085; --line:rgba(15,23,42,.10);
    --card:#fff; --bg1:#eef3ff; --bg2:#f7f9ff;
    --brand-500:#2563eb; --brand-600:#1e47d7;          /* blue brand */
    --accent-500:#ff7a45;                               /* optional CTA */
    --chip-bg:#eef5ff; --chip-fg:#1343b0; --chip-bd:rgba(37,99,235,.25);
    --radius:20px; --radius-lg:24px; --shadow:0 16px 40px rgba(2,6,23,.08);
}

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

/* ========= Breadcrumbs ========= */
.crumbs{ display:flex; gap:10px; align-items:center; padding:10px 2px 8px; color:#475569; font-weight:800 }
.crumbs a{ color:#1f2a48; text-decoration:none }
.crumbs .current{ color:#64748b }

/* ========= Hero ========= */
.hero{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow) }
.hero-media{ position:relative; height:320px }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.95) }
.hero-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(2,6,23,.45) 30%, rgba(2,6,23,.2) 70%, transparent 100%);
}
.hero-title{
    position:absolute; left:20px; right:20px; bottom:18px; margin:0; color:#fff; font-weight:900;
    text-shadow:0 4px 18px rgba(0,0,0,.35); font-size:clamp(28px,4.6vw,56px); line-height:1.12;
}
.hero-body{ padding:16px 18px 18px }
.dek{ margin:0 0 10px; color:var(--ink); font-weight:800; font-size:clamp(16px,1.7vw,20px) }

.hero-meta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between }
.tags{ display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0 }
.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 }
.meta{ display:flex; gap:14px; flex-wrap:wrap; list-style:none; margin:0; padding:0; color:#475569; font-weight:800 }
.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 }

/* ========= Share ========= */
.share{ display:flex; align-items:center; gap:10px; margin:12px 0 14px }
.share .lbl{ font-weight:900; color:#0f172a }
.share-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:#fff; box-shadow:var(--shadow); display:grid; place-items:center; cursor:pointer;
    transition:transform .15s ease;
}
.share-btn:hover{ transform:translateY(-1px) }
.share-btn.ok{ background:#eafff1; }

/* ========= Grid ========= */
.grid{ display:grid; gap:18px; grid-template-columns:1.7fr .9fr }
@media (max-width:980px){ .grid{ grid-template-columns:1fr } }

/* ========= Article ========= */
.paper{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px
}
.paper h2{ margin:14px 0 8px; font-size:clamp(22px,2.4vw,32px); line-height:1.2 }
.paper h3{ margin:12px 0 6px; font-size:20px }
.paper p{ margin:0 0 1.2em; line-height:1.65; color:#0f1f3a }
.paper ul{ padding-left:1.2rem; margin:0 0 1em }
.paper hr{ border:0; border-top:1px solid var(--line); margin:22px 0 }

/* Author box */
.author{
    display:flex; align-items:center; gap:14px; background:#f7faff; border:1px solid var(--line); border-radius:14px; padding:14px
}
.author .avatar.big{ width:50px; height:50px; border-radius:50%; background:var(--brand-600); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900 }
.author .name{ font-weight:900; color:#0f172a }
.author .bio{ color:#64748b }

/* Related */
.related{ margin-top:16px }
.related h3{ margin:0 0 10px; font-weight:900; color:#0f2a5a; font-size:1.25rem }
.rels{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
.rel{
    background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
    text-decoration:none; transition:transform .25s, box-shadow .25s; color:inherit
}
.rel:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(2,6,23,.12) }
.rel .thumb{ aspect-ratio:16/10; background:#e5e7eb }
.rel .thumb img{ width:100%; height:100%; object-fit:cover }
.rel .title{ padding:12px 14px; font-weight:900; color:var(--ink); font-size:15px }
.rel:hover .title{ color:var(--brand-600) }

/* ========= Sidebar ========= */
.side{ display:flex; flex-direction:column; gap:14px; position:sticky; top:92px; height:max-content }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:16px }
.card h4{ margin:0 0 10px; font-size:15px; font-weight:900; color:var(--brand-600); text-transform:uppercase; letter-spacing:.04em }
.card p{ margin:0 0 10px; color:#475569 }
.subscribe{ display:flex; gap:8px }
.subscribe input{ flex:1; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit }
.subscribe button{ background:var(--brand-500); color:#fff; border:0; border-radius:12px; padding:12px 14px; font-weight:900 }

.recent{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.recent li{ display:grid; grid-template-columns:56px 1fr; gap:10px; align-items:center }
.recent img{ width:56px; height:56px; object-fit:cover; border-radius:12px }
.recent a{ font-weight:900; color:#0f172a; text-decoration:none }
.recent span{ display:block; color:#64748b; font-weight:700 }