/* =========================================================================
 * Blog & Labs — the frame of the hub (/blog/), the archives (/blog/all/,
 * /labs/) and the posts (/blog/<slug>/).
 *
 * Each page is one tall section (data-tall) on the service-page frame
 * (assets/css/mxdr-service/page.css, handle lmx-ms): snapping stays off
 * (page.js turns it on from two sections upwards) and the container scrolls
 * itself down to the footer. Here: section backgrounds, container scrolling,
 * the shared tokens and the parent highlight in the header.
 * ====================================================================== */

.lmx-msec--bh,
.lmx-msec--ba,
.lmx-msec--bs{background-color:#050708}

.lmx-blog-ms{--bl-accent:#52C7C6;--bl-accent-hi:#83DAD9;--bl-on-accent:#04211F;--bl-line:rgba(255,255,255,.10);--bl-line-hi:rgba(255,255,255,.18);--bl-surface:rgba(255,255,255,.035);--bl-surface-hi:rgba(255,255,255,.065);--bl-muted:rgba(255,255,255,.58);--bl-text:rgba(255,255,255,.86);--bl-font:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);--bl-display:var(--lmx-ms-display,'Outfit','Poppins',sans-serif)}

@media (min-width:1025px){
.lmx-ms.lmx-blog-ms{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(82,199,198,.45) transparent}
.lmx-ms.lmx-blog-ms::-webkit-scrollbar{display:block;width:8px}
.lmx-ms.lmx-blog-ms::-webkit-scrollbar-thumb{background:rgba(82,199,198,.35);border-radius:8px}
}

/* Shared wrapper for the section: grid-and-glow background, width. */
.lmx-bh-inner,.lmx-ba-inner,.lmx-bs-inner{position:relative;width:100%;min-height:100vh;background:#050708 !important;color:#fff;font-family:var(--bl-font);padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden}
.lmx-bh-inner *,.lmx-ba-inner *,.lmx-bs-inner *{box-sizing:border-box;min-width:0}
.lmx-bh-bg,.lmx-ba-bg,.lmx-bs-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 34% at 50% 0%,rgba(82,199,198,.14),transparent 70%),radial-gradient(40% 30% at 85% 60%,rgba(82,199,198,.05),transparent 70%)}
.lmx-bh-bg::before,.lmx-ba-bg::before,.lmx-bs-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 55% at 50% 18%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 55% at 50% 18%,#000 20%,transparent 100%)}
.lmx-bh-bg::after,.lmx-ba-bg::after{content:'';position:absolute;left:50%;top:0;width:min(720px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(82,199,198,.55),transparent)}
.lmx-bh-wrap,.lmx-ba-wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px)}

@media (max-width:1024px){
.lmx-bh-inner,.lmx-ba-inner,.lmx-bs-inner{min-height:0;padding:84px var(--lmx-section-padding-x) 64px}
.lmx-bh-wrap,.lmx-ba-wrap{padding:0}
}

/* The “Knowledge Hub” parent is active across the section (nav-render sets the class). */
.lmx-header .lmx-nav__link.lmx-nav__link--child-current{color:var(--lmx-teal)}
.lmx-drawer .lmx-drawer__toggle.lmx-drawer__toggle--child-current{color:var(--lmx-teal)}

@media (prefers-reduced-motion:reduce){
.lmx-blog-ms *{transition:none !important;animation:none !important}
}

/* Back to the hub of the section from the list pages (2026-10-01).
   It looks exactly like “← ALL NEWS” on a post page (.lmx-bs-back in
   single.css): left arrow, letter-spaced caps, teal; on hover the arrow
   slides left. It has its own class because single.css is not loaded on the
   lists while the --bl-* variables are declared in this file. */
.lmx-blog-ms .lmx-bl-back{display:inline-flex;align-items:center;gap:10px;padding:6px 0;margin:0 0 16px;color:var(--bl-accent) !important;text-decoration:none !important;font-family:var(--bl-font);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:color .2s ease}
.lmx-blog-ms .lmx-bl-back svg{width:18px;height:18px;flex:0 0 auto;transition:transform .2s ease}
.lmx-blog-ms .lmx-bl-back:hover{color:var(--bl-accent-hi) !important}
.lmx-blog-ms .lmx-bl-back:hover svg{transform:translateX(-3px)}
.lmx-blog-ms .lmx-bl-back:focus-visible{outline:2px solid var(--bl-accent);outline-offset:4px}
/* No smaller size on a phone: the “ALL NEWS” link on a post page stays 13px
   too, and two links that mean the same thing should look the same at every
   width. */
@media (max-width:600px){
.lmx-blog-ms .lmx-bl-back{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
.lmx-blog-ms .lmx-bl-back,.lmx-blog-ms .lmx-bl-back svg{transition:none}
.lmx-blog-ms .lmx-bl-back:hover svg{transform:none}
}