/* ============================================================
   BLOG DETAIL  —  blog-detail.css  v=20260526
   Visual model: About page  (ab-* system in style.css)
   Dark green #080c08 · Neon lime #b4ff3c · Grid pattern
   Scoped to  .blog-detail-page / .single-blog-page
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   0. BODY OVERRIDE  (beats style.css body{background:#fff})
───────────────────────────────────────────────────────── */
body:has(.blog-detail-page),
body:has(.single-blog-page) {
  background: #080c08 !important;
  color: #ffffff   !important;
}
body.single-blog-page {
  background: #080c08 !important;
  color: #ffffff   !important;
}
.blog-detail-page,
.single-blog-page {
  background: #080c08;
  color: #ffffff;
  min-height: 100vh;
}
/* kill global reveal so it doesn't fight ours */
.blog-detail-page .ui-reveal,
.single-blog-page .ui-reveal { opacity:1!important; transform:none!important; }
/* kill style.css p color override inside this page */
.blog-detail-page p,
.single-blog-page p { color: rgba(220,240,210,.78); }
.blog-detail-page h1,
.blog-detail-page h2,
.blog-detail-page h3,
.blog-detail-page h4,
.single-blog-page h1,
.single-blog-page h2,
.single-blog-page h3,
.single-blog-page h4 { color: #ffffff; }

/* ─────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (mirrors ab-* palette)
───────────────────────────────────────────────────────── */
.blog-detail-page {
  --lime:        #b4ff3c;
  --lime2:       #c8ff5a;
  --dark:        #080c08;
  --dark2:       #0a100a;
  --border:      rgba(180,255,60,.12);
  --border-h:    rgba(180,255,60,.30);
  --muted:       rgba(200,230,180,.72);
  --text:        rgba(220,240,210,.78);
  --glow-sm:     0 0 28px rgba(180,255,60,.38);
  --glow-md:     0 0 48px rgba(180,255,60,.55);
  --shadow:      0 24px 58px rgba(0,0,0,.28);
  --radius:      20px;
  --ease:        cubic-bezier(.22,1,.36,1);
}

/* ─────────────────────────────────────────────────────────
   2. KEYFRAMES
───────────────────────────────────────────────────────── */
@keyframes bdFadeUp   { from{opacity:0;transform:translateY(44px)} to{opacity:1;transform:translateY(0)} }
@keyframes bdGlowPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);   opacity:.7}
  50%    {transform:translate(-50%,-50%) scale(1.18);opacity:1 }
}
@keyframes bdGridDrift{ from{background-position:0 0} to{background-position:56px 56px} }
@keyframes bdBarIn    { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ─────────────────────────────────────────────────────────
   3. SHARED GRID BACKGROUND MIXIN  (same as ab-section__grid-bg)
───────────────────────────────────────────────────────── */
.bd-grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(180,255,60,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(180,255,60,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  animation:bdGridDrift 20s linear infinite;
}

/* ─────────────────────────────────────────────────────────
   4. CONTAINER
───────────────────────────────────────────────────────── */
.bd-container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.bd-hero .bd-container { width: min(860px, calc(100% - 48px)); text-align: center; }

/* ─────────────────────────────────────────────────────────
   5. HERO  (mirrors ab-banner)
───────────────────────────────────────────────────────── */
.bd-hero {
  position: relative;
  padding: 130px 0 0;
  text-align: center;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* grid pattern */
.bd-hero::after {
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(180,255,60,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(180,255,60,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  animation:bdGridDrift 20s linear infinite;
}

/* green glow orb — same as ab-banner__glow */
.bd-hero::before {
  content:'';
  position:absolute;
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle,rgba(180,255,60,.14) 0%,transparent 65%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  animation:bdGlowPulse 7s ease-in-out infinite;
}

/* category badge */
.bd-category {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  color:var(--lime);
  background:rgba(180,255,60,.08);
  border:1px solid rgba(180,255,60,.22);
  padding:6px 18px; border-radius:999px;
  margin-bottom:22px;
}

/* title */
.bd-title,
.bd-hero h1 {
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  font-weight:900; color:#fff; line-height:1.18;
  margin:0 auto 20px;
  max-width:820px;
  text-shadow:0 0 60px rgba(180,255,60,.18);
  animation:bdFadeUp .85s var(--ease) both;
}

/* meta row */
.bd-meta {
  font-size:13px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
  margin-bottom:40px;
}
.bd-meta span { display:flex; align-items:center; gap:6px; }
.bd-meta i    { color:var(--lime); }

/* full-width hero image strip below meta */
.bd-hero-img-wrap {
  position:relative;
  width:100%;
  max-height:520px;
  overflow:hidden;
  border-top:1px solid var(--border);
}
.bd-hero-img-wrap img {
  width:100%;
  height:360px;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .9s ease;
}
.bd-hero-img-wrap:hover img { transform:scale(1.03); }
.bd-hero-img-wrap::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,12,8,.72) 100%);
  pointer-events:none;
}

/* ─────────────────────────────────────────────────────────
   6. LAYOUT  (content + sidebar)
───────────────────────────────────────────────────────── */
.bd-layout {
  position:relative;
  padding:56px 0 100px;
  background:var(--dark);
  overflow:hidden;
}

/* subtle grid on body section */
.bd-layout::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(180,255,60,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(180,255,60,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}

.bd-layout > .bd-container {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:36px; align-items:start;
}

/* named grid alias — when bd-container and bd-layout-grid are the same element */
.bd-layout-grid {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
  gap:36px;
  align-items:start;
  width:100%;
}

/* ─────────────────────────────────────────────────────────
   7. STAGGER REVEAL
   Content is visible by default; JS adds bd-reveal-ready
   to the page wrapper before animating, so no-JS users
   always see content.
───────────────────────────────────────────────────────── */
.bd-content > *,
.bd-sidebar .bd-widget,
.bd-sidebar .latest-posts-card {
  opacity:1;
  transform:translateY(0);
  transition:
    opacity  .80s var(--ease),
    transform .80s var(--ease);
}
/* JS opt-in: only hide when observer is ready */
.bd-reveal-ready .bd-content > *,
.bd-reveal-ready .bd-sidebar .bd-widget,
.bd-reveal-ready .bd-sidebar .latest-posts-card {
  opacity:0;
  transform:translateY(40px);
}
.bd-reveal-ready .bd-content > *.bd-fade-in,
.bd-reveal-ready .bd-sidebar .bd-widget.bd-fade-in,
.bd-reveal-ready .bd-sidebar .latest-posts-card.bd-fade-in {
  opacity:1; transform:translateY(0);
}

/* ─────────────────────────────────────────────────────────
   8. MAIN CONTENT
───────────────────────────────────────────────────────── */
.bd-content { width:100%; min-width:0; }

/* intro highlight card — ab-mv-card style */
.bd-intro-list {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(180,255,60,.055),rgba(180,255,60,.02));
  border:1px solid var(--border);
  border-left:4px solid var(--lime);
  border-radius:var(--radius);
  padding:24px 28px 24px 36px;
  margin:0 0 28px;
  list-style:disc;
  color:var(--text); line-height:1.85;
  transition:border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease);
}
/* top-bar reveal on hover — identical to ab-mv-card::before */
.bd-intro-list::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.bd-intro-list:hover::before { transform:scaleX(1); }
.bd-intro-list:hover {
  border-color:var(--border-h);
  box-shadow:0 20px 50px rgba(0,0,0,.34), 0 0 36px rgba(180,255,60,.10);
  transform:translateY(-4px);
}
.bd-intro-list li { margin-bottom:8px; font-size:.97rem; }
.bd-intro-list li:last-child { margin-bottom:0; }

/* featured image */
.bd-featured-img-wrap {
  margin:32px 0 40px;
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(180,255,60,.18);
  box-shadow:0 0 50px rgba(180,255,60,.08), 0 30px 80px rgba(0,0,0,.55);
  transition:box-shadow .4s ease;
}
.bd-featured-img-wrap:hover {
  box-shadow:0 0 70px rgba(180,255,60,.18), 0 36px 90px rgba(0,0,0,.60);
}
.bd-featured-img,
.bd-featured-image {
  width:100%; height:auto; max-height:480px;
  object-fit:cover; display:block;
  transition:transform .75s ease;
}
.bd-featured-image,
.bd-inline-image {
  margin:32px 0 40px;
  border-radius:22px;
  border:1px solid rgba(180,255,60,.18);
  box-shadow:0 0 50px rgba(180,255,60,.08), 0 30px 80px rgba(0,0,0,.45);
  transition:transform .75s ease, box-shadow .4s ease;
  display:block; width:100%;
}
.bd-inline-image {
  max-height:420px;
  object-fit:cover;
}
.bd-featured-img-wrap:hover .bd-featured-img,
.bd-featured-img-wrap:hover .bd-featured-image { transform:scale(1.04); }
.bd-inline-image:hover {
  transform:scale(1.02);
  box-shadow:0 0 70px rgba(180,255,60,.18), 0 36px 90px rgba(0,0,0,.55);
}

/* typography */
.bd-content p {
  font-size:1.0rem; line-height:1.92;
  color:var(--text); margin:0 0 24px;
}
.bd-content h2 {
  font-size:clamp(1.35rem,2.2vw,1.80rem);
  font-weight:800; color:#fff;
  margin:44px 0 18px; line-height:1.22;
  padding-bottom:12px;
  border-bottom:1px solid rgba(180,255,60,.15);
}
.bd-content h3 {
  font-size:1.10rem; font-weight:700;
  color:var(--lime); margin:28px 0 12px;
}
.bd-content ul,
.bd-content ol {
  padding-left:1.6rem; margin:0 0 22px;
  color:var(--text); line-height:1.9;
}
.bd-content ul li,
.bd-content ol li { margin-bottom:9px; }
.bd-content em    { color:var(--lime); font-style:italic; }
.bd-content code  {
  font-family:monospace; font-size:.88rem;
  background:rgba(180,255,60,.10); color:var(--lime);
  padding:2px 6px; border-radius:4px;
}
.bd-code {
  margin:24px 0 28px;
  padding:22px 24px;
  overflow-x:auto;
  background:rgba(8,12,8,.86);
  border:1px solid rgba(180,255,60,.16);
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.bd-code code {
  display:block;
  white-space:pre;
  background:transparent;
  color:rgba(220,240,210,.88);
  padding:0;
  line-height:1.75;
}

/* ─────────────────────────────────────────────────────────
   9. SHARE BAR
───────────────────────────────────────────────────────── */
.bd-share {
  margin:48px 0 0; padding:28px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.bd-share h4 {
  font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--muted); margin:0 0 14px;
}
.bd-share-btns { display:flex; gap:10px; flex-wrap:wrap; }
.bd-share-btns a {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  font-size:16px; color:#fff; text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
.bd-share-btns a:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.40); }
.bd-share-btns .fb { background:#355da8; }
.bd-share-btns .tw { background:#1da1f2; }
.bd-share-btns .wa { background:#25d366; }
.bd-share-btns .li { background:#0077b5; }
.bd-share-btns .em { background:#2d6a2d; }

/* ─────────────────────────────────────────────────────────
   10. AUTHOR CARD  (ab-mv-card style)
───────────────────────────────────────────────────────── */
.bd-author {
  position:relative; overflow:hidden;
  margin-top:48px; padding:28px;
  background:linear-gradient(180deg,rgba(180,255,60,.055),rgba(180,255,60,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex; gap:22px; align-items:flex-start;
  backdrop-filter:blur(12px);
  transition:border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease);
}
.bd-author::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--lime);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.bd-author:hover::before { transform:scaleX(1); }
.bd-author:hover {
  border-color:var(--border-h);
  box-shadow:0 20px 50px rgba(0,0,0,.34), 0 0 36px rgba(180,255,60,.10);
  transform:translateY(-4px);
}
/* avatar — lime circle like ab-exp-badge */
.bd-author-avatar {
  width:72px; height:72px; border-radius:50%;
  background:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900; color:#080c08;
  flex-shrink:0;
  box-shadow:0 0 24px rgba(180,255,60,.45);
}
.bd-author-info h4 { font-size:1rem; font-weight:800; color:#fff; margin:0 0 6px; }
.bd-author-info p  { font-size:.9rem; color:var(--muted); margin:0; line-height:1.7; }

.bd-responses {
  margin-top:56px;
  padding-top:44px;
  border-top:1px solid var(--border);
}
.bd-responses h2 {
  margin-top:0;
  border-bottom:none;
  padding-bottom:0;
}
.bd-comment {
  display:flex;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid rgba(180,255,60,.10);
}
.bd-comment-avatar {
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(180,255,60,.12);
  border:1px solid rgba(180,255,60,.22);
  color:var(--lime);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex-shrink:0;
}
.bd-comment-body h5 {
  margin:0 0 4px;
  color:#fff;
  font-size:.95rem;
}
.bd-comment-body span {
  display:block;
  margin-bottom:8px;
  color:rgba(180,255,60,.55);
  font-size:.78rem;
}
.bd-comment-body p {
  margin:0;
  font-size:.92rem;
  line-height:1.75;
}

/* ─────────────────────────────────────────────────────────
   11. COMMENT FORM  (ab-btn-primary / ab-btn-outline style)
───────────────────────────────────────────────────────── */
.bd-reply {
  margin-top:56px; padding-top:48px;
  border-top:1px solid var(--border);
}
.bd-reply h2 {
  font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900;
  color:#fff; margin:0 0 8px;
  border-bottom:none; padding-bottom:0;
}
.bd-reply .bd-reply-note { font-size:13px; color:var(--muted); margin:0 0 28px; }
.bd-reply .bd-reply-note span { color:var(--lime); }

.bd-reply-form { display:flex; flex-direction:column; gap:18px; }
.bd-reply-row  { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bd-reply-group { display:flex; flex-direction:column; gap:7px; }
.bd-reply-group label { font-size:13px; font-weight:700; color:#fff; }
.bd-reply-group label span { color:var(--lime); }

.bd-reply-form textarea,
.bd-reply-form input {
  width:100%; box-sizing:border-box;
  background:rgba(8,12,8,.80);
  border:1px solid rgba(180,255,60,.14);
  border-radius:8px; color:#fff;
  font-family:'Poppins',sans-serif; font-size:14px;
  padding:12px 14px; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.bd-reply-form textarea::placeholder,
.bd-reply-form input::placeholder { color:rgba(200,230,180,.28); }
.bd-reply-form textarea:focus,
.bd-reply-form input:focus {
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(180,255,60,.12);
}
.bd-reply-alert { font-size:13px; min-height:18px; color:var(--lime); }

/* submit — ab-btn-primary */
.bd-reply-form button[type="submit"] {
  width:max-content; border:0; border-radius:999px;
  padding:14px 32px; color:#080c08;
  font-family:'Poppins',sans-serif; font-size:.875rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--lime); cursor:pointer;
  box-shadow:var(--glow-sm), 0 8px 24px rgba(0,0,0,.28);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.bd-reply-form button[type="submit"]:hover {
  background:var(--lime2);
  transform:translateY(-3px);
  box-shadow:var(--glow-md);
}

/* ─────────────────────────────────────────────────────────
   12. SIDEBAR
───────────────────────────────────────────────────────── */
.bd-sidebar {
  position:sticky;
  top:105px;
  display:flex;
  flex-direction:column;
  gap:24px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  scrollbar-width:none;
}
.bd-sidebar::-webkit-scrollbar { display:none; }

/* widget card */
.bd-widget,
.latest-posts-card {
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,rgba(180,255,60,.06),rgba(180,255,60,.02));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 24px;
  backdrop-filter:blur(14px);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}
.bd-widget::before,
.latest-posts-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--lime),#80e000);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s ease;
}
.bd-widget:hover::before,
.latest-posts-card:hover::before { transform:scaleX(1); }
.bd-widget:hover,
.latest-posts-card:hover {
  border-color:var(--border-h);
  box-shadow:0 20px 50px rgba(0,0,0,.34), 0 0 40px rgba(180,255,60,.12);
  transform:translateY(-4px);
}

/* widget heading — ab-eyebrow style */
.bd-widget h3,
.latest-posts-card h3 {
  font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--lime); margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(180,255,60,.12);
}

/* categories */
.bd-cat-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.bd-cat-list li a {
  display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); font-size:14px; text-decoration:none;
  padding:7px 0; border-bottom:1px solid rgba(180,255,60,.06);
  transition:color .25s ease, padding-left .25s ease;
}
.bd-cat-list li a:hover { color:var(--lime); padding-left:6px; }
.bd-cat-list li a span { color:rgba(180,255,60,.55); font-size:12px; }

/* newsletter */
.bd-newsletter-desc { font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 14px; }
.bd-newsletter-form { display:flex; flex-direction:column; gap:10px; }
.bd-newsletter-form input {
  width:100%; box-sizing:border-box;
  background:rgba(8,12,8,.80);
  border:1px solid rgba(180,255,60,.14);
  border-radius:8px; color:#fff;
  font-family:'Poppins',sans-serif; font-size:13px;
  padding:10px 13px; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.bd-newsletter-form input::placeholder { color:rgba(200,230,180,.28); }
.bd-newsletter-form input:focus {
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(180,255,60,.12);
}
/* sign-up button — ab-btn-primary */
.bd-newsletter-form button {
  width:100%; border:0; border-radius:999px;
  padding:11px 20px; color:#080c08;
  font-family:'Poppins',sans-serif; font-size:.78rem;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--lime); cursor:pointer;
  box-shadow:0 0 22px rgba(180,255,60,.35);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.bd-newsletter-form button:hover {
  background:var(--lime2);
  transform:translateY(-3px);
  box-shadow:var(--glow-md);
}

/* latest posts */
.latest-posts-card { padding:24px; }
.latest-post-item {
  display:grid; grid-template-columns:72px 1fr;
  gap:12px; align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(180,255,60,.06);
}
.latest-post-item:last-child { border-bottom:none; }
.latest-post-item img {
  width:72px!important; height:62px!important; max-width:72px!important;
  object-fit:cover; border-radius:10px; display:block;
  margin:0!important;
  border:1px solid rgba(180,255,60,.12)!important;
  box-shadow:none!important;
  transition:transform .35s ease;
}
.latest-post-item:hover img { transform:scale(1.06); }
.latest-post-item > div { min-width:0; }
.latest-post-item h4 { margin:0 0 5px; font-size:13px; line-height:1.3; font-weight:700; }
.latest-post-item h4 a {
  color:rgba(220,240,210,.88); text-decoration:none;
  transition:color .25s ease;
}
.latest-post-item h4 a:hover { color:var(--lime); }
.latest-post-item span { color:rgba(180,255,60,.55); font-size:11px; display:block; }

/* ─────────────────────────────────────────────────────────
   13. RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .bd-layout > .bd-container { grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr); gap:28px; }
}
@media (max-width:991px) {
  .bd-layout > .bd-container,
  .bd-layout-grid { grid-template-columns:1fr!important; gap:32px!important; }
  .bd-sidebar { position:static; max-height:none; overflow-y:visible; }
  .bd-hero-img-wrap img { height:300px; }
}
@media (max-width:768px) {
  .bd-hero { padding:110px 0 0; }
  .bd-hero-img-wrap img { height:240px; }
  .bd-reply-row { grid-template-columns:1fr; }
  .bd-author { flex-direction:column; align-items:center; text-align:center; }
  .bd-comment { gap:14px; }
  .bd-layout { padding:40px 0 72px; }
}
@media (max-width:480px) {
  .bd-hero { padding:100px 0 0; }
  .bd-hero-img-wrap img { height:220px; }
  .bd-title { font-size:1.45rem; }
  .bd-featured-image,
  .bd-inline-image,
  .bd-featured-img-wrap { border-radius:14px; }
  .bd-comment { flex-direction:column; }
  .latest-posts-card { padding:18px; }
  .latest-post-item { grid-template-columns:60px 1fr; gap:10px; }
  .latest-post-item img { width:60px!important; height:52px!important; max-width:60px!important; }
  .bd-layout { padding:32px 0 60px; }
}

/* ─────────────────────────────────────────────────────────
   14. REDUCED MOTION
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .bd-content > *,
  .bd-sidebar .bd-widget,
  .bd-sidebar .latest-posts-card { opacity:1!important; transform:none!important; transition:none!important; }
  .bd-hero::before, .bd-hero::after,
  .bd-layout::before { animation:none!important; }
}

/* ============================================================
   GLOBAL BLOG DETAIL LAYOUT POLISH
   Final scoped overrides for all bd-* blog detail pages.
   ============================================================ */
.blog-detail-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 78, 24, .42), transparent 42%),
    #080c08;
}

.blog-detail-page .bd-hero {
  padding: 148px 0 42px;
}

.blog-detail-page .bd-hero .bd-container {
  width: min(1180px, 92%);
  max-width: none;
}

.blog-detail-title,
.blog-detail-page .bd-title,
.blog-detail-page .bd-hero h1 {
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.05;
  max-width: 1100px;
  margin: 0 auto 24px;
  text-align: center;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  letter-spacing: 0;
  animation: bdFadeUp .85s var(--ease) both;
}

.blog-detail-page .bd-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin: 0 auto 34px;
  max-width: 920px;
  color: rgba(220, 240, 210, .74);
}

.blog-detail-page .bd-meta span {
  min-width: max-content;
}

.blog-detail-wrapper,
.blog-detail-page .bd-layout > .bd-container,
.blog-detail-page .bd-container.bd-layout-grid {
  width: min(1320px, 92%);
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) 360px;
  gap: 48px;
  align-items: start;
}

.blog-detail-page .bd-layout {
  padding: 64px 0 108px;
}

.blog-detail-page .bd-content {
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(180, 255, 60, .14);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(180, 255, 60, .025));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(16px) saturate(1.12);
}

