/* MageHex blog detail page */
.single-post .site-main { overflow: visible; }
.mh-blog-wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.mh-blog-hero { padding: 34px 0 44px; text-align: center; background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%); border-top: 1px solid #edf1f7; }
.mh-blog-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; color: #6d7f9f; font-size: 13px; margin-bottom: 20px; }
.mh-blog-breadcrumb a { color: #1465db; text-decoration: none; }
.mh-blog-breadcrumb span:last-child { min-width: 0; max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.mh-blog-kicker { display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid #d5e2f5; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #2859cf; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.mh-blog-hero h1 { max-width: 900px; margin: 16px auto 12px; color: #10264d; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.055em; }
.mh-blog-meta { display: flex; justify-content: center; gap: 10px; color: #6c7b95; font-size: 14px; }
.mh-blog-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 230px; align-items: start; gap: 32px; padding: 52px 0 72px; }
.mh-blog-left-rail, .mh-blog-right-rail { position: sticky; top: 112px; }
.mh-blog-left-rail { display: grid; gap: 20px; }
.mh-blog-toc { overflow: hidden; border: 1px solid #dce6f2; border-radius: 16px; background: #fff; box-shadow: 0 14px 36px rgba(22, 44, 85, .07); }
.mh-blog-toc-title { padding: 17px 18px; border-bottom: 1px solid #e5edf6; color: #152a4e; font-size: 18px; font-weight: 800; }
.mh-blog-toc-list { max-height: 350px; margin: 0; padding: 12px 9px 14px; overflow: auto; list-style: none; }
.mh-blog-toc-list li { margin: 0; }
.mh-blog-toc-list a { display: block; padding: 7px 9px; border-left: 2px solid transparent; color: #526681; font-size: 13px; line-height: 1.35; text-decoration: none; transition: .2s ease; }
.mh-blog-toc-list a:hover { border-left-color: #21bfb1; color: #0d3d83; background: #f2fbfa; }
.mh-blog-toc-level-3 a { padding-left: 20px; font-size: 12px; }
.mh-blog-side-cta { display: block; padding: 24px 20px; border-radius: 16px; background: linear-gradient(145deg, #1bc9af, #3571e8); color: #fff; text-decoration: none; box-shadow: 0 18px 32px rgba(37, 102, 206, .18); transition: transform .25s ease, box-shadow .25s ease; }
.mh-blog-side-cta:hover { transform: translateY(-4px); box-shadow: 0 22px 38px rgba(37, 102, 206, .27); }
.mh-blog-side-cta > span:first-child { display: inline-block; margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; opacity: .88; }
.mh-blog-side-cta strong { display: block; font-size: 21px; line-height: 1.18; }
.mh-blog-side-cta small { display: block; margin: 13px 0 0; font-size: 13px; line-height: 1.5; opacity: .9; }
.mh-blog-side-cta b { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-size: 13px; line-height: 1.3; }
.mh-blog-article { min-width: 0; }
.mh-blog-featured-image { margin-bottom: 28px; overflow: hidden; border-radius: 18px; box-shadow: 0 18px 44px rgba(18, 42, 84, .13); }
.mh-blog-featured-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.mh-blog-entry { color: #3f5271; font-size: 17px; line-height: 1.8; }
.mh-blog-entry > *:first-child { margin-top: 0; }
.mh-blog-entry p { margin: 0 0 21px; }
.mh-blog-entry h2, .mh-blog-entry h3, .mh-blog-entry [id] { scroll-margin-top: 130px; color: #122a56; line-height: 1.2; letter-spacing: -.035em; }
.mh-blog-entry h2 { margin: 43px 0 15px; font-size: clamp(27px, 3vw, 38px); }
.mh-blog-entry h3 { margin: 31px 0 12px; font-size: clamp(21px, 2.3vw, 28px); }
.mh-blog-entry a { color: #1167d9; font-weight: 700; }
.mh-blog-entry ul, .mh-blog-entry ol { margin: 0 0 22px 21px; }
.mh-blog-entry li { margin: 7px 0; }
.mh-blog-entry blockquote { margin: 29px 0; padding: 21px 24px; border-left: 4px solid #25c4b4; border-radius: 0 14px 14px 0; background: #effbf9; color: #1e436d; font-size: 19px; font-weight: 600; }
.mh-blog-entry img { max-width: 100%; height: auto; border-radius: 12px; }
.mh-blog-right-rail { display: grid; gap: 16px; }
.mh-blog-ad { display: block; min-height: 192px; padding: 25px 20px 24px; border-radius: 17px; color: #fff; text-decoration: none; box-shadow: 0 15px 33px rgba(22, 49, 98, .13); transition: transform .25s ease, box-shadow .25s ease; }
.mh-blog-ad:hover { transform: translateY(-4px); box-shadow: 0 22px 38px rgba(22, 49, 98, .21); }
.mh-blog-ad-extension { background: linear-gradient(155deg, #1259da, #19cbb3); }
.mh-blog-ad-service { background: linear-gradient(155deg, #10264d, #3369d8); }
.mh-blog-ad-eyebrow { display: inline-flex; align-items: center; margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; opacity: .76; vertical-align: middle; }
.mh-blog-ad-icon { display: inline-flex; align-items: center; margin: 0 0 12px 8px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; line-height: 1; vertical-align: middle; }
.mh-blog-ad strong { display: block; max-width: 170px; font-size: 24px; line-height: 1.16; }
.mh-blog-ad p { margin: 13px 0 0; font-size: 13px; line-height: 1.5; }
.mh-blog-ad b { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-size: 12px; line-height: 1.3; }
.mh-blog-postscript { padding: 46px 0 58px; background: #f5f8fc; }
.mh-blog-postscript-inner { width: min(820px, calc(100% - 48px)); margin: 0 auto; }
.mh-blog-author { display: grid; grid-template-columns: 66px minmax(180px, 220px) minmax(0, 1fr); gap: 16px 22px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid #d9e3f0; }
.mh-blog-avatar { display: grid; width: 66px; height: 66px; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #d8f7f1, #cbdcff); color: #132b54; font-weight: 800; }
.mh-blog-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh-blog-avatar-image--logo { padding: 10px; object-fit: contain; background: #fff; }
.mh-blog-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; }
.mh-blog-author h2 { margin: 0 0 6px; color: #122a53; font-size: 18px; }
.mh-blog-author p { min-width: 0; margin: 0; color: #60748f; font-size: 14px; line-height: 1.55; }
.mh-blog-share { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 26px 0; border-bottom: 1px solid #d9e3f0; color: #5c6f8a; font-size: 14px; }
.mh-blog-share a { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cbd8e7; border-radius: 50%; color: #112950; font-size: 13px; font-weight: 800; text-decoration: none; transition: .2s ease; }
.mh-blog-share a:hover { background: #142f5d; border-color: #142f5d; color: #fff; }
.mh-blog-related { padding-top: 32px; }
.mh-blog-related-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; color: #122a53; font-size: 24px; }
.mh-blog-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 22px; }
.mh-blog-related-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #dce6f2; border-radius: 15px; background: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.mh-blog-related-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px rgba(24, 49, 95, .12); }
.mh-blog-related-image { display: block; flex: 0 0 145px; overflow: hidden; }
.mh-blog-related-card img, .mh-blog-related-fallback { display: block; width: 100%; height: 145px; object-fit: cover; background: linear-gradient(145deg, #cdf4ee, #dce7ff); }
.mh-blog-related-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 8px; padding: 16px; }
.mh-blog-related-copy small { color: #65809f; font-size: 12px; line-height: 1.4; }
.mh-blog-related-copy strong { display: block; min-width: 0; margin: 0; color: #132b53; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.mh-blog-related-copy > span:last-child { display: block; margin-top: auto; padding-top: 8px; color: #1167d9; font-size: 13px; font-weight: 800; }
@media (max-width: 1080px) { .mh-blog-layout { grid-template-columns: 205px minmax(0,1fr); } .mh-blog-right-rail { grid-column: 1 / -1; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mh-blog-ad { min-height: 145px; } }
@media (max-width: 760px) { .mh-blog-wrap { width: min(100% - 32px, 1280px); } .mh-blog-hero { padding: 27px 0 33px; } .mh-blog-breadcrumb { justify-content: flex-start; overflow: visible; } .mh-blog-hero { text-align: left; } .mh-blog-hero h1 { margin-left: 0; font-size: 35px; } .mh-blog-meta { justify-content: flex-start; } .mh-blog-layout { display: flex; flex-direction: column; padding: 32px 0 48px; } .mh-blog-article { order: 1; } .mh-blog-left-rail { order: 2; width: 100%; position: static; } .mh-blog-right-rail { order: 3; width: 100%; grid-template-columns: 1fr; position: static; } .mh-blog-toc-list { max-height: 240px; } .mh-blog-entry { font-size: 16px; line-height: 1.7; } .mh-blog-postscript { padding: 36px 0 44px; } .mh-blog-postscript-inner { width: min(100% - 32px, 820px); } .mh-blog-author { grid-template-columns: 66px minmax(0, 1fr); gap: 12px 16px; } .mh-blog-author p { grid-column: 1 / -1; } .mh-blog-related-grid { grid-template-columns: 1fr; } .mh-blog-related-card { height: auto; } }