/* Metal Craft Engineering: the moving client logo strip (.logo-run, round B3). Link it in the body just before the
   strip; logos.js drives it. The track also carries the logo wall's class (.logos, style.css and theme.css), so without
   scripts and in print it is exactly the wall: the slides wrap into its bordered grid. With scripts it is one sideways
   row (.is-row): under reduced motion a still row with a thin scrollbar; when motion is allowed (.is-live) the row
   glides and its scrollbar is not drawn (touch and trackpads still scroll it, and a keyboard reaches every slide, which
   the browser scrolls into view). Every slide, logo or wordmark, is the same outer box (.logo-item). No stop plate
   (owner, 26 Oct 11:40). Markup contract: shared/round-B3/build-patches/B7-CONTRACTS.md (a). */
/* The strip never widens the page: it takes its width from the column (min-width 0 in any grid or flex parent) and
   clips anything that would run past it (overflow-x:clip makes no scroll box). The row is position:relative, so the
   visually hidden names inside the slides (absolutely positioned) are clipped by the row's own scroll box too: without
   it they escaped it and stretched a 390 px phone page to 1,769 px. */
.logo-run{position:relative;min-width:0;max-width:100%;overflow-x:clip}
.logo-item{margin:0}
html.js .logo-run.is-row{display:flex;flex-direction:column}
html.js .logo-run.is-row .logo-track{position:relative;display:flex;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
html.js .logo-run.is-row .logo-item{flex:0 0 12.5rem}
/* The site's focus ring (2 px, 3 px out) would be cut by the strip's edges and the row's scroll box, so inside the strip
   it is drawn inside the slide (3 px in from its edge): the whole ring shows on the first and the last slide too. */
.logo-run .logo-item:focus-visible{outline-offset:-5px}
/* slop-ok: marquee owner-requested client logo carousel (steelworks.in), slow, pauses on hover/touch/focus, off under reduced motion */
html.js .logo-run.is-live .logo-track{scrollbar-width:none}
html.js .logo-run.is-live .logo-track::-webkit-scrollbar{display:none}
/* The logos a size up from the wall's 42 px (Q1 lower: 44 x 42 in a 200 x 118 slide read small): 56 px at 1024, 64 px
   from about 1350; the wall's ink grade is unchanged. */
.logo-run .logo-item img{max-height:clamp(2.625rem,3vw + 1.5rem,4rem)}
@media (max-width:960px){html.js .logo-run.is-row .logo-item{flex-basis:11rem}}
@media (max-width:640px){html.js .logo-run.is-row .logo-item{flex-basis:9.5rem}}
@media print{
  .logo-run .logo-track{display:grid!important;overflow:visible!important}
  .logo-run .logo-item[data-clone]{display:none!important}
}