.blog-detail-page .bd-featured-img-wrap,
.blog-detail-page .featured-image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 40px;
  border-radius: 24px;
  overflow: hidden;
}

.blog-detail-page .bd-featured-img,
.blog-detail-page .bd-featured-image,
.blog-detail-page .featured-image img,
.blog-detail-page .blog-featured-image,
.blog-detail-page .bd-content-image,
.blog-detail-page .bd-inline-image {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 24px;
  margin-left: auto;
  margin-right: auto;
}

.blog-detail-page .bd-featured-img-wrap,
.blog-detail-page .bd-featured-image,
.blog-detail-page .blog-featured-image,
.blog-detail-page .bd-content-image,
.blog-detail-page .bd-inline-image {
  border: 1px solid rgba(180, 255, 60, .18);
  box-shadow: 0 0 44px rgba(180, 255, 60, .08), 0 28px 76px rgba(0, 0, 0, .44);
}

.blog-detail-page .bd-featured-img-wrap img,
.blog-detail-page .bd-featured-image,
.blog-detail-page .blog-featured-image,
.blog-detail-page .bd-content-image,
.blog-detail-page .bd-inline-image {
  transition: transform .7s var(--ease), box-shadow .35s ease;
}

.blog-detail-page .bd-featured-img-wrap:hover img,
.blog-detail-page .bd-featured-image:hover,
.blog-detail-page .blog-featured-image:hover,
.blog-detail-page .bd-content-image:hover,
.blog-detail-page .bd-inline-image:hover {
  transform: scale(1.035);
}

