/* ========================================
   Clients & Partners Logos Section
   CSS marquee — plynulý nekonečný horizontálny scroll
   Desktop: 2 rady (LTR + RTL). Mobile: 3 rady, menšie logá.
   ======================================== */

.section.clients-logos {
  padding: var(--space-10) 0;
  background: transparent;
  overflow: visible;
}

.clients-logos .container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
  display: block;
}

.clients-logos__marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.clients-logos__row {
  overflow: hidden;
  width: 100%;
  contain: layout paint;
  min-height: 100px;
}

.clients-logos__track {
  display: flex;
  align-items: center;
  /* No 'gap' — items use margin-right so trailing space exists on every item.
     This makes the duplicate set start at exactly 50% of track width,
     so translateX(-50%) loops seamlessly without a half-gap snap. */
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: clients-logos-marquee-ltr 40s linear infinite;
}

.clients-logos__row--rtl .clients-logos__track {
  animation-name: clients-logos-marquee-rtl;
}

/* Desktop: dva rady, mobile-only row skrytý */
.clients-logos__row--mobile {
  display: none;
}

.clients-logos__item {
  flex: 0 0 auto;
  width: 220px;
  margin-right: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
}

.clients-logos__logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients-logos__logo img,
.clients-logos__logo svg {
  width: 100%;
  height: 100px;
  object-fit: contain;
  filter: var(--theme-logo-filter);
}

.clients-logos__logo--square img,
.clients-logos__logo--square svg {
  height: 160px;
}

@keyframes clients-logos-marquee-ltr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes clients-logos-marquee-rtl {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Mobile: tretí rad sa zapne, logá zmenšené, hustejšie balenie */
@media (max-width: 768px) {
  .section.clients-logos {
    padding: var(--space-8) 0;
  }

  .clients-logos__marquee {
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }

  .clients-logos__row--mobile {
    display: block;
  }

  .clients-logos__track {
    animation-duration: 37.5s;
  }

  .clients-logos__item {
    width: 120px;
    margin-right: var(--space-5);
    padding: var(--space-2) var(--space-3);
  }

  .clients-logos__row {
    min-height: 50px;
  }

  .clients-logos__logo img,
  .clients-logos__logo svg {
    height: 50px;
  }

  .clients-logos__logo--square img,
  .clients-logos__logo--square svg {
    height: 80px;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .clients-logos__track {
    animation: none;
    transform: none;
  }
}