/**
 * Partner Section Styles
 *
 * @package Yusuf_Theme
 */

/* ========================================
   PARTNER SECTION
   ======================================== */

.partner-section {
  background-color: var(--color-bg-light);
  padding: var(--spacing-section-mobile) 0;
  text-align: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .partner-section {
    padding: var(--spacing-section-tablet) 0;
  }
}

@media (min-width: 1024px) {
  .partner-section {
    padding: var(--spacing-section-desktop) 0;
  }
}

.partner-section__headline {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  color: var(--color-teal-dark);
  margin-bottom: var(--spacing-8);
}

/* ========================================
   PARTNER GRID
   ======================================== */

.partner-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-16);
}

.partner-grid__item {
  flex: 0 0 auto;
  transition: transform var(--transition-normal);
}

.partner-grid__item:hover {
  transform: translateY(-2px);
}

.partner-grid__item img {
  height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all var(--transition-normal);
}

.partner-grid__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (min-width: 768px) {
  .partner-grid__item img {
    height: 50px;
  }
}

/* ========================================
   SPONSOR MARQUEE
   ======================================== */

.sponsor-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.sponsor-marquee__track {
  display: flex;
  gap: var(--spacing-12);
  animation: marquee 30s linear infinite;
  width: max-content;
}

.sponsor-marquee:hover .sponsor-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sponsor-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .sponsor-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.sponsor-marquee__item {
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.sponsor-marquee__item:hover {
  transform: scale(1.1);
}

.sponsor-marquee__item img {
  height: 30px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-normal);
}

.sponsor-marquee__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (min-width: 768px) {
  .sponsor-marquee__item img {
    height: 40px;
  }
}

/* ========================================
   EMPTY STATE
   ======================================== */

.partner-section__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}