.blog-detail-page .bd-sidebar {
  gap: 28px;
  max-height: none;
  overflow: visible;
}

.blog-detail-page .bd-widget,
.blog-detail-page .latest-posts-card {
  border-radius: 20px;
  padding: 26px 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(180, 255, 60, .025));
  border: 1px solid rgba(180, 255, 60, .15);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.blog-detail-page .bd-widget:hover,
.blog-detail-page .latest-posts-card:hover {
  border-color: rgba(180, 255, 60, .32);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38), 0 0 34px rgba(180, 255, 60, .12);
}

.blog-detail-page .bd-newsletter-form input {
  min-height: 46px;
  border-radius: 10px;
}

.blog-detail-page .bd-newsletter-form button {
  min-height: 46px;
}

.bd-reveal-ready .bd-sidebar .bd-widget,
.bd-reveal-ready .bd-sidebar .latest-posts-card {
  opacity: 0;
  transform: translateX(36px);
}

.bd-reveal-ready .bd-sidebar .bd-widget.bd-fade-in,
.bd-reveal-ready .bd-sidebar .latest-posts-card.bd-fade-in {
  opacity: 1;
  transform: translateX(0);
}

.bd-reveal-ready .bd-sidebar .bd-widget.bd-fade-in:hover,
.bd-reveal-ready .bd-sidebar .latest-posts-card.bd-fade-in:hover {
  transform: translateY(-4px);
}

