/* Vanti / TARS – Logos Slider (Marquee) */

.vanti-logos-slider{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;

  --vanti-logo-h: 70px;
  --vanti-gap: 48px;
  --vanti-duration: 20s; /* recalculated by JS */
  --vanti-per-view: 6;
  --vanti-per-view-tablet: 4;
  --vanti-per-view-mobile: 2;
  --vanti-cols: 6;
  --vanti-rows: 1;
  --vanti-min-w: 120px;
  --vanti-max-w: 240px;
  --vanti-justify: space-between;
}

.vanti-logos-slider,
.vanti-logos-slider *{
  box-sizing: border-box;
}

.vanti-logos-viewport{
  overflow: hidden;
  width: 100%;
}

.vanti-logos-track{
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: vantiLogosMarquee var(--vanti-duration) linear infinite;
}

.vanti-logos-slider.is-pause:hover .vanti-logos-track{
  animation-play-state: paused;
}

.vanti-logos-track-inner{
  display: flex;
  align-items: center;
  gap: var(--vanti-gap);
  padding-right: var(--vanti-gap);
}

/* ---------- Layout: items (cinta continua) ---------- */
.vanti-logos-slider.layout-items .vanti-logo-item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--vanti-item-w, 180px); /* JS lo ajusta */
  max-width: 320px;
}

/* ---------- Layout: blocks (grid ordenado) ---------- */
.vanti-logos-slider.layout-blocks.block-grid .vanti-logos-track-inner{
  align-items: stretch;
}

.vanti-logos-slider.layout-blocks.block-grid .vanti-logo-block{
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--vanti-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--vanti-rows), 1fr);
  gap: var(--vanti-gap);
  align-items: center;
  justify-items: center;
}

/* ---------- Layout: blocks (flex natural) ---------- */
.vanti-logos-slider.layout-blocks.block-flex .vanti-logo-block,
.vanti-logos-slider.layout-blocks .vanti-logo-block.is-flex{
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vanti-gap);
  justify-content: var(--vanti-justify);
  align-items: center;
}

.vanti-logos-slider.layout-blocks.block-flex .vanti-logo-item,
.vanti-logos-slider.layout-blocks .vanti-logo-block.is-flex .vanti-logo-item{
  flex: 1 1 var(--vanti-min-w);
  min-width: var(--vanti-min-w);
  max-width: var(--vanti-max-w);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Common item/link/img */
.vanti-logos-slider.layout-blocks .vanti-logo-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vanti-logo-link,
.vanti-logo-figure{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.vanti-logo-img{
  height: var(--vanti-logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.vanti-logos-slider.is-grayscale .vanti-logo-img{
  filter: grayscale(100%);
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease;
}

.vanti-logos-slider.is-grayscale .vanti-logo-link:hover .vanti-logo-img{
  filter: none;
  opacity: 1;
}

@keyframes vantiLogosMarquee{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

/* Tablet */
@media (max-width: 1024px){
  .vanti-logos-slider{ --vanti-gap: var(--vanti-gap-tablet, clamp(18px, 2.5vw, 34px)) !important; }

  .vanti-logos-slider.layout-blocks.block-grid{
    --vanti-cols: var(--vanti-per-view-tablet);
  }
}

/* Mobile */
@media (max-width: 640px){
  .vanti-logos-slider{
    --vanti-gap: var(--vanti-gap-mobile, clamp(12px, 4vw, 22px)) !important;
  }
  .vanti-logos-slider.layout-blocks.block-grid{
    --vanti-cols: var(--vanti-per-view-mobile);
  }
}