/* ============================================================
   Signature Homeworx — Rotating Gallery widget.
   Brand tokens below; sizing overrides arrive as --shxg-* custom
   properties written onto the wrapper by Elementor-generated CSS
   (the widget's selectors), or inline in the test harness.
   ============================================================ */
.shx-g {
  --shxg-navy: #0D0040;
  --shxg-radius: 12px;
  --shxg-height: 260px;
  --shxg-gap: 16px;
  --shxg-font: 'Outfit', system-ui, sans-serif;
  font-family: var(--shxg-font);
}

.shx-g__viewport {
  position: relative; /* offsetLeft anchor for step-mode targeting */
  overflow: hidden;
}

.shx-g__track {
  display: flex;
  column-gap: var(--shxg-gap);
  width: -moz-max-content;
  width: max-content;
}

.shx-g__item {
  margin: 0;
  flex: 0 0 auto;
}

.shx-g__item img {
  display: block;
  height: var(--shxg-height);
  width: auto;
  max-width: none; /* themes commonly set img { max-width: 100% } — that would crush natural-aspect widths */
  object-fit: cover;
}

.shx-g--rounded .shx-g__item img {
  border-radius: var(--shxg-radius);
}

/* Continuous flow — class + custom props added by JS after measurement */
@keyframes shxg-flow {
  to { transform: translateX(var(--shxg-shift, -50%)); }
}
.shx-g--flow .shx-g__track {
  animation: shxg-flow var(--shxg-duration, 30s) linear infinite;
}
.shx-g--flow-right .shx-g__track {
  animation-direction: reverse;
}
.shx-g--flow:hover .shx-g__track,
.shx-g--flow:focus-within .shx-g__track {
  animation-play-state: paused;
}

/* Reduced motion: static, natively scrollable strip (tabindex added by JS) */
.shx-g--static .shx-g__viewport {
  overflow-x: auto;
}
.shx-g--static .shx-g__viewport:focus-visible {
  outline: 3px solid var(--shxg-navy);
  outline-offset: 2px;
}

/* Backstop if the OS preference flips after init */
@media (prefers-reduced-motion: reduce) {
  .shx-g__track { animation: none !important; }
}