@media (max-width: 1100px) {
  .blog-detail-wrapper,
  .blog-detail-page .bd-layout > .bd-container,
  .blog-detail-page .bd-container.bd-layout-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 34px;
  }
}

@media (max-width: 991px) {
  .blog-detail-wrapper,
  .blog-detail-page .bd-layout > .bd-container,
  .blog-detail-page .bd-container.bd-layout-grid {
    grid-template-columns: 1fr;
  }

  .blog-detail-page .bd-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .blog-detail-page .bd-hero {
    padding: 118px 0 30px;
  }

  .blog-detail-title,
  .blog-detail-page .bd-title,
  .blog-detail-page .bd-hero h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .blog-detail-page .bd-content {
    padding: 20px;
    border-radius: 18px;
  }

  .blog-detail-page .bd-featured-img,
  .blog-detail-page .bd-featured-image,
  .blog-detail-page .featured-image img,
  .blog-detail-page .blog-featured-image,
  .blog-detail-page .bd-content-image,
  .blog-detail-page .bd-inline-image {
    border-radius: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   15. SECTION NUMBER BADGE
───────────────────────────────────────────────────────── */
.bd-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(180,255,60,.12);
  border: 1px solid rgba(180,255,60,.22);
  color: var(--lime);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   16. HIGHLIGHT / QUOTE BOX
───────────────────────────────────────────────────────── */
.bd-highlight {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 28px 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: rgba(180,255,60,.07);
  border: 1px solid rgba(180,255,60,.20);
  border-left: 4px solid var(--lime);
}
.bd-highlight i { color: var(--lime); font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.bd-highlight p { margin: 0; color: rgba(220,240,210,.88); font-size: .97rem; line-height: 1.75; }
.bd-highlight--quote { background: rgba(180,255,60,.05); font-style: italic; }
.bd-highlight--quote p { color: rgba(220,240,210,.72); }
.bd-highlight--stat { background: rgba(180,255,60,.07); }
.bd-highlight--stat p { color: rgba(220,240,210,.88); font-style: normal; }

/* ─────────────────────────────────────────────────────────
   17. TYPE / CHALLENGE CARDS GRID
───────────────────────────────────────────────────────── */
.bd-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 32px;
}
.bd-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }

.bd-type-card {
  position: relative;
  overflow: hidden;
  padding: 26px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(180,255,60,.055), rgba(180,255,60,.02));
  border: 1px solid rgba(180,255,60,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.bd-type-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .38s ease;
}
.bd-type-card:hover { transform: translateY(-6px); border-color: rgba(180,255,60,.28); box-shadow: 0 28px 64px rgba(0,0,0,.34), 0 0 30px rgba(180,255,60,.10); }
.bd-type-card:hover::before { transform: scaleX(1); }

.bd-type-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(180,255,60,.10);
  border: 1px solid rgba(180,255,60,.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--lime);
  margin-bottom: 16px;
  transition: background .35s ease, transform .35s ease;
}
.bd-type-card:hover .bd-type-card__icon { background: rgba(180,255,60,.20); transform: scale(1.08) rotate(-5deg); }

