/* ===============================
   Pars Logo Infinite Carousel
   - Mobile-safe (no sticky :hover)
   - Smooth marquee by animating track
   - Per-shortcode vars:
       --plc-logo-height-desktop (e.g. 60px)
       --plc-logo-height-mobile (e.g. 72px)
       --plc-speed (e.g. 22s)
   =============================== */

.pars-logo-carousel{
  /* Desktop/mobile height variables (mobile can be larger even if desktop is small) */
  --plc-logo-height-desktop: 60px;
  --plc-logo-height-mobile: 72px;
  --plc-logo-height: var(--plc-logo-height-desktop);
  --plc-speed: 22s;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  padding: 16px 0;
  margin: 0 auto;
  direction: ltr;
  position: relative;
}

/* Optional container direction (RTL text & natural logo order) */
.pars-logo-carousel.plc-rtl{
  direction: rtl;
}

/* Optional movement direction: default is left; add .plc-move-right to go right */
.pars-logo-carousel.plc-move-right .plc-track{
  animation-direction: reverse;
}

/* Track that moves */
.pars-logo-carousel .plc-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: plc-marquee var(--plc-speed) linear infinite;
}

/* Two identical sets side-by-side */
.pars-logo-carousel .plc-set{
  display: flex;
  align-items: center;
  gap: 24px;
  padding-inline-end: 24px; /* space between end & start (logical for RTL/LTR) */
}

/* Reverse logo order in RTL so it feels natural */
.pars-logo-carousel.plc-rtl .plc-set{
  flex-direction: row-reverse;
}

/* Cards */
.pars-logo-carousel .plc-card{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Images */
.pars-logo-carousel .plc-card img{
  display: block;
  height: var(--plc-logo-height);
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.92;
  transition: transform 220ms ease, opacity 220ms ease;
}

.pars-logo-carousel .plc-card:hover img{
  transform: translateY(-2px) scale(1.02);
  opacity: 1;
}

/* IMPORTANT: pause only on devices that really have hover (desktop)
   Otherwise, on mobile a tap can "stick" :hover and freeze the animation. */
@media (hover: hover) and (pointer: fine){
  .pars-logo-carousel:hover .plc-track{
    animation-play-state: paused;
  }
}

/* Marquee animation:
   Two sets are next to each other, so moving left by 50% reveals the second set.
   Because the content is duplicated, it loops seamlessly. */
@keyframes plc-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .pars-logo-carousel .plc-track{
    animation: none !important;
    transform: none !important;
  }
}

/* Mobile: bigger logos + tighter spacing */
@media (max-width: 640px){
  .pars-logo-carousel{
    --plc-logo-height: var(--plc-logo-height-mobile);
    padding: 12px 0;
  }
  .pars-logo-carousel .plc-set{
    gap: 16px;
    padding-inline-end: 16px;
  }
  .pars-logo-carousel .plc-card{
    padding: 8px 14px;
  }
}