/* Article layout; backend HTML remains in the article-prose wrapper. */
.blog-detail-page { background:#fff; color:#111; overflow-wrap:anywhere; }
.blog-detail-page .container { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.blog-detail-page .article-breadcrumb { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; line-height:1.6; color:#68707a; margin-bottom:28px; }
.blog-detail-page .article-breadcrumb a { flex-shrink:0; }
.blog-detail-page .article-breadcrumb [aria-current] { color:#424850; }
.blog-detail-page .article-hero { padding:28px 0 44px; background:radial-gradient(ellipse at top right,#fff1e7,transparent 50%),#fafafa; }
.blog-detail-page .article-hero__copy { width:100%; margin-bottom:30px; }
.blog-detail-page .article-category { color:#ff6000; font-size:12px; font-weight:600; }
.blog-detail-page h1 { font-size:clamp(30px,3.7vw,52px); line-height:1.12; letter-spacing:-.035em; margin:14px 0 20px; }
.blog-detail-page p { color:#5f6368; line-height:1.75; }
.blog-detail-page .article-summary { font-size:17px; }
.blog-detail-page .article-meta { display:flex; flex-wrap:wrap; gap:12px; color:#242930; font-size:13px; margin-top:24px; }
.blog-detail-page .article-meta > span { display:flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid #e1e4e8; border-radius:12px; background:#ffffffd9; line-height:1.5; }
.blog-detail-page .article-meta i { color:#e95316; font-size:17px; }
.blog-detail-page .article-meta small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:#68707a; margin-bottom:2px; }
.blog-detail-page .hero-image-wrap { margin:0; border:1px solid #e1e4e8; border-radius:22px; overflow:hidden; background:#f3f4f6; }
.blog-detail-page .hero-image-wrap img { display:block; width:100%; height:auto; max-height:none; }
.blog-detail-page .article-section { padding:52px 0; }
.blog-detail-page .article-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; }
.blog-detail-page .article-body { min-width:0; }
.blog-detail-page .article-prose { font-size:16px; line-height:1.8; }
.blog-detail-page .article-prose p:empty { display:none; }
.blog-detail-page .article-prose :is(h2,h3,h4) { line-height:1.25; margin:30px 0 16px; scroll-margin-top:100px; color:#111; }
.blog-detail-page .article-prose h2 { font-size:clamp(24px,2.3vw,32px); }
.blog-detail-page .article-prose h3 { font-size:22px; }
.blog-detail-page .article-prose :is(ul,ol) { padding-left:24px; margin:18px 0; color:#5f6368; }
.blog-detail-page .article-prose ul { list-style:disc; }
.blog-detail-page .article-prose ol { list-style:decimal; }
.blog-detail-page .article-prose li + li { margin-top:8px; }
.blog-detail-page .article-prose :is(img,video,iframe) { max-width:100%; }
.blog-detail-page .article-prose img { height:auto; border-radius:12px; }
.blog-detail-page .article-prose figure { margin:24px 0; }
.blog-detail-page .article-prose a { color:#e95316; text-decoration:underline; }
.blog-detail-page .article-prose blockquote { margin:24px 0; padding:20px; border-left:3px solid #ff6000; background:#fff4ed; }
.blog-detail-page .article-prose :is(table,pre) { display:block; max-width:100%; overflow-x:auto; }
.blog-detail-page .article-prose :is(th,td) { padding:12px; border:1px solid #e1e4e8; }
.blog-detail-page .article-sidebar { display:grid; gap:18px; min-width:0; }
.blog-detail-page :is(.sidebar-card,.author-card,.article-share) { border:1px solid #e1e4e8; border-radius:18px; padding:24px; background:#fff; }
.blog-detail-page .sidebar-card[hidden] { display:none; }
.blog-detail-page :is(.sidebar-card,.author-card,.article-share) h2 { font-size:19px; line-height:1.35; margin:0 0 14px; }
.blog-detail-page #articleTocLinks { display:grid; gap:12px; font-size:14px; line-height:1.5; }
.blog-detail-page #articleTocLinks a:hover { color:#ff6000; }
.blog-detail-page .toc-subheading { padding-left:12px; color:#5f6368; }
.blog-detail-page .recent-item { display:flex; gap:12px; padding:14px 0; border-top:1px solid #e1e4e8; }
.blog-detail-page .recent-item img { width:72px; height:58px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.blog-detail-page .recent-item small { display:block; color:#7a8088; font-size:10px; margin-bottom:5px; }
.blog-detail-page .recent-item strong { font-size:13px; line-height:1.4; display:block; }
.blog-detail-page .sidebar-cta { background:#fff4ed; }
.blog-detail-page .sidebar-cta p { font-size:14px; }
.blog-detail-page .author-card { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:start; gap:20px; margin-top:28px; background:#fafafa; }
.blog-detail-page .author-avatar { display:grid; place-items:center; width:72px; height:72px; border:1px solid #d9dde2; border-radius:50%; background:#fff; padding:5px; color:#111; }
.blog-detail-page .author-avatar svg { width:100%; height:100%; border:2px solid #111; border-radius:50%; }
.blog-detail-page .author-label,.blog-detail-page .share-label { display:block; text-transform:uppercase; letter-spacing:.1em; font-size:10px; margin-bottom:8px; color:#68707a; }
.blog-detail-page .author-card p { font-size:13px; line-height:1.65; margin:8px 0 0; }
.blog-detail-page .author-card h2 { margin:0; }
.blog-detail-page .article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.blog-detail-page .article-tags span { padding:6px 12px; background:#f4f5f7; border-radius:20px; font-size:12px; }
.blog-detail-page .article-share { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; margin-top:24px; padding:26px 28px; background:linear-gradient(110deg,#111 55%,#2b1d16); border-color:#262626; color:#fff; }
.blog-detail-page .article-share > div:first-child { flex:1 1 240px; }
.blog-detail-page .article-share h2 { color:#fff; margin-bottom:6px; font-size:18px; }
.blog-detail-page .article-share p { color:#e0e0e0; font-size:13px; line-height:1.6; margin:0; }
.blog-detail-page .share-label { color:#ff965c; }
.blog-detail-page .share-actions,.blog-detail-page .cta-actions { display:flex; flex-wrap:wrap; gap:10px; }
.blog-detail-page .share-actions a { display:grid; place-items:center; width:46px; height:46px; border:1px solid #393939; background:#242424; color:#fff; border-radius:14px; font-size:17px; }
.blog-detail-page .share-actions a:hover { color:#fff; background:#e95316; border-color:#e95316; }
.blog-detail-page .article-cta { padding:60px 0; text-align:center; background:radial-gradient(ellipse at top right,#ffede0,transparent 50%),#fafafa; }
.blog-detail-page .article-cta h2 { font-size:clamp(28px,3vw,42px); line-height:1.2; max-width:700px; margin:18px auto; }
.blog-detail-page .cta-actions { justify-content:center; margin-top:24px; }
@media(max-width:900px) { .blog-detail-page .article-layout { grid-template-columns:1fr; gap:30px; } .blog-detail-page .article-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) {
 .blog-detail-page .container { width:calc(100% - 40px); }
 .blog-detail-page .article-sidebar { grid-template-columns:1fr; }
 .blog-detail-page .article-summary { font-size:16px; }
 .blog-detail-page .article-section { padding:32px 0; }
 .blog-detail-page :is(.sidebar-card,.author-card,.article-share) { padding:18px; }
 .blog-detail-page .article-cta { padding:40px 0; }
 .blog-detail-page .cta-actions { flex-direction:column; }
 .blog-detail-page .author-card { grid-template-columns:52px minmax(0,1fr); gap:12px; }
 .blog-detail-page .author-avatar { width:52px; height:52px; }
 .blog-detail-page .article-meta > span { flex:1 1 140px; padding:10px 12px; }
}