.bd-type-card h3 { font-size: .97rem; font-weight: 800; color: #fff; margin: 0 0 10px; }
.bd-type-card p  { font-size: .86rem; color: rgba(200,230,180,.65); line-height: 1.72; margin: 0; }

@media (max-width: 768px) {
  .bd-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .bd-cards-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bd-cards-grid,
  .bd-cards-grid--2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   18. ROADMAP
───────────────────────────────────────────────────────── */
.bd-roadmap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 24px 0 32px;
  position: relative;
}
.bd-roadmap::before {
  content: '';
  position: absolute;
  left: 19px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--lime), rgba(180,255,60,.10));
  border-radius: 2px;
}
.bd-roadmap__step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 0 0 28px 0;
  position: relative;
}
.bd-roadmap__step:last-child { padding-bottom: 0; }
.bd-roadmap__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--lime); color: #080c08;
  font-size: .88rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  box-shadow: 0 0 18px rgba(180,255,60,.40);
}
.bd-roadmap__body h4 { font-size: 1rem; font-weight: 800; color: #fff; margin: 8px 0 6px; }
.bd-roadmap__body p  { font-size: .9rem; color: rgba(200,230,180,.68); line-height: 1.72; margin: 0; }

/* ─────────────────────────────────────────────────────────
   19. TOOLS GRID
───────────────────────────────────────────────────────── */
.bd-tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 32px;
}
.bd-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(180,255,60,.08);
  border: 1px solid rgba(180,255,60,.18);
  color: rgba(220,240,210,.85);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .28s ease, border-color .28s ease, color .28s ease, transform .28s ease;
}
.bd-tool-pill i { color: var(--lime); font-size: .78rem; }
.bd-tool-pill:hover { background: rgba(180,255,60,.16); border-color: rgba(180,255,60,.38); color: #fff; transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────
   20. CHECK LIST
───────────────────────────────────────────────────────── */
.bd-check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bd-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(220,240,210,.80);
  font-size: .95rem;
  line-height: 1.65;
}
.bd-check-list li i { color: var(--lime); margin-top: 3px; flex-shrink: 0; }
.bd-check-list li div { flex: 1; }
.bd-check-list li strong { color: #fff; }

/* ─────────────────────────────────────────────────────────
   21. TABLE OF CONTENTS
───────────────────────────────────────────────────────── */
.bd-toc { display: flex; flex-direction: column; gap: 2px; }
.bd-toc__link {
  display: block;
  padding: 7px 0;
  color: rgba(200,230,180,.72);
  font-size: .84rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(180,255,60,.06);
  transition: color .25s ease, padding-left .25s ease;
}
.bd-toc__link:last-child { border-bottom: none; }
.bd-toc__link:hover { color: var(--lime); padding-left: 6px; }

/* ─────────────────────────────────────────────────────────
   22. INLINE LINK
───────────────────────────────────────────────────────── */
.bd-inline-link {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.bd-inline-link:hover { color: var(--lime2); }

/* ─────────────────────────────────────────────────────────
   23. HERO PADDING FIX (clears fixed navbar 105px)
───────────────────────────────────────────────────────── */
.blog-detail-page .bd-hero { padding-top: 130px; }

/* ─────────────────────────────────────────────────────────
   29. EXTRA IMAGE CLASS ALIASES (Java page + legacy)
───────────────────────────────────────────────────────── */
.bd-content-image,
.blog-featured-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(180,255,60,.18);
  box-shadow: 0 0 50px rgba(180,255,60,.08), 0 30px 80px rgba(0,0,0,.45);
  margin: 32px 0 40px;
  transition: transform .75s ease, box-shadow .4s ease;
}
.bd-content-image:hover,
.blog-featured-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 70px rgba(180,255,60,.18), 0 36px 90px rgba(0,0,0,.55);
}

