/* Traka logotipa izabranih klijenata (part/client-logos.twig). */

.client-logos {
  background: var(--white);
}

.client-logos-head {
  max-width: 860px;
}

.client-logos-eyebrow {
  font-weight: 800;
  color: var(--orange-dark);
  text-transform: uppercase;
}

.client-logos-title {
  color: var(--blue-classic);
  font-weight: 900;
  line-height: 1.15;
}

/* Puna širina, ivice izbledele. Vertikalni razmak da senka pločice na hover ne bude odsečena. */
.client-logos-marquee {
  overflow: hidden;
  padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--black) 5%, var(--black) 95%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--black) 5%, var(--black) 95%, transparent);
}

.client-logos-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: client-logos-scroll 50s linear infinite;
}

/* translateX(-50%) pomera traku tačno za jedan niz (drži dva). Zato razmak ide kao margin
   na pločici, ne kao gap — gap bi između dva niza bio jedan manje i petlja bi trznula. */
@keyframes client-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.client-logos-marquee:hover .client-logos-track {
  animation-play-state: paused;
}

/* Slike su 320×180 sa belim poljem oko znaka, pa pločica nema unutrašnji razmak. */
.client-logos-tile {
  flex: 0 0 auto;
  width: 180px;
  margin-right: 0.75rem;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--grey-light, #dee2e6);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (min-width: 768px) {
  .client-logos-tile {
    width: 240px;
    margin-right: 1rem;
  }
}

.client-logos-tile img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
  .client-logos-tile:hover {
    border-color: var(--color-primary, #ff7319);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  .client-logos-tile:hover img {
    filter: none;
    opacity: 1;
  }
}

/* Bez pokreta: duplikat se sklanja, originali se prelamaju u statičan, centriran niz. */
@media (prefers-reduced-motion: reduce) {
  .client-logos-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .client-logos-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
    padding-inline: 0.75rem;
    animation: none;
  }

  .client-logos-tile[aria-hidden="true"] {
    display: none;
  }

  .client-logos-tile,
  .client-logos-tile img {
    transition: none;
  }
}