/* Field Cover home, private beta state, pass 24: the customer logo row, every logo hidden under a censor mosaic.
   Loaded after states/private-beta.css. Every value is an Almanac 21 token.
   The mosaics are SVGs of square blocks in currentColor (one path per tone, shape-rendering crispEdges), 6 blocks
   tall; each carries its width in blocks as --fcb-cols. Blocks are 8px (fc-space-8), 6px on phones (half fc-space-12).
   The row is laid out on one block lattice: columns are whole blocks wide and each logo is centred to the block below
   centre, so every block in the row lines up with every other, as if one mosaic had been laid over the whole list.
   (The half pixel in each round() keeps layout's sub-pixel arithmetic from dropping a whole block.)
   Not in the system yet: if kept, this becomes a "hidden" variant of the logo row in bundle.css. */

.fcb-logos { --fcb-block: var(--fc-space-8); --fcb-n: 6;
  display: grid; grid-template-columns: repeat(var(--fcb-n), minmax(0, 1fr)); /* fallback where round() isn't supported */
  grid-template-columns: repeat(var(--fcb-n), round(down, calc(100% / var(--fcb-n) + 0.5px), var(--fcb-block)));
  justify-content: start; justify-items: stretch; align-items: center; gap: var(--fc-space-16) 0; }
.fcb-logos li { width: auto; height: auto; min-height: var(--fc-logo-chip-h); justify-content: flex-start; }
.fcb-logos .fcb-mosaic { display: block; flex: none; max-width: none; max-height: none; color: var(--fc-text);
  width: calc(var(--fcb-cols) * var(--fcb-block)); height: calc(6 * var(--fcb-block));
  margin-left: auto; margin-right: auto; /* fallback */
  margin-left: round(down, calc((100% - var(--fcb-cols) * var(--fcb-block)) / 2 + 0.5px), var(--fcb-block)); margin-right: 0; }

@container fc (max-width: 900px) {
  .fcb-logos { --fcb-n: 3; row-gap: var(--fc-space-24); }
}
@container fc (max-width: 640px) {
  .fcb-logos { --fcb-block: calc(var(--fc-space-12) / 2); --fcb-n: 2; row-gap: var(--fc-space-12); } /* 6px blocks: the same mosaic, three quarters size */
  .fcb-logos li { min-height: var(--fc-logo-chip-h-phone); }
}