/* ─────────────────────────────────────────────────────────
   25. SHARE BUTTON GLOW HOVER
───────────────────────────────────────────────────────── */
.bd-share-btns .fb:hover { box-shadow:0 8px 28px rgba(53,93,168,.55); }
.bd-share-btns .tw:hover { box-shadow:0 8px 28px rgba(29,161,242,.55); }
.bd-share-btns .wa:hover { box-shadow:0 8px 28px rgba(37,211,102,.55); }
.bd-share-btns .li:hover { box-shadow:0 8px 28px rgba(0,119,181,.55); }
.bd-share-btns .em:hover { box-shadow:0 8px 28px rgba(45,106,45,.55); }

/* ─────────────────────────────────────────────────────────
   26. REPLY FORM SUBMIT GLOW
───────────────────────────────────────────────────────── */
.bd-reply-form button[type="submit"] {
  position:relative; overflow:hidden;
}
.bd-reply-form button[type="submit"]::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.bd-reply-form button[type="submit"]:hover::before { transform:translateX(120%); }

/* ─────────────────────────────────────────────────────────
   27. NEWSLETTER BUTTON GLOW
───────────────────────────────────────────────────────── */
.bd-newsletter-form button {
  position:relative; overflow:hidden;
}
.bd-newsletter-form button::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.bd-newsletter-form button:hover::before { transform:translateX(120%); }

