/* === Modern Minimalist Brand Tiles === */
.section-brand-slider {
  padding: var(--spacing-3xl) 0;
  overflow: hidden;
  background-color: var(--color-bg);
}

.section-brand-slider .section-header {
  margin-bottom: var(--spacing-xl);
}

.brand-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.brand-slider-track {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: max-content;
}

/* --- State: Static (Few Brands) --- */
.brand-slider-wrapper.is-static {
  display: flex;
  justify-content: center;
}

.brand-slider-wrapper.is-static .brand-slider-track {
  width: auto;
  justify-content: center;
  margin: 0 auto;
}

.brand-slider-wrapper.is-static .brand-item.cloned {
  display: none;
}

/* --- Tile UI --- */
.brand-item {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: 1px solid var(--color-border-light);
}

.brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.brand-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition:
    transform var(--transition-base),
    filter var(--transition-base),
    opacity var(--transition-base);
  filter: grayscale(0%);
  opacity: 0.9;
}

[data-theme="dark"] .brand-image {
  filter: invert(1) brightness(1.5);
}

.brand-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

.brand-item:hover .brand-image {
  transform: scale(1.08);
  opacity: 1;
}

/* --- Animation --- */
/* Common scrolling animation for both LTR and RTL for consistency */
.brand-slider-wrapper.is-animating .brand-slider-track {
  animation: brand-scroll 45s linear infinite;
}

.brand-slider-wrapper.is-animating .brand-slider-track:hover {
  animation-play-state: paused;
}

/* 
  Infinite Scroll Logic:
  We translate by exactly half the track width (the duplicated items) 
  plus half the gap to ensure a pixel-perfect loop.
*/
@keyframes brand-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - (var(--spacing-lg) / 2)));
  }
}

/* 
  RTL Handling:
  In RTL mode, browsers anchor flex items to the right. 
  Translating positive (right) often breaks infinite loops due to coordinate systems.
  The most robust way is to force the track to move in a single clear direction (left) 
  by ensuring the starting point is handled correctly.
*/
[dir="rtl"] .brand-slider-wrapper.is-animating .brand-slider-track {
  animation: brand-scroll-rtl 45s linear infinite;
}

@keyframes brand-scroll-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(50% + (var(--spacing-lg) / 2)));
  }
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
  .section-brand-slider {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }

  .brand-item {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-md);
    padding: 8px;
  }

  .brand-slider-track {
    gap: var(--spacing-sm);
  }

  /* Force animation on mobile and adjust speed for smaller distance */
  .brand-slider-wrapper .brand-slider-track {
    animation: brand-scroll 25s linear infinite !important;
  }

  [dir="rtl"] .brand-slider-wrapper .brand-slider-track {
    animation: brand-scroll-rtl 25s linear infinite !important;
  }

  @keyframes brand-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - (var(--spacing-sm) / 2)));
    }
  }

  @keyframes brand-scroll-rtl {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(50% + (var(--spacing-sm) / 2)));
    }
  }
}