/* BNB Tech Pro - approved classic Blog Detail fidelity layer.
   Intentionally scoped to the detail page so Home / Blog / About / Contact do not change. */
.blog-detail-classic .classic-detail-hero .article-hero-grid{
  grid-template-columns:1.05fr .95fr!important;
  gap:36px!important;
  align-items:center!important;
}
.blog-detail-classic .classic-detail-hero .article-cover{
  order:initial!important;
  min-height:0!important;
  padding:12px!important;
  border-radius:17px!important;
  background:#fff!important;
  border:1px solid #e1e9f3!important;
  box-shadow:0 13px 32px rgba(29,67,112,.08)!important;
}
.blog-detail-classic .classic-detail-hero .article-cover-full{
  display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;
  border-radius:12px;background:#eef5ff;
}
.blog-detail-classic .classic-detail-hero h1{
  font-size:43px!important;line-height:1.12!important;letter-spacing:-1.45px!important;
  max-width:670px!important;margin:0 0 17px!important;
}
.blog-detail-classic .article-breadcrumb{gap:7px;margin-bottom:15px}
.blog-detail-classic .article-meta{gap:10px}
.blog-detail-classic .article-avatar-image{overflow:hidden}.blog-detail-classic .article-avatar-image img{width:100%;height:100%;object-fit:cover}

