/* ===========================================
   Партнери — grid і marquee
   Додати в кінець styles.css
   =========================================== */

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

.partner-item {
  aspect-ratio: 1/1;
  background: var(--uv-white);
  border: 1px solid var(--uv-line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.partner-item:hover {
  border-color: var(--uv-gold);
  box-shadow: 0 4px 20px rgba(26,54,95,.1);
}
.partner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.partner-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter .2s ease, opacity .2s ease;
}
.partner-item:hover .partner-link img {
  filter: grayscale(0%);
  opacity: 1;
}
.partner-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--uv-ink-soft);
  text-align: center;
  line-height: 1.3;
}

/* ── Marquee animation ── */
@keyframes uv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partners-marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.partners-marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  width: max-content;
  animation: uv-marquee 32s linear infinite;
}
.partners-marquee-track:hover { animation-play-state: paused; }
.partners-marquee-track .partner-item {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.partners-marquee-track--mobile { animation-duration: 18s; }
.partners-marquee-track--mobile .partner-item {
  width: 110px;
  height: 110px;
}

/* ── Desktop / Mobile switching ── */
.partners-desktop-grid { display: block; }
.partners-mobile-grid  { display: none;  }

@media (max-width: 768px) {
  .partners-desktop-grid { display: none;  }
  .partners-mobile-grid  { display: block; }
  .partners-mobile-grid .partners-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .partners-mobile-grid .partner-item { padding: 12px; }
}
@media (max-width: 400px) {
  .partners-mobile-grid .partners-grid { grid-template-columns: repeat(2, 1fr); }
}