/* Self-contained centering: whatever row/column this shortcode lands in
   (including the theme's edge-to-edge "full-width-content" rows, which have
   no max-width of their own) the marquee still lines up with the rest of
   the page's ~1440px centered content instead of running flush to the
   browser edge. */
.dg-logos-marquee{
  width:100%;
  max-width:1920px;
  margin:0 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:24px 24px;
  box-sizing:border-box;
}

.dg-logos-row{
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dg-logos-row.dg-logos-dragging{ cursor:grabbing; }

.dg-logos-track{
  display:flex;
  align-items:center;
  gap:56px;
  width:max-content;
  will-change:transform;
}

/* CSS-only auto-scroll: the no-JS fallback. Once dg-client-logos.js attaches
   (adds .dg-logos-js-ready) it drives the same transform itself via
   requestAnimationFrame so it can respond to dragging, so the keyframe
   animation is switched off to avoid the two fighting over the same property. */
.dg-logos-row--right .dg-logos-track{ animation:dg-logos-scroll-right 38s linear infinite; }
.dg-logos-row--left  .dg-logos-track{ animation:dg-logos-scroll-left 38s linear infinite; }
.dg-logos-row:hover .dg-logos-track{ animation-play-state:paused; }
.dg-logos-js-ready .dg-logos-track{ animation:none; }

.dg-logos-item{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.dg-logos-img{
  height: 48px !important;
  width:auto;
  max-width:160px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.6;
  transition:filter .2s ease, opacity .2s ease;
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
.dg-logos-item:hover .dg-logos-img{ filter:grayscale(0); opacity:1; }

@keyframes dg-logos-scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes dg-logos-scroll-right{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

/* Without JS, honor reduced-motion by turning the row into an ordinary
   scrollable list. With JS active this is skipped — the script itself
   already reads the same preference and simply stops auto-advancing while
   still allowing drag, rather than layering native scroll under our own. */
@media (prefers-reduced-motion: reduce){
  .dg-logos-marquee:not(.dg-logos-js-ready) .dg-logos-track{ animation:none !important; }
  .dg-logos-marquee:not(.dg-logos-js-ready) .dg-logos-row{
    overflow-x:auto; -webkit-overflow-scrolling:touch; cursor:auto;
    mask-image:none; -webkit-mask-image:none;
  }
}

@media (max-width:767px){
  .dg-logos-marquee{ gap:20px; padding:16px 16px; }
  .dg-logos-track{ gap:36px; }
  .dg-logos-img{ height:36px!important; max-width:120px!important; }
  
}