/* ==========================================================================
   Trust bar — "Trusted by the best" logo strip. Logic only borrowed from
   the user's old site (a right-to-left row of client logos), rebuilt as a
   constant-speed CSS marquee instead of the old Swiper carousel's stepped
   autoplay (jump → pause → jump). Placeholder marks are original abstract
   icons (no real brand logos), grayscale by default so any logo — ours or
   real client SVGs swapped in later — reads as one harmonious set
   regardless of its native colors. No hover interaction anywhere in this
   block by design — it's ambient background motion, not interactive UI.
   ========================================================================== */

.trust {
  padding: 64px 0 72px;
  background: #121216;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trust__label {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-8);
}

/* Constrained to the site's normal content column (same max-width/padding
   as the header/banner), not the full browser width — the fade should
   happen at the edges of that working area, not at the screen edges. */
.trust__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.trust__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.trust__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trustDrift 126s linear infinite;
}

/* Same seamless-loop principle as the banner mosaic: spacing lives on each
   item's own margin, not `gap` (gap's n-1-gaps-for-n-items math breaks the
   exact doubling -50% depends on for a clean seam), one constant speed, no
   easing/step artifacts. The 7 logos are repeated 3x into one "unique"
   block before that whole block is duplicated once more for the loop —
   with only 7 logos the single set isn't reliably wider than the visible
   area on a large monitor, which is exactly what caused rows to visibly
   run dry before reaching the seamless seam. Tripling first guarantees the
   unique block comfortably outspans the container regardless of screen
   size, so the seam is never visible. */
@keyframes trustDrift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trust__logo {
  flex: 0 0 auto;
  margin-right: 72px;
  display: flex;
  align-items: center;
  color: var(--color-text-faint);
  filter: grayscale(1);
  opacity: 0.55;
}

.trust__logo-mark {
  display: block;
  height: 60px;
  width: auto;
}

/* Uploaded client logos (PNG/SVG) — matched to the default marks' scale. */
.trust__logo-img {
  display: block;
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .trust {
    padding: var(--space-12) 0;
  }
  .trust__logo {
    margin-right: 48px;
  }
  .trust__logo-mark,
  .trust__logo-img {
    height: 44px;
  }
}

/* Inlined uploaded SVG logos — same default scale as the built-in marks; the
   per-logo height (--logo-h, set in the editor) overrides it. */
.trust__logo-svg {
  display: block;
  height: var(--logo-h, 60px);
  width: auto;
}

/* Custom logo colour (set in the block): drop the default grayscale + fade and
   tint every inline SVG shape. Uploaded PNGs keep their own colours; uploaded
   SVGs are inlined so they DO recolour. fill="none" (outlines) is left alone. */
.trust--tinted .trust__logo {
  color: var(--logo-color);
  filter: none;
  opacity: 1;
}
.trust--tinted .trust__logo svg { fill: currentColor; }
.trust--tinted .trust__logo svg [fill]:not([fill="none"]) { fill: currentColor !important; }