/* Modern Seller trust-logo row.
   Loaded by index.html and booked.html. Self-contained: no page tokens required,
   so logo-row.preview.html renders it standalone for design iteration. */

.lr-wrap {
  position: relative;
  overflow: hidden;
  /* Fade both ends so logos enter and leave instead of being chopped by the viewport. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.lr-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: lr-scroll 74s linear infinite;
  will-change: transform;
}

/* Pause on hover so anyone scanning for their own employer can actually read it. */
@media (hover: hover) {
  .lr-wrap:hover .lr-track { animation-play-state: paused; }
}

@keyframes lr-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* No chip, no border, no label. The logo sits directly on the page. */
.lr-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  height: 46px;
}

.lr-item img {
  display: block;
  width: auto;
  max-width: 148px;
  /* Force every logo to pure white regardless of its source colour, keeping alpha.
     This is what makes 16 dark-on-transparent source files usable on a dark page. */
  filter: brightness(0) invert(1);
  transition: opacity .28s ease;
}

/* Per-logo opacity is set inline from logo-row.js. Hover lifts the whole row to full
   white via a variable-free override so it wins over the inline value. */
@media (hover: hover) {
  .lr-item:hover img { opacity: 1 !important; }
}

/* On narrow screens both dimensions are capped. max-height matters as much as max-width:
   the per-logo height is set inline in px, so without a cap a tall lockup (DocuSign is
   36px) would nearly fill the shorter row and sit unbalanced next to the wordmarks. */
@media (max-width: 900px) {
  .lr-item { padding: 0 22px; height: 42px; }
  .lr-item img { max-width: 124px; max-height: 30px; }
}

@media (max-width: 560px) {
  .lr-item { padding: 0 17px; height: 38px; }
  .lr-item img { max-width: 106px; max-height: 26px; }
}

/* Reduced motion: stop the scroll and let the row be swiped instead.
   Nothing may become unreachable just because the animation is off. */
@media (prefers-reduced-motion: reduce) {
  .lr-track { animation: none; width: auto; flex-wrap: nowrap; }
  .lr-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
    padding-bottom: 6px;
  }
  /* The duplicate half is decorative; hide it so the list is not read out twice. */
  .lr-track .lr-item[aria-hidden="true"] { display: none; }
  .lr-item img { transition: none; }
}