/* =========================================================
   Stafflancer Controls — Logo Carousel (Option B)
   Shortcode: [slc_logo_carousel]
   - Light: white pill + premium black logos
   - Dark:  dark pill  + premium white logos
   - Hover shows original logo (optional)
   ========================================================= */

.slc-logo-carousel{
  width:100%;
  max-width:var(--slc-lc-max,1100px);
  margin:0 auto;
  border-radius:var(--slc-lc-radius,40px);
  background:var(--slc-lc-bg-light,#fff);
  padding:var(--slc-lc-pad-y,18px) var(--slc-lc-pad-x,24px);
  box-sizing:border-box;
}
.sl-theme-dark .slc-logo-carousel{
  background:var(--slc-lc-bg-dark,#0f1115);
}

.slc-lc__inner{display:flex;flex-direction:column;gap:var(--slc-lc-inner-gap,14px);}

.slc-lc__title{
  text-align:center;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  color:rgba(0,0,0,.74);
}
.sl-theme-dark .slc-lc__title{color:rgba(255,255,255,.78);}

.slc-lc__marquee{overflow:hidden;position:relative;width:100%;}
.slc-lc__track{
  display:flex;
  align-items:center;
  line-height:0;
  padding:2px 0; /* breathing room to prevent top/bottom clipping */
  gap:var(--slc-lc-gap,44px);
  width:max-content;
  flex-wrap:nowrap;
  will-change:transform;
}

/* Motion */
.slc-logo-carousel.is-autoplay .slc-lc__track{
  animation: slcLcmove var(--slc-lc-speed,22s) linear infinite;
}
.slc-logo-carousel.is-pause:hover .slc-lc__track{animation-play-state:paused;}

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

@media (prefers-reduced-motion: reduce){
  .slc-logo-carousel.is-autoplay .slc-lc__track{animation:none !important;}
}

.slc-lc__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  flex-shrink:0;
  height:auto;
  padding:6px 0; /* ensures the pill never clips tall logos */
  text-decoration:none;
  border:0;
  background:transparent;
  line-height:1;
}

.slc-lc__img{
  height:var(--slc-lc-logo-h,32px);
  width:auto;
  max-width:none;
  display:block;
  opacity:1;
  transform:translateZ(0);
  transition:filter .18s ease, opacity .18s ease;
}

/* Premium conversion filters */
.slc-logo-carousel--auto .slc-lc__img,
.slc-logo-carousel--always_black .slc-lc__img{
  filter: grayscale(1) saturate(0) brightness(0) contrast(var(--slc-lc-contrast-black,2.2));
}
.sl-theme-dark .slc-logo-carousel--auto .slc-lc__img,
.slc-logo-carousel--always_white .slc-lc__img{
  filter: grayscale(1) saturate(0) brightness(0) contrast(var(--slc-lc-contrast-white,2.2)) invert(1);
}

.slc-logo-carousel--original .slc-lc__img{filter:none !important;}

/* Hover shows original logo (approved) */
.slc-logo-carousel.is-hover-original .slc-lc__logo:hover .slc-lc__img{filter:none !important;}

/* Responsive */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
  .slc-lc__marquee{padding:4px 0;}

  /* Default portrait tablet sizing (admin controlled) */
  .slc-lc__track{gap:var(--slc-lc-gap-tp, var(--slc-lc-gap-t,44px));}
  .slc-lc__img{height:var(--slc-lc-logo-h-tp, var(--slc-lc-logo-h-t,32px));}
  .slc-lc__logo{padding:7px 0;}

  /* Match desktop sizing (fix tiny logos) */
  .slc-logo-carousel.is-portrait-match .slc-lc__track{gap:var(--slc-lc-gap,44px);}
  .slc-logo-carousel.is-portrait-match .slc-lc__img{height:var(--slc-lc-logo-h,32px);}
}

@media (max-width: 767px){
  .slc-logo-carousel{
    padding:14px 16px;
    max-width:100%;
    margin:0;
    border-radius:28px;
  }
  .slc-lc__marquee{padding:6px 0;}
  .slc-lc__track{gap:var(--slc-lc-gap-m,28px);}
  .slc-lc__img{height:var(--slc-lc-logo-h-m,20px);}
  .slc-lc__logo{padding:8px 0;}
}