/* CSS variables set by JS */
.utvgs {
  --utvgs-spv: 5;
  --utvgs-gap: 12px;
  --utvgs-h: 60px;
}

.utvgs__wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.utvgs__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--utvgs-gap) * (var(--utvgs-spv) - 1))) / var(--utvgs-spv));
  gap: var(--utvgs-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.utvgs__track::-webkit-scrollbar { height: 8px; }
.utvgs__track::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 999px; }

.utvgs__slide {
  scroll-snap-align: start;
}

.utvgs__item {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.utvgs__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.utvgs__img {
  width: 100%;
  height: var(--utvgs-h);
  object-fit: contain;
  display: block;
}

.utvgs__caption {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.9;
}

/* Arrows */
.utvgs__prev,
.utvgs__next {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: grid;
  place-items: center;
}

.utvgs__prev:hover,
.utvgs__next:hover {
  background: rgba(0,0,0,0.5);
}

/* Dots */
.utvgs__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.utvgs__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
}

/* Hover effects */
.utvgs.is-hover-zoom .utvgs__img { transition: transform .2s ease; }
.utvgs.is-hover-zoom .utvgs__item:hover .utvgs__img { transform: scale(1.05); }

.utvgs.is-hover-lift .utvgs__item { transition: transform .2s ease; }
.utvgs.is-hover-lift .utvgs__item:hover { transform: translateY(-4px); }

.utvgs.is-hover-fade .utvgs__img { transition: opacity .2s ease; }
.utvgs.is-hover-fade .utvgs__item:hover .utvgs__img { opacity: .85; }


/* Disabled arrow styling */
.utvgs__prev:disabled,
.utvgs__next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgb(255 255 255 / 5%);
}

.utvgs__prev:disabled,
.utvgs__next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgb(255 255 255 / 5%);
}


/* ---------------------------------
   Single image (full width) layout
---------------------------------- */
.utvgs.is-layout-single .utvgs__wrap {
  position: relative;
  display: block; /* let arrows overlay */
}

.utvgs.is-layout-single .utvgs__track {
  grid-auto-columns: 100%;
  gap: 0;
  overflow: hidden; /* cleaner for full-width */
}

.utvgs.is-layout-single .utvgs__slide {
  scroll-snap-align: start;
}

.utvgs.is-layout-single .utvgs__img {
  width: 100%;
  height: var(--utvgs-single-h, 420px);
  object-fit: cover; /* full-width hero style */
}

/* Arrows overlayed + vertically centered */
.utvgs.is-layout-single .utvgs__prev,
.utvgs.is-layout-single .utvgs__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.utvgs.is-layout-single .utvgs__prev { left: 12px; }
.utvgs.is-layout-single .utvgs__next { right: 12px; }

/* Optional: bigger arrows for hero slider */
.utvgs.is-layout-single .utvgs__prev,
.utvgs.is-layout-single .utvgs__next {
  width: 44px;
  height: 44px;
}


/* Single layout uses original aspect ratio (responsive height) */
.utvgs.is-layout-single.is-single-original .utvgs__track {
  grid-auto-columns: 100%;
  gap: 0;
}

.utvgs.is-layout-single.is-single-original .utvgs__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}