/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
.ug-swiper {
  width: 100%;
  overflow: hidden;
}

.ug-swiper img {
  width: 100%;
  display: block;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

/* ─────────────────────────────────────────
   SKIN: GRID
   Swiper dinonaktifkan — layout CSS Grid statis
───────────────────────────────────────── */
.ug-skin-grid .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--ug-cols, 3), 1fr);
  gap: var(--ug-gap, 20px);
  flex-wrap: unset;          /* override Swiper flex */
  transform: none !important;
  width: 100% !important;
}

.ug-skin-grid .swiper-slide {
  width: auto !important;    /* override Swiper inline width */
}

.ug-skin-grid .swiper-button-next,
.ug-skin-grid .swiper-button-prev,
.ug-skin-grid .swiper-pagination {
  display: none;
}

/* ─────────────────────────────────────────
   SKIN: MASONRY
   Kolom CSS multi-column statis
───────────────────────────────────────── */
.ug-skin-masonry .swiper-wrapper {
  display: block;
  column-count: var(--ug-cols, 3);
  column-gap: var(--ug-gap, 20px);
  transform: none !important;
  width: 100% !important;
}

.ug-skin-masonry .swiper-slide {
  display: inline-block;     /* wajib untuk column-count */
  width: 100% !important;
  break-inside: avoid;
  margin-bottom: var(--ug-gap, 20px);
}

.ug-skin-masonry .swiper-button-next,
.ug-skin-masonry .swiper-button-prev,
.ug-skin-masonry .swiper-pagination {
  display: none;
}

/* ─────────────────────────────────────────
   SKIN: SLIDESHOW  (1 slide fullwidth + fade)
───────────────────────────────────────── */
.ug-skin-slideshow .swiper-slide img {
  object-fit: cover;
  width: 100%;
}

/* ─────────────────────────────────────────
   SKIN: COVERFLOW
───────────────────────────────────────── */
.ug-skin-coverflow {
  perspective: 1200px;
}

.ug-skin-coverflow .swiper-slide {
  opacity: 0.5;
  transition: opacity 0.3s;
}

.ug-skin-coverflow .swiper-slide-active {
  opacity: 1;
}

/* ─────────────────────────────────────────
   SKIN: CARDS
───────────────────────────────────────── */
.ug-skin-cards .swiper-slide {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* ─────────────────────────────────────────
   SKIN: THUMBNAIL (thumb)
   Strip thumbnail di bawah slide utama
───────────────────────────────────────── */

/* FIX: sebelumnya selector ini ".ug-thumb-wrap" — class itu TIDAK
   pernah ada di markup PHP (markup-nya pakai "ug-swiper ug-skin-thumb"),
   jadi flex-column + gap di bawah ini tidak pernah aktif. */
.ug-skin-thumb {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ug-thumb-main {
  width: 100%;
}

.ug-thumb-nav {
  width: 100%;
}

.ug-thumb-nav .swiper-slide {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

/* ADD: aspect-ratio kustom, hanya aktif kalau ratio bukan "Auto"
   (class "has-ratio" ditambahkan lewat JS) */
.ug-thumb-nav.has-ratio .swiper-slide {
  aspect-ratio: var(--ug-thumb-ratio, 1 / 1);
}

.ug-thumb-nav .swiper-slide-thumb-active {
  opacity: 1;
}

.ug-thumb-nav img {
  object-fit: cover;
  width: 100%;
}

/* Default (ratio = Auto): tinggi tetap, seperti sebelumnya */
.ug-thumb-nav:not(.has-ratio) img {
  height: 70px;
}

/* Saat ratio aktif: tinggi gambar ikut tinggi slide (aspect-ratio) */
.ug-thumb-nav.has-ratio img {
  height: 100%;
}