/* Restore the original article composition/rhythm. */
.blog-detail-classic .article-content-section{padding:30px 0 56px!important}
.blog-detail-classic .article-layout{grid-template-columns:230px minmax(0,1fr)!important;gap:36px!important;align-items:start!important}
.blog-detail-classic .article-sidebar{position:sticky!important;top:104px!important;display:grid!important;grid-template-columns:1fr!important;gap:13px!important}
.blog-detail-classic .article-toc,.blog-detail-classic .article-social{
  border:1px solid #e4eaf1!important;border-radius:12px!important;background:#fff!important;
  box-shadow:0 5px 15px rgba(16,39,68,.035)!important;padding:0!important;
}
.blog-detail-classic .article-toc-head{border-bottom:1px solid #edf1f5!important}
.blog-detail-classic .article-toc-head h3,.blog-detail-classic .article-social h3{
  display:block!important;font-size:12px!important;font-weight:800!important;margin:0!important;padding:13px 14px!important;border:0!important;
  font-family:"Plus Jakarta Sans",sans-serif!important;
}
.blog-detail-classic .article-toc nav{display:block!important;padding:8px!important;max-height:520px;overflow:auto}
.blog-detail-classic .article-toc a{
  display:block;padding:7px 9px!important;border-left:2px solid transparent;border-radius:0 6px 6px 0;
  font-family:"Plus Jakarta Sans",sans-serif!important;font-size:10.5px!important;line-height:1.48!important;font-weight:550!important;color:#617086!important;
}
.blog-detail-classic .article-toc a:hover,.blog-detail-classic .article-toc a.active{background:#f3f8ff!important;color:#0767f2!important;border-left-color:#0767f2!important;font-weight:700!important}
.blog-detail-classic .article-social{padding-bottom:12px!important}.blog-detail-classic .article-social-row{display:flex;gap:8px;padding:12px 13px 0!important}
.blog-detail-classic .toc-mobile-toggle{display:none!important}

.blog-detail-classic .article-body.cms-article{
  max-width:820px!important;font-family:"Source Serif 4",Georgia,"Times New Roman",serif!important;
  font-size:16px!important;line-height:1.88!important;color:#26384d!important;letter-spacing:0!important;
}
.blog-detail-classic .article-body.cms-article p{margin:0 0 20px!important}
.blog-detail-classic .article-body.cms-article h2{
  font-family:"Manrope","Plus Jakarta Sans",Arial,sans-serif!important;font-size:24px!important;line-height:1.25!important;
  letter-spacing:-.35px!important;color:#101827!important;margin:30px 0 17px!important;padding:17px 22px!important;
  background:#eff6ff!important;border-radius:0!important;border-left:3px solid #0767f2!important;
}
.blog-detail-classic .article-body.cms-article h3{
  font-family:"Manrope","Plus Jakarta Sans",Arial,sans-serif!important;font-size:18px!important;line-height:1.35!important;color:#111827!important;margin:26px 0 10px!important;
}
.blog-detail-classic .article-body.cms-article blockquote{border-radius:0!important;background:#f6faff!important}
.blog-detail-classic .article-body.cms-article img{max-width:100%;height:auto;border-radius:10px}
.blog-detail-classic .article-body.cms-article figure{margin:24px 0}
.blog-detail-classic .article-body.cms-article table{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px}

.blog-detail-classic .article-tags{margin-top:34px;padding-top:18px;border-top:1px solid #e4ebf4}
.blog-detail-classic .article-tags span{border-radius:999px;background:#eef6ff;color:#075fcf}
.blog-detail-classic .article-share-line{margin-top:20px}
.blog-detail-classic .article-author-bio{border-radius:12px!important;background:#fbfdff!important;box-shadow:none!important}

/* Dynamic previous/next navigation, styled as part of the approved article system. */
.blog-detail-classic .article-prev-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid #e4ebf4;font-family:"Plus Jakarta Sans",sans-serif}
.blog-detail-classic .article-nav-card{min-width:0;display:grid;gap:5px;padding:15px 16px;border:1px solid #e0e9f3;border-radius:11px;background:#fff;text-decoration:none!important;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.blog-detail-classic .article-nav-card small{font-size:9px;font-weight:800;color:#0767f2;text-transform:uppercase;letter-spacing:.06em}
.blog-detail-classic .article-nav-card strong{font-size:12px;line-height:1.45;color:#18283c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-detail-classic .article-nav-card.next{text-align:right}
@media(hover:hover){.blog-detail-classic .article-nav-card:hover{transform:translateY(-2px);border-color:#b9d7fa;box-shadow:0 8px 22px rgba(25,66,112,.08)}}

/* Keep comments dynamic, but visually quieter than the article itself. */
.blog-detail-classic .classic-comments{padding:4px 0 56px!important}
.blog-detail-classic .classic-comments .comments-shell{max-width:1180px;padding-top:30px}
.blog-detail-classic .classic-comments .comments-head h2{font-size:27px}
.blog-detail-classic .classic-comments .comment-card,.blog-detail-classic .classic-comments .comment-form{border-radius:12px;box-shadow:none}
.blog-detail-classic .classic-comments .comment-form{background:#fbfdff}

@media(max-width:960px){
  .blog-detail-classic .classic-detail-hero .article-hero-grid{grid-template-columns:1fr!important}
  .blog-detail-classic .classic-detail-hero .article-cover{order:0!important;max-width:720px;width:100%}
  .blog-detail-classic .classic-detail-hero h1{font-size:36px!important}
  .blog-detail-classic .article-layout{grid-template-columns:1fr!important;gap:24px!important}
  .blog-detail-classic .article-sidebar{position:relative!important;top:auto!important;display:block!important}
  .blog-detail-classic .article-social{display:none!important}
  .blog-detail-classic .article-toc-head h3{display:none!important}
  .blog-detail-classic .toc-mobile-toggle{display:flex!important;width:100%;align-items:center;justify-content:space-between;gap:10px;border:0;background:#fff;color:#172235;font:800 12px/1.3 "Plus Jakarta Sans",sans-serif;text-align:left;padding:13px 14px;cursor:pointer}
  .blog-detail-classic .toc-mobile-toggle span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef6ff;color:#0767f2}
  .blog-detail-classic .article-toc nav{display:none!important;max-height:330px;padding:7px!important;border-top:1px solid #edf1f5!important}
  .blog-detail-classic .article-toc.open nav{display:block!important}
  .blog-detail-classic .article-body.cms-article{max-width:none!important}
}
@media(max-width:620px){
  .blog-detail-classic .classic-detail-hero{padding:28px 0 22px!important}
  .blog-detail-classic .classic-detail-hero .article-hero-grid{gap:20px!important}
  .blog-detail-classic .classic-detail-hero h1{font-size:clamp(29px,9vw,34px)!important;line-height:1.12!important;letter-spacing:-.8px!important}
  .blog-detail-classic .classic-detail-hero .article-cover{padding:8px!important;border-radius:13px!important}
  .blog-detail-classic .classic-detail-hero .article-cover-full{border-radius:9px}
  .blog-detail-classic .article-meta{gap:7px;font-size:9px!important}
  .blog-detail-classic .article-content-section{padding-top:20px!important}
  .blog-detail-classic .article-body.cms-article{font-size:15.75px!important;line-height:1.82!important}
  .blog-detail-classic .article-body.cms-article h2{font-size:22px!important;padding:14px 16px!important}
  .blog-detail-classic .article-body.cms-article h3{font-size:18px!important}
  .blog-detail-classic .article-prev-next{grid-template-columns:1fr}
  .blog-detail-classic .article-nav-card.next{text-align:left}
}