/* =========================================================================
 * The “Trusted by customers around the world” strip — a shared component
 * (inc/trusted-logos.php): home block 2 and the How LMNTRIX Helps block of the
 * Use Case pages.
 *
 * The rules were moved one to one from assets/css/home/block2-wolf.css
 * (including the narrow-screen variants); the scale is --block2-scale, to which
 * other pages connect their own variable (.lmx-uc: --ms-scale). On the home
 * page the file is loaded before the block 2 CSS, just as these lines used to
 * sit inside it.
 * ====================================================================== */

.lmx-b2-trusted{width:100%;margin:max(9px,calc(22px * var(--block2-scale,1))) auto 0;text-align:center;padding-bottom:max(9px,calc(16px * var(--block2-scale,1)))}
.lmx-b2-trusted-label-row{display:flex;align-items:center;gap:max(8px,calc(14px * var(--block2-scale,1)));margin-bottom:max(5px,calc(11px * var(--block2-scale,1)))}
.lmx-b2-trusted-line{flex:1 1 auto;height:1px;background:rgba(255,255,255,.14)}
.lmx-b2-trusted-label{font-size:max(10px,calc(11px * var(--block2-scale,1))) !important;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.62) !important;white-space:nowrap}
/* Equal cells instead of overall centring: every logo takes its own equal
   column and is centred in it, with an upper bound on the width so that the
   widest wordmark does not pull the row onto itself. The 2026-09-24 set is six
   files of one height (a 120px canvas, transparent background, the mark
   optically aligned in the file itself:
   design-source/feedback/import-trusted-logos.php), so a single CSS height
   gives the same visual mass; object-fit: contain means that when a logo hits
   max-width it is fitted whole, without cropping. */
.lmx-b2-logos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;justify-items:center;gap:max(10px,calc(22px * var(--block2-scale,1)))}
.lmx-b2-logo{height:max(14px,calc(20px * var(--block2-scale,1)));width:auto;object-fit:contain;opacity:.65;filter:grayscale(1) brightness(1.6);transition:opacity .2s ease}
/* Weight (0,2,0): the single-class .lmx-b2-logo loses to the `.lmx-home img`
   reset (height:auto; max-width:100% — see the comment in
   assets/css/home/page.css), so before this rule the logos were shown at their
   natural size. Here the row gets one height (in the 2026-09-24 files the mark
   occupies 60–80 % of the canvas, so the height is larger than the previous
   27px) with an upper bound on the width. */
.lmx-b2-logos .lmx-b2-logo{height:max(26px,calc(40px * var(--block2-scale,1)));width:auto;max-width:min(100%,calc(170px * var(--block2-scale,1)))}
.lmx-b2-logo:hover{opacity:1}
/* A logo that is a link (Use Case pages, “own logos” mode): no underline, with a focus ring. */
.lmx-b2-logo-link{display:inline-flex;align-items:center;text-decoration:none !important;line-height:0}
.lmx-b2-logo-link:hover .lmx-b2-logo{opacity:1}
.lmx-b2-logo-link:focus-visible{outline:2px solid #52C7C6;outline-offset:4px}

@media (max-width:1024px){
.lmx-b2-trusted{margin-top:60px;padding-bottom:0}
}
@media (max-width:768px){
/* Six equal columns would squeeze the marks on a tablet — two rows of three. */
.lmx-b2-logos{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
}
@media (max-width:600px){
.lmx-b2-trusted-label-row{gap:12px}
/* At a narrow width equal columns would squeeze every logo into illegibility —
   the row wraps: two or three marks per row, at one height. */
.lmx-b2-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px}
.lmx-b2-logos .lmx-b2-logo{height:34px;max-width:140px}
}