/* =========================================================================
 * Block 6 — “Ready For Advanced Protection? That means XDR.”
 *
 * The content is not invented: the names, the product labels and the
 * descriptions are taken verbatim from the Elementor templates referenced by
 * the eael-adv-tabs widget #19bbc8e (page 9551). Item → template:
 *   3070 EDR · 3071 NDR · 3093 Identity · 3099 Packets · 3106 Deceive
 *   3112 Recon · 3117 SIEM · 4309 SIEM Rules · 3118 Incident · 3131 ML
 *   3137 Hunting · 2911 Response · 3140 Intelligence · 4301 Policy
 * The screenshots are the dark lmx-shot-*.png series.
 * ====================================================================== */

.lmx-b6-inner{position:relative;width:100%;min-height:100vh;background:linear-gradient(160deg,#f7f8fa 0%,#eef0f3 55%,#e6e9ed 100%);font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:visible;--block6-scale:1;--lmx-h1-font-family:'Outfit','Poppins',sans-serif;--lmx-h1-size:max(26px,calc(52px * var(--block6-scale,1)));--b6-accent:#52C7C6;--b6-ink:#20242a}
.lmx-b6-inner *{box-sizing:border-box}

.lmx-b6-head{text-align:center;padding-top:max(12px,calc(30px * var(--block6-scale,1)))}
.lmx-b6-eyebrow{margin:0 0 max(6px,calc(12px * var(--block6-scale,1)));color:var(--b6-accent);font-size:max(10px,calc(13px * var(--block6-scale,1)));font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.lmx-b6-title{margin:0 !important;font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;font-size:var(--lmx-h1-size) !important;line-height:1.1 !important;letter-spacing:-.01em;color:var(--b6-ink) !important}
.lmx-b6-sub{margin:max(4px,calc(9px * var(--block6-scale,1))) 0 0 !important;font-family:var(--lmx-h1-font-family);font-weight:300;font-size:max(14px,calc(23px * var(--block6-scale,1))) !important;color:#6a7078 !important}

.lmx-b6-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:max(12px,calc(28px * var(--block6-scale,1)));margin-top:max(10px,calc(22px * var(--block6-scale,1)));min-height:0}

/* --- left column --------------------------------------------------------- */
.lmx-b6-side{display:flex;flex-direction:column;min-height:0}
.lmx-b6-list{display:flex;flex-direction:column;gap:max(4px,calc(7px * var(--block6-scale,1)));margin:0;padding:0 max(4px,calc(8px * var(--block6-scale,1))) 0 0;list-style:none;min-height:0}
.lmx-b6-list li{margin:0}
/* The list always shows every item and always scrolls inside itself:
   flex:1 1 auto + min-height:0 make it take the available height of the column
   and hand the excess to scrolling instead of stretching the block. */
.lmx-b6-list{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}

/* a custom scrollbar instead of the system one */
.lmx-b6-list{scrollbar-width:thin;scrollbar-color:rgba(82,199,198,.55) transparent}
.lmx-b6-list::-webkit-scrollbar{width:6px}
.lmx-b6-list::-webkit-scrollbar-track{background:transparent}
.lmx-b6-list::-webkit-scrollbar-thumb{background:rgba(82,199,198,.55);border-radius:99px}
.lmx-b6-list::-webkit-scrollbar-thumb:hover{background:var(--b6-accent)}

.lmx-b6-item{position:relative;display:flex;align-items:center;gap:max(8px,calc(13px * var(--block6-scale,1)));width:100%;padding:max(8px,calc(14px * var(--block6-scale,1))) max(10px,calc(18px * var(--block6-scale,1)));text-align:left;background:rgba(255,255,255,.72);border:1px solid rgba(20,26,34,.08);border-radius:max(6px,calc(10px * var(--block6-scale,1)));cursor:pointer;font-family:inherit;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.lmx-b6-item:hover{background:#fff;border-color:rgba(82,199,198,.5);box-shadow:0 4px 14px rgba(20,26,34,.07);transform:translateX(2px)}
/* the accent bar on the left of the active item */
.lmx-b6-item::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:4px 0 0 4px;background:var(--b6-accent);opacity:0;transition:opacity .18s ease}
.lmx-b6-item[aria-selected="true"]{background:#fff;border-color:rgba(82,199,198,.55);box-shadow:0 8px 22px rgba(20,26,34,.09)}
.lmx-b6-item[aria-selected="true"]::before{opacity:1}

.lmx-b6-item-ico{flex:0 0 auto;width:max(18px,calc(26px * var(--block6-scale,1)));height:max(18px,calc(26px * var(--block6-scale,1)));color:#9aa2ab;transition:color .18s ease}
.lmx-b6-item:hover .lmx-b6-item-ico,.lmx-b6-item[aria-selected="true"] .lmx-b6-item-ico{color:var(--b6-accent)}
.lmx-b6-item-ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.lmx-b6-item-txt{flex:1 1 auto;min-width:0}
.lmx-b6-item-name{display:block;font-family:var(--lmx-h1-font-family);font-weight:400;font-size:max(13px,calc(19px * var(--block6-scale,1)));line-height:1.25;color:var(--b6-ink)}
.lmx-b6-item[aria-selected="true"] .lmx-b6-item-name{color:var(--b6-accent)}
.lmx-b6-item-sub{display:block;margin-top:1px;font-size:max(10px,calc(13.5px * var(--block6-scale,1)));color:#7b828a}
.lmx-b6-item-go{flex:0 0 auto;width:max(11px,calc(16px * var(--block6-scale,1)));height:max(11px,calc(16px * var(--block6-scale,1)));color:#a7aeb6;transition:color .18s ease,transform .18s ease}
.lmx-b6-item:hover .lmx-b6-item-go,.lmx-b6-item[aria-selected="true"] .lmx-b6-item-go{color:var(--b6-accent);transform:translateX(3px)}
.lmx-b6-item-go svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* --- the interface window ------------------------------------------------ */
.lmx-b6-window{display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid rgba(20,26,34,.14);border-radius:max(10px,calc(18px * var(--block6-scale,1)));overflow:hidden;box-shadow:0 22px 55px rgba(20,26,34,.14),0 0 0 1px rgba(255,255,255,.7) inset}
/* The screenshot frame is a button (it opens the whole frame in the lightbox):
   the button styling is reset while the previous geometry of the window is
   kept. */
.lmx-b6-shot{position:relative;display:block;flex:1 1 auto;width:100%;min-height:0;padding:0;margin:0;border:0;background:#0a0d10;overflow:hidden;cursor:zoom-in;-webkit-appearance:none;appearance:none;text-align:left}
.lmx-b6-shot:focus-visible{outline:2px solid var(--b6-accent,#52C7C6);outline-offset:-3px}
/* contain rather than cover: the interface frame is shown whole — with cover
   its right edge and bottom were cut off, and that is exactly where the panels
   and the numbers people look at live. The side bars are painted with the
   screenshot's own background. */
.lmx-b6-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .25s ease;pointer-events:none}
.lmx-b6-shot img.is-out{opacity:0}

.lmx-b6-caption{display:flex;align-items:flex-start;gap:max(10px,calc(18px * var(--block6-scale,1)));padding:max(12px,calc(24px * var(--block6-scale,1)));background:#f4f6f8;border-top:1px solid rgba(20,26,34,.08)}
.lmx-b6-caption-icon{flex:0 0 auto;width:max(26px,calc(46px * var(--block6-scale,1)));height:max(26px,calc(46px * var(--block6-scale,1)));color:var(--b6-accent)}
.lmx-b6-caption-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lmx-b6-caption-name{margin:0 0 max(3px,calc(7px * var(--block6-scale,1))) !important;font-family:var(--lmx-h1-font-family);font-weight:400 !important;font-size:max(15px,calc(27px * var(--block6-scale,1))) !important;line-height:1.2 !important;color:var(--b6-ink) !important}
.lmx-b6-caption-text{margin:0 !important;font-size:max(11px,calc(17px * var(--block6-scale,1))) !important;line-height:1.5 !important;font-weight:300;color:#4f565e !important}

/* --- scaling ------------------------------------------------------------- */
@media (min-width:1025px){
.lmx-b6-inner{display:grid;grid-template-rows:auto 1fr;height:100%;min-height:100%;padding-bottom:max(12px,calc(28px * var(--block6-scale,1)))}
}
/* The mobile navigation arrows are a shared component; on desktop there are none. */
.lmx-b6-arrow{--lmx-arrow-scale:var(--block6-scale,1)}
.lmx-b6-mobilenav{display:none}
.lmx-b6-mcount{display:flex;align-items:baseline;gap:6px;font-family:'Outfit',sans-serif}
.lmx-b6-mcount-num{font-weight:300;font-size:30px;color:#15181d;line-height:1}
.lmx-b6-mcount-sep,
.lmx-b6-mcount-total{font-weight:400;font-size:13px;color:#8a8e96}

@media (max-width:1024px){
.lmx-b6-inner{display:block !important;height:auto !important;min-height:0 !important;padding:90px 42px 70px}
.lmx-b6-title{font-size:34px !important}
.lmx-b6-body{grid-template-columns:minmax(0,1fr);gap:22px}
/* The list of 14 buttons is not printed on narrow screens: one selected
   category at a time, paged with the arrows under the card. */
.lmx-b6-side{display:none}
.lmx-b6-shot{height:440px}
.lmx-b6-mobilenav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px}
}
@media (max-width:680px){
.lmx-b6-inner{padding:70px 24px 50px}
.lmx-b6-title{font-size:27px !important}
.lmx-b6-shot{height:260px}
}

@media (prefers-reduced-motion:reduce){
.lmx-b6-item,.lmx-b6-item::before,.lmx-b6-item-go,.lmx-b6-item-ico,.lmx-b6-shot img{transition:none}
.lmx-b6-item:hover{transform:none}
}

/* The compact layout of the block's copy on the core pages (Platform) at a
   window height of ≤740px, added on 2026-09-21 (commit 004913d1), was REMOVED
   on 2026-09-28. It put the list on one line per item (13px, item height 26px
   instead of 63px) and widened the column to 430px so that all 14 items fit
   without scrolling — and in short windows Platform stopped matching the home
   page even though the block is the same. The home page is the reference:
   items at their usual size, and the list itself scrolls inside when there is
   not enough height (.lmx-b6-list has its own scrolling). Nothing specific to
   .lmx-cp is left in this file. */