/* ─────────────────────────────────────────────────────────
   24. STYLED ORDERED LIST  (bd-ol)
───────────────────────────────────────────────────────── */
.bd-ol {
  padding-left: 1.4rem;
  margin: 20px 0 28px;
  color: rgba(220,240,210,.80);
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-ol li { font-size: .97rem; padding-left: 4px; }
.bd-ol li strong { color: #fff; }
.bd-ol li::marker { color: var(--lime); font-weight: 800; }

/* ─────────────────────────────────────────────────────────
   28. COMPARISON TABLE  (solar-vs-wind and similar posts)
───────────────────────────────────────────────────────── */
.bd-table-wrap {
  overflow-x: auto;
  margin: 24px 0 36px;
  border-radius: 16px;
  border: 1px solid rgba(180,255,60,.14);
  box-shadow: 0 16px 48px rgba(0,0,0,.32);
}
.bd-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  color: rgba(220,240,210,.82);
  background: rgba(8,12,8,.80);
}
.bd-compare-table thead tr {
  background: rgba(180,255,60,.10);
  border-bottom: 2px solid rgba(180,255,60,.22);
}
.bd-compare-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b4ff3c;
  white-space: nowrap;
}
.bd-compare-table thead th i {
  margin-right: 6px;
}
.bd-compare-table tbody tr {
  border-bottom: 1px solid rgba(180,255,60,.07);
  transition: background .22s ease;
}
.bd-compare-table tbody tr:last-child {
  border-bottom: none;
}
.bd-compare-table tbody tr:hover {
  background: rgba(180,255,60,.05);
}
.bd-compare-table tbody td {
  padding: 13px 18px;
  vertical-align: top;
  line-height: 1.65;
}
.bd-compare-table tbody td:first-child {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  width: 160px;
}
@media (max-width: 640px) {
  .bd-compare-table thead th,
  .bd-compare-table tbody td {
    padding: 10px 12px;
    font-size: .82rem;
  }
  .bd-compare-table tbody td:first-child {
    width: 110px;
  }
}