/**
 * Partner logos: tối đa 4 logo mỗi lần, chuyển slide — logo cũ đi lên + fade, logo mới vào từ dưới + fade.
 * Viewport cố định chiều cao để không nhảy layout khi đổi slide.
 */

.partners-slider--animated {
  /* Ô logo cố định — tăng giá trị này nếu muốn logo cao hơn nữa */
  --partners-logo-cell-h: 60px;
  --partners-logo-gap: 20px;
  --partners-track-h: var(--partners-logo-cell-h);
}

.home-partners-slider.partners-slider--animated,
.about-partners-slider.partners-slider--animated {
  display: block;
  overflow: visible;
  padding-block: var(--space-2);
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
}

/* ≤4 logo: grid tĩnh, không JS rebuild */
.partners-slider--animated.partners-slider--static {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--partners-logo-gap);
  align-items: stretch;
  grid-auto-rows: var(--partners-logo-cell-h);
}

.partners-slider-viewport {
  position: relative;
  width: 100%;
  /* Cố định chiều cao — mọi slide absolute bên trong, không đẩy flow */
  height: var(--partners-track-h);
  min-height: var(--partners-track-h);
  overflow: hidden;
  box-sizing: border-box;
}

/* Tất cả slide chồng cùng một khung — tránh 2 lớp relative làm đôi height */
.partners-slider-slide {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--partners-logo-gap);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.partners-slider-slide--active {
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.partners-slider-slide--hidden {
  z-index: 1;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.partners-slider-slide--exit {
  z-index: 2;
  opacity: 0;
  transform: translateY(-22px);
  pointer-events: none;
}

.partners-slider-slide-pad {
  visibility: hidden;
  pointer-events: none;
  min-height: 0;
}

/* Logo: */
.partners-slider--animated .home-partner-logo,
.partners-slider--animated .about-partner-logo {
  flex: initial;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: var(--partners-logo-cell-h);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgb(var(--color-border-light));
  border-radius: var(--radius-md);
  background: rgb(var(--color-white));
  box-shadow: var(--shadow-card-sm);
  padding-block: var(--space-2);
  padding-inline: clamp(var(--space-2), 1.2vw, var(--space-3));
  transform-origin: center;
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
  scroll-snap-align: unset;
}

.partners-slider--animated .home-partner-logo:hover,
.partners-slider--animated .about-partner-logo:hover {
  transform: scale(1.02);
  border-color: rgba(var(--color-primary), 0.22);
  box-shadow: var(--shadow-card-hover);
}

.partners-slider--animated .home-partner-logo:focus-visible,
.partners-slider--animated .about-partner-logo:focus-visible {
  outline: none;
  border-color: rgba(var(--color-primary), 0.35);
  box-shadow: var(--shadow-focus-ring), var(--shadow-card-hover);
}

.partners-slider--animated .home-partner-logo img,
.partners-slider--animated .about-partner-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.service-ecosystem .partners-slider--animated .home-partner-logo img {
  max-width: 100%;
  max-height: 100%;
}
.partners-slider--animated {
  --partners-logo-cell-h: 80px;
}

@media (max-width: 767px) {
  .partners-slider--animated {
    --partners-track-h: calc(
      var(--partners-logo-cell-h) * 2 + var(--partners-logo-gap)
    );
  }

  .partners-slider--animated.partners-slider--static {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--partners-logo-cell-h);
  }

  .partners-slider-slide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, var(--partners-logo-cell-h)));
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-slider-slide {
    transition: none;
  }

  .partners-slider-slide--hidden {
    transform: none;
  }

  .partners-slider-slide--exit {
    transform: none;
  }

  .partners-slider--animated .home-partner-logo:hover,
  .partners-slider--animated .about-partner-logo:hover {
    transform: none;
  }

  .partners-slider--animated .home-partner-logo,
  .partners-slider--animated .about-partner-logo {
    transition: none;
  }
}