/* ===================================================
   BLOG DETAIL PAGE — LOCAL STYLES
   =================================================== */

/* Reading progress */
.reading-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #2646cc, #22c55e);
    z-index: 10000; transition: width .08s linear; border-radius: 0 3px 3px 0;
}

/* ── Hero ── */
.bdt-hero {
    position: relative; overflow: hidden; min-height: 52vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 50%, #dce6ff 100%);
    display: flex; align-items: flex-end;
}
.bdt-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(26,47,122,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(26,47,122,.05) 1px,transparent 1px);
    background-size: 52px 52px;
}
.bdt-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); }
.bdt-glow--1 { top:-80px; right:-80px; width:380px; height:380px; background:rgba(58,95,232,.12); }
.bdt-glow--2 { bottom:-60px; left:-60px; width:280px; height:280px; background:rgba(124,58,237,.08); }
.bdt-hero-inner {
    position: relative; z-index: 2; width: 100%; max-width: 80rem;
    margin: 0 auto; padding: 0 1.5rem; padding-top: 130px; padding-bottom: 60px;
}
.bdt-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.bdt-breadcrumb a { color: #9ca3af; font-size: .76rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.bdt-breadcrumb a:hover { color: #1a2f7a; }
.bdt-breadcrumb-sep { color: #d1d5db; font-size: .72rem; }
.bdt-breadcrumb-cur { color: #4b5563; font-size: .76rem; font-weight: 600; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bdt-cat-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(26,47,122,.08); border: 1px solid rgba(26,47,122,.2);
    border-radius: 100px; padding: 4px 14px; font-size: .7rem; font-weight: 700;
    color: #1a2f7a; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
    backdrop-filter: blur(6px);
}
.bdt-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; color: #1a2f7a; line-height: 1.2; margin: 0 0 22px; max-width: 820px; }
.bdt-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bdt-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#1a2f7a,#2646cc); border: 1.5px solid rgba(26,47,122,.2); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 900; color: white; flex-shrink: 0; }
.bdt-author-name { font-size: .88rem; font-weight: 700; color: #1a2f7a; }
.bdt-author-label { font-size: .7rem; color: #6b7280; }
.bdt-meta-sep { width: 1px; height: 28px; background: rgba(26,47,122,.15); }
.bdt-meta-item { text-align: center; }
.bdt-meta-val { font-size: .82rem; font-weight: 700; color: #1a2f7a; }
.bdt-meta-key { font-size: .66rem; color: #9ca3af; }
.bdt-hero-wave { position: absolute; bottom: 0; left: 0; right: 0; }
.bdt-hero-wave svg { display: block; width: 100%; height: 50px; }

/* ── Tags strip ── */
.bdt-tags-strip { background: #f8f9ff; border-bottom: 1px solid #e8eeff; padding: 14px 0; }
.bdt-tags-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bdt-tag { display: inline-flex; align-items: center; gap: 5px; background: white; border: 1.5px solid #e8eeff; border-radius: 100px; padding: 4px 13px; font-size: .73rem; font-weight: 600; color: #4b5563; transition: all .2s; cursor: default; }
.bdt-tag:hover { border-color: rgba(38,70,204,.3); color: #2646cc; }
.bdt-tag i { font-size: .6rem; color: #9ca3af; }
.bdt-tags-label { font-size: .72rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }

/* ── Body layout ── */
.bdt-body { padding: 60px 0 80px; background: white; }
.bdt-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
@media(max-width:1024px){ .bdt-layout{ grid-template-columns:1fr; } }

/* ── Prose (article content) ── */
.bdt-prose { max-width: 760px; }
.bdt-prose .blg-lead { font-size: 1.08rem; color: #374151; line-height: 1.9; font-weight: 400; padding: 20px 22px; background: #f8f9ff; border-left: 3px solid #2646cc; border-radius: 0 12px 12px 0; margin-bottom: 28px; }
.bdt-prose h2 { font-size: 1.35rem; font-weight: 900; color: #1a2f7a; margin: 38px 0 14px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.bdt-prose h2:first-of-type { border-top: none; }
.bdt-prose h3 { font-size: 1.05rem; font-weight: 800; color: #1a2f7a; margin: 24px 0 10px; }
.bdt-prose p { color: #4b5563; line-height: 1.88; margin: 0 0 16px; font-size: .96rem; }
.bdt-prose ul, .bdt-prose ol { color: #4b5563; line-height: 1.8; padding-left: 22px; margin: 0 0 18px; }
.bdt-prose li { margin-bottom: 8px; font-size: .95rem; }
.bdt-prose li strong { color: #1a2f7a; }
.bdt-prose pre { background: #0f172a; border-radius: 14px; padding: 22px 24px; overflow-x: auto; margin: 22px 0; border: 1px solid #1e293b; }
.bdt-prose pre code { color: #e2e8f0; font-family: 'Courier New', 'Consolas', monospace; font-size: .83rem; line-height: 1.7; }
.bdt-prose :not(pre) > code { background: #e8eeff; color: #2646cc; border-radius: 5px; padding: 2px 7px; font-size: .88em; font-family: 'Courier New', 'Consolas', monospace; }
.bdt-prose blockquote { border-left: 3px solid #2646cc; background: linear-gradient(135deg,#f0f4ff,#e8eeff); border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 24px 0; }
.bdt-prose blockquote p { color: #1a2f7a; font-style: italic; font-weight: 600; margin: 0; font-size: 1rem; }
.bdt-prose strong { color: #1a2f7a; font-weight: 700; }
.bdt-prose a { color: #2646cc; text-decoration: underline; text-decoration-color: rgba(38,70,204,.3); transition: text-decoration-color .2s; }
.bdt-prose a:hover { text-decoration-color: #2646cc; }

/* Share row (below article) */
.bdt-share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid #f0f0f0; }
.bdt-share-label { font-size: .78rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .08em; }
.bdt-share-btn { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 9px; font-size: .8rem; font-weight: 700; text-decoration: none; transition: all .2s; }
.bdt-share-btn:hover { transform: translateY(-2px); }
.bdt-share-fb { background: #e7f0fd; color: #1877f2; }
.bdt-share-fb:hover { background: #1877f2; color: white; }
.bdt-share-tw { background: #e7f4fd; color: #1da1f2; }
.bdt-share-tw:hover { background: #1da1f2; color: white; }
.bdt-share-ln { background: #e7f0fb; color: #0a66c2; }
.bdt-share-ln:hover { background: #0a66c2; color: white; }
.bdt-share-wa { background: #e8f8ee; color: #16a34a; }
.bdt-share-wa:hover { background: #16a34a; color: white; }
.bdt-copy-btn { background: #f3f4f6; color: #6b7280; display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 9px; font-size: .8rem; font-weight: 700; border: none; cursor: pointer; transition: all .2s; }
.bdt-copy-btn:hover { background: #e8eeff; color: #2646cc; transform: translateY(-2px); }

/* Prev/Next */
.bdt-nav-section { padding: 50px 0; background: #f8f9ff; border-top: 1px solid #e8eeff; border-bottom: 1px solid #e8eeff; }
.bdt-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width:640px){ .bdt-nav-grid{ grid-template-columns:1fr; } }
.bdt-nav-card { display: flex; gap: 14px; align-items: center; background: white; border: 1.5px solid #e8eeff; border-radius: 16px; padding: 18px 20px; text-decoration: none; transition: all .25s; }
.bdt-nav-card:hover { border-color: rgba(38,70,204,.25); box-shadow: 0 8px 24px rgba(26,47,122,.08); transform: translateY(-3px); }
.bdt-nav-arrow { width: 38px; height: 38px; border-radius: 11px; background: #e8eeff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; }
.bdt-nav-card:hover .bdt-nav-arrow { background: #2646cc; }
.bdt-nav-arrow i { color: #2646cc; font-size: .85rem; transition: color .2s; }
.bdt-nav-card:hover .bdt-nav-arrow i { color: white; }
.bdt-nav-dir { font-size: .68rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.bdt-nav-title { font-size: .88rem; font-weight: 800; color: #1a2f7a; line-height: 1.35; }
.bdt-nav-right { justify-content: flex-end; text-align: right; }
.bdt-nav-placeholder { background: white; border: 1.5px dashed #e8eeff; border-radius: 16px; padding: 18px 20px; }

/* ── Sidebar ── */
.bdt-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
@media(max-width:1024px){ .bdt-sidebar{ position:static; } }

.bdt-sidebar-card { background: white; border: 1.5px solid #e8eeff; border-radius: 18px; padding: 22px; }
.bdt-sidebar-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #9ca3af; margin-bottom: 14px; display: flex; align-items: center; gap: 7px; }
.bdt-sidebar-title i { color: #2646cc; font-size: .72rem; }

/* TOC */
.bdt-toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.bdt-toc-link { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-radius: 9px; text-decoration: none; font-size: .82rem; color: #6b7280; font-weight: 600; transition: all .2s; line-height: 1.4; }
.bdt-toc-link:hover, .bdt-toc-link.active { background: #e8eeff; color: #2646cc; }
.bdt-toc-link::before { content: ''; width: 5px; height: 5px; background: #d1d5db; border-radius: 50%; flex-shrink: 0; margin-top: 7px; transition: background .2s; }
.bdt-toc-link.active::before { background: #2646cc; }

/* Article info */
.bdt-info-rows { display: flex; flex-direction: column; gap: 10px; }
.bdt-info-row { display: flex; align-items: center; justify-content: space-between; }
.bdt-info-key { font-size: .76rem; color: #9ca3af; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.bdt-info-key i { font-size: .68rem; }
.bdt-info-val { font-size: .8rem; color: #374151; font-weight: 700; }

/* Sidebar share */
.bdt-sb-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bdt-sb-share-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 10px; font-size: .76rem; font-weight: 700; text-decoration: none; transition: all .2s; }
.bdt-sb-share-btn:hover { transform: translateY(-2px); }
.bdt-sb-fb { background: #e7f0fd; color: #1877f2; }
.bdt-sb-fb:hover { background: #1877f2; color: white; }
.bdt-sb-tw { background: #e7f4fd; color: #1da1f2; }
.bdt-sb-tw:hover { background: #1da1f2; color: white; }
.bdt-sb-ln { background: #e7f0fb; color: #0a66c2; }
.bdt-sb-ln:hover { background: #0a66c2; color: white; }
.bdt-sb-wa { background: #e8f8ee; color: #16a34a; }
.bdt-sb-wa:hover { background: #16a34a; color: white; }

/* ── Author card ── */
.bdt-author-section { padding: 60px 0; background: linear-gradient(135deg,#f8f9ff,#f0f4ff); }
.bdt-author-card { background: white; border: 1.5px solid #e8eeff; border-radius: 22px; padding: 32px 36px; display: flex; gap: 24px; align-items: flex-start; max-width: 760px; box-shadow: 0 6px 28px rgba(26,47,122,.06); }
@media(max-width:560px){ .bdt-author-card{ flex-direction:column; gap:18px; padding:24px; } }
.bdt-author-ava { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#1a2f7a,#2646cc); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: white; flex-shrink: 0; box-shadow: 0 6px 18px rgba(38,70,204,.3); }
.bdt-author-name2 { font-size: 1.05rem; font-weight: 900; color: #1a2f7a; margin-bottom: 3px; }
.bdt-author-role { font-size: .76rem; font-weight: 700; color: #2646cc; margin-bottom: 12px; }
.bdt-author-bio { color: #6b7280; font-size: .88rem; line-height: 1.75; margin-bottom: 16px; }
.bdt-author-socials { display: flex; gap: 8px; }
.bdt-author-social { width: 32px; height: 32px; border-radius: 9px; background: #e8eeff; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all .2s; }
.bdt-author-social:hover { background: #2646cc; }
.bdt-author-social i { color: #2646cc; font-size: .75rem; transition: color .2s; }
.bdt-author-social:hover i { color: white; }
.bdt-author-written { font-size: .72rem; color: #9ca3af; margin-top: 6px; }

/* ── Related posts ── */
.bdt-related-section { padding: 70px 0 90px; background: white; }
.bdt-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media(max-width:900px){ .bdt-related-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .bdt-related-grid{ grid-template-columns:1fr; } }
.bdt-rel-card { border-radius: 18px; border: 1.5px solid #f0f0f0; overflow: hidden; text-decoration: none; display: block; transition: all .3s; }
.bdt-rel-card:hover { transform: translateY(-5px); border-color: var(--bd); box-shadow: 0 16px 42px var(--shadow); }
.bdt-rel-visual { height: 130px; background: linear-gradient(135deg,var(--g1),var(--g2)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.bdt-rel-icon-bg { position: absolute; font-size: 5rem; opacity: .12; }
.bdt-rel-icon-fg { font-size: 2rem; position: relative; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.bdt-rel-body { padding: 16px 18px; }
.bdt-rel-cat { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--clr); margin-bottom: 7px; }
.bdt-rel-title { font-size: .88rem; font-weight: 800; color: #1a2f7a; line-height: 1.4; margin-bottom: 10px; }
.bdt-rel-meta { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: #9ca3af; }
.bdt-rel-meta i { font-size: .6rem; }

/* ── CTA ── */
.bdt-cta { padding: 80px 0; position: relative; overflow: hidden; background: linear-gradient(135deg,#0d1b4b,#1a2f7a 55%,#2646cc); }
.bdt-cta-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); }
.bdt-cta-glow--1 { top:-70px; right:-70px; width:360px; height:360px; background:rgba(58,95,232,.18); }
.bdt-cta-glow--2 { bottom:-70px; left:-70px; width:280px; height:280px; background:rgba(124,58,237,.18); }
.bdt-cta-inner { position: relative; z-index: 2; text-align: center; max-width: 560px; margin: 0 auto; padding: 0 1.5rem; }
.bdt-cta-label { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 5px 16px; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.bdt-cta-title { font-size: clamp(1.6rem,3.5vw,2.3rem); font-weight: 900; color: white; line-height: 1.2; margin: 0 0 12px; }
.bdt-cta-desc { color: rgba(255,255,255,.62); font-size: .92rem; line-height: 1.75; margin: 0 0 30px; }
.bdt-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.bdt-cta-btn-m { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg,#22c55e,#16a34a); color: white; font-weight: 700; font-size: .9rem; padding: 13px 26px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 16px rgba(34,197,94,.35); transition: all .25s; }
.bdt-cta-btn-m:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,.45); }
.bdt-cta-btn-s { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.22); color: white; font-weight: 700; font-size: .9rem; padding: 12px 24px; border-radius: 12px; text-decoration: none; transition: all .25s; }
.bdt-cta-btn-s:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }