/*
 * Ticker Stack component.
 *
 * Rows may be created with native HTML or Elementor containers. JavaScript
 * builds the repeated track required for a seamless, transform-only loop.
 */

.mmg-ticker-stack {
  --mmg-ticker-stack-gap: clamp(8px, 1.1vw, 18px);
  --mmg-ticker-row-height: clamp(72px, 10vw, 150px);
  --mmg-ticker-item-gap: clamp(28px, 4vw, 72px);
  position: relative;
  display: grid;
  gap: var(--mmg-ticker-stack-gap);
  width: 100%;
  min-width: 0;
  padding-block: clamp(24px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.mmg-ticker-stack__row {
  --mmg-ticker-angle: 0deg;
  position: relative !important;
  display: flex !important;
  align-items: center;
  width: 112vw !important;
  min-width: 112vw !important;
  height: var(--mmg-ticker-row-height);
  min-height: var(--mmg-ticker-row-height) !important;
  margin-left: -6vw !important;
  padding: 0 !important;
  overflow: hidden;
  transform: rotate(var(--mmg-ticker-angle));
  transform-origin: center center;
  background: var(--mmg-ticker-background, #f0443e);
  color: var(--mmg-ticker-color, #111820);
}

.mmg-ticker-stack__track,
.mmg-ticker-stack__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: max-content;
  min-width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mmg-ticker-stack__track {
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

.mmg-ticker-stack__group {
  gap: var(--mmg-ticker-item-gap);
  padding-right: var(--mmg-ticker-item-gap);
}

.mmg-ticker-stack__item {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
}

.mmg-ticker-stack[data-mmg-ticker-ready="true"]
  .mmg-ticker-stack__row,
.mmg-ticker-stack[data-mmg-ticker-ready="true"]
  .mmg-ticker-stack__track {
  transition: none !important;
}

@media (max-width: 767px) {
  .mmg-ticker-stack {
    --mmg-ticker-stack-gap: 8px;
    --mmg-ticker-row-height: clamp(64px, 20vw, 96px);
    --mmg-ticker-item-gap: 28px;
    padding-block: 32px;
  }

  .mmg-ticker-stack__row {
    width: 120vw !important;
    min-width: 120vw !important;
    margin-left: -10vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmg-ticker-stack__track {
    transform: none !important;
  }
}