/* =========================================================================
 * Block 5 — Managed Detection and Response (rebuilt 2026-09-23).
 *
 * The composition is the shared solution catalogue
 * (inc/solution-catalogue.php, styles in
 * assets/css/shared/solution-catalogue.css, handle lmx-solution-catalogue,
 * loaded BEFORE this file): the heading, the description and a numbered list
 * of six capabilities on the left, a deck of illustrated cards on the right.
 * Only what makes the home block different from the Use Cases hub block lives
 * here:
 *   - the scale bridge: the catalogue sizes itself from --ms-scale while the
 *     home page fits the block through --block5-scale (page.js measures
 *     .lmx-b5-inner);
 *   - six items instead of three: the list is tighter so that the block fits
 *     the window;
 *   - the illustrations are fragments of the mockup with different
 *     proportions: contain on a dark backdrop rather than cover (otherwise the
 *     edges are trimmed);
 *   - the “Book a Demo” button under the deck (the catalogue's `after` slot).
 * The old 2+4 grid rules went away together with the grid.
 * ====================================================================== */

.lmx-b5-inner{position:relative;width:100%;min-height:100vh;background:#050708 !important;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;box-sizing:border-box;overflow:visible;--block5-scale:1;--ms-scale:var(--block5-scale,1);--lmx-btn-height:max(42px,calc(53px * var(--block5-scale,1)));--lmx-btn-padding-x:max(20px,calc(30px * var(--block5-scale,1)));--lmx-btn-font-size:max(11px,calc(13px * var(--block5-scale,1)));--lmx-h1-font-family:'Outfit','Poppins',sans-serif}
.lmx-b5-inner *{box-sizing:border-box}

/* The catalogue takes the height of the block; the section background belongs
   to .lmx-b5-inner. The catalogue's min-height is NOT in vh: page.js picks the
   scale from the scrollHeight of the root, and a nested min-height:100vh would
   never let the content become shorter than the window — the scale would run
   to its minimum. */
.lmx-b5-inner .lmx-sol-inner{min-height:0;height:100%;padding-top:max(20px,calc(36px * var(--block5-scale,1)));padding-bottom:max(18px,calc(28px * var(--block5-scale,1)))}

/* The block heading uses the same tokens as the neighbouring home blocks. */
.lmx-b5-inner .lmx-sol-title{font-family:var(--lmx-h1-font-family) !important;font-weight:300 !important;font-size:max(26px,calc(46px * var(--block5-scale,1))) !important;line-height:1.1 !important;letter-spacing:-.01em}
.lmx-b5-inner .lmx-sol-desc{max-width:calc(420px * var(--block5-scale,1));font-size:max(12px,calc(15px * var(--block5-scale,1)));line-height:1.55}

/* Six items: shorter rows and a smaller size than the three categories of the hub. */
.lmx-b5-inner .lmx-sol-tab{padding:max(7px,calc(11px * var(--block5-scale,1))) 0}
.lmx-b5-inner .lmx-sol-tab-title{font-size:max(14px,calc(19px * var(--block5-scale,1)));line-height:1.2}
.lmx-b5-inner .lmx-sol-tab-num{font-size:max(10px,calc(12px * var(--block5-scale,1)))}

/* The illustrations are fragments of the mockup: shown whole, on a backdrop in the card colour. */
.lmx-b5-inner .lmx-sol-card-visual--image{background:#050607}
.lmx-b5-inner .lmx-sol-card-img{object-fit:contain;object-position:center}
.lmx-b5-inner .lmx-sol-card-visual{height:46%}
.lmx-b5-inner .lmx-sol-card-desc{font-size:max(12px,calc(15px * var(--block5-scale,1)))}

/* The button under the deck is centred, with the same rhythm as in the old block. */
.lmx-b5-inner .lmx-sol-after{display:flex;justify-content:center;margin-top:max(12px,calc(22px * var(--block5-scale,1)))}

@media (max-width:1024px){
.lmx-b5-inner{min-height:0}
.lmx-b5-inner .lmx-sol-inner{min-height:0}
.lmx-b5-inner .lmx-sol-tab{padding:10px 16px}
}

/* Illustrations from code (inc/home-b5-art.php): SVG across the whole visual frame, no cropping. */
.lmx-b5-inner .lmx-sol-card-visual--art{background:#0b1416;border-color:rgba(82,199,198,.18)}
.lmx-b5-inner .lmx-sol-card-visual--art .lmx-b5-art-svg{position:absolute;inset:0;width:100%;height:100%;display:block}