/* Docs: https://wf-starter-embeds-docs.vercel.app/docs/global-embeds/logo-wall
 *
 * @release v1.59.244
 *
 * CDN-served. Load in Head (same jsDelivr ref as logo-wall.js). Not a paste embed.
 *
 * The wrapper is the mask: it clips its Tracks at whatever width the Designer
 * gives it. Nothing here sizes the wrapper — full-bleed is a Designer layout
 * choice, not a rule in this file.
 *
 * TWO STATES, ONE LOOK. This stylesheet lands in Head; the script is deferred
 * and waits on parse plus the page's synchronous GSAP tags. On a slow
 * connection that gap is visible, so FIRST PAINT MUST ALREADY BE A CLIPPED
 * CENTERED ROW — otherwise the authored markup (Webflow's block-level CMS
 * chain, or plain items) paints as a tall vertical stack first.
 *
 *   PRE-INIT   the wrapper is a centered ROW, and the CMS chain inside it is
 *              flattened into that row by the .w-dyn-* rules below.
 *   POST-INIT  `data-logo-wall-inited="true"` flips the wrapper to a COLUMN of
 *              script-built Tracks. initWrapper writes that attribute only
 *              AFTER it has built them, in the same synchronous task, so the
 *              browser never paints the column layout against the authored
 *              markup — and a wrapper the script bails on (stray children, no
 *              items) keeps the pre-init row instead of snapping to a stack.
 *
 * Both states keep overflow:hidden and max-width:100% on the wrapper, and both
 * centre a too-wide row inside it — pre-init on the main axis, post-init on the
 * cross axis. The .w-dyn-* rules go inert once removeCMSList deletes those nodes.
 *
 * HEIGHT ACROSS THE FLIP. A single-band wall (data-logo-wall-tracks="1", what
 * the homepage uses) is pixel-identical either side of it: one row before, one
 * Track after. A MULTI-band wall is NOT — pre-init is still a single row, and
 * arming adds the other N-1 Track rows plus their gaps, so the wrapper grows
 * once and the content below shifts down. CSS cannot derive that height from
 * the track count; reserve it with a min-height on the wrapper in Designer.
 */

[data-logo-wall-element='wrapper'] {
  display: flex;
  /* Pre-init default; the inited rule below flips it. */
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  /* overflow:hidden clips what PAINTS; it does not cap what the wrapper
   * CONTRIBUTES to intrinsic sizing. In a shrink-to-fit or flex-shrink:0
   * parent the wrapper would otherwise grow to the full cloned band and push
   * the page wide. A cap only — deliberately no width and no margins, which is
   * what the retired viewport bleed was made of. */
  max-width: 100%;
}

/* The armed wall: a column of Tracks, each centered on the cross axis.
 * `justify-content: center` here deliberately mirrors the base rule's
 * `align-items: center` across the axis flip: the row state centres vertically
 * through align-items, the column state through justify-content. Leaving this
 * at `normal` would pack the Tracks at the top, so a wrapper taller than its
 * content — exactly the min-height reservation documented above — would jump
 * the band upwards at arm. On a content-sized wrapper it is a no-op. */
[data-logo-wall-element='wrapper'][data-logo-wall-inited='true'] {
  flex-flow: column nowrap;
  justify-content: center;
}

/* Webflow's CMS chain, before the script removes it. Depth-independent on
 * purpose: display:contents helper divs may sit anywhere between the wrapper
 * and the list, and flattenDisplayContents only deals with them at init.
 * `flex: none` keeps the row at its natural width so the wrapper clips it
 * rather than squeezing the logos. */
[data-logo-wall-element='wrapper'] .w-dyn-list,
[data-logo-wall-element='wrapper'] .w-dyn-items {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  column-gap: inherit;
  flex: none;
}

[data-logo-wall-element='wrapper'] .w-dyn-item {
  flex: none;
}

/* GAP RELAY. `column-gap: inherit` copies the DIRECT parent's computed value,
 * and a display:contents helper between the wrapper and the list computes
 * `normal` — which is 0, so the pre-init logos sat flush together and the strip
 * jumped horizontally at arm. Each helper level has to re-inherit the wrapper's
 * gap for the chain to survive. Selecting on computed display is not possible
 * in CSS, so this is keyed on the two helper classes the script itself knows
 * (see isContentsHelper); do NOT give them a display, that would destroy the
 * display:contents they exist for. A custom helper class outside this list
 * breaks the chain pre-init only — arming rebuilds the Tracks and restores the
 * gap either way. */
[data-logo-wall-element='wrapper'] .u-display-contents,
[data-logo-wall-element='wrapper'] .display-contents {
  column-gap: inherit;
}

[data-logo-wall-element='track'] {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  column-gap: inherit;
  width: max-content;
}

[data-logo-wall-element='item'],
[data-logo-wall-element='track'] > [data-logo-wall-clone] {
  flex: none;
}