/* ============================================================
   Hero Slider Builder — Frontend CSS v1.1.1

   Breakpoint mengikuti Elementor:
     Desktop  : > 1024px
     Tablet   : 768px – 1024px
     Mobile   : < 768px

   Setiap .thsb-rl (responsive layer) membawa CSS vars:
     --thsb-lx-d/t/m  → left per device
     --thsb-ly-d/t/m  → top per device
     --thsb-lfs-d/t/m → font-size per device
     --thsb-lw-d/t/m  → width per device
     --thsb-lvis-d/t/m → display per device

   Slider height per slide:
     --thsb-h-d / --thsb-h-t / --thsb-h-m
   ============================================================ */

/* ---- Wrapper ---- */
.thsb-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/*
 * HEIGHT: di-set via <style> inline per-slider (dari PHP render_slider).
 * Baris di bawah hanya fallback jika style inline belum render.
 */
.thsb-swiper,
.thsb-slide { height: 500px; }

/* ---- Slide ---- */
.thsb-slide {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/*
 * BUG FIX — Klik tembus ke slide non-aktif:
 *
 * Masalah: Swiper fade mode menumpuk semua slide secara visual (position absolute,
 * opacity 0 untuk yang non-aktif). Meski tidak terlihat, elemen <a> dan button
 * di slide non-aktif tetap bisa menerima klik karena pointer-events tidak diblokir.
 *
 * Solusi: Blokir pointer-events di SEMUA elemen dalam slide non-aktif menggunakan
 * selector " * " (wildcard child). Aktifkan kembali hanya di .swiper-slide-active.
 * Selector ini lebih spesifik dari rule .thsb-slide-layers a { pointer-events: auto }
 * sehingga tidak bisa di-override oleh child element manapun.
 */

/* Non-aktif: blokir klik di slide dan SEMUA child-nya tanpa terkecuali */
.thsb-slide:not(.swiper-slide-active),
.thsb-slide:not(.swiper-slide-active) * {
    pointer-events: none !important;
}

/* Aktif: izinkan klik normal di slide dan semua child-nya */
.swiper-slide-active.thsb-slide {
    z-index: 2;
    pointer-events: auto;
}

/* Full-slide link overlay */
.thsb-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* ---- Background ---- */
.thsb-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.thsb-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---- Layer container ---- */
.thsb-slide-layers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.thsb-slide-layers a,
.thsb-slide-layers .thsb-layer-button {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

/* ============================================================
   Responsive Layer (.thsb-rl)
   Menggunakan CSS custom properties per-device.
   Desktop → default (tidak perlu media query).
   ============================================================ */
.thsb-layer {
    position: absolute;
    box-sizing: border-box;
    line-height: 1.3;
}

/* Responsive layer — Desktop values (default) */
.thsb-rl {
    left:      var(--thsb-lx-d,  30%);
    top:       var(--thsb-ly-d,  40%);
    font-size: var(--thsb-lfs-d, 32px);
    width:     var(--thsb-lw-d,  auto);
    display:   var(--thsb-lvis-d, block);
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .thsb-rl {
        left:      var(--thsb-lx-t,  var(--thsb-lx-d,  30%));
        top:       var(--thsb-ly-t,  var(--thsb-ly-d,  40%));
        font-size: var(--thsb-lfs-t, var(--thsb-lfs-d, 32px));
        width:     var(--thsb-lw-t,  var(--thsb-lw-d,  auto));
        display:   var(--thsb-lvis-t, var(--thsb-lvis-d, block));
    }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
    .thsb-rl {
        left:      var(--thsb-lx-m,  var(--thsb-lx-t,  var(--thsb-lx-d,  30%)));
        top:       var(--thsb-ly-m,  var(--thsb-ly-t,  var(--thsb-ly-d,  40%)));
        font-size: var(--thsb-lfs-m, var(--thsb-lfs-t, var(--thsb-lfs-d, 32px)));
        width:     var(--thsb-lw-m,  var(--thsb-lw-t,  var(--thsb-lw-d,  auto)));
        display:   var(--thsb-lvis-m, var(--thsb-lvis-t, var(--thsb-lvis-d, block)));
    }
}

/* ---- Text layer ---- */
.thsb-layer-text {
    white-space: pre-wrap;
}

/* ---- Button layer ---- */
.thsb-layer-button {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    /* Padding Desktop (default) */
    padding: var(--thsb-pad-d, 10px 24px);
}

/* Padding Tablet */
@media (max-width: 1024px) {
    .thsb-layer-button {
        padding: var(--thsb-pad-t, var(--thsb-pad-d, 10px 24px));
    }
}

/* Padding Mobile */
@media (max-width: 767px) {
    .thsb-layer-button {
        padding: var(--thsb-pad-m, var(--thsb-pad-t, var(--thsb-pad-d, 10px 24px)));
    }
}

/* Tablet (≤ 1024px): pakai --thsb-pad-t */
@media (max-width: 1024px) {
    .thsb-layer-button {
        padding: var(--thsb-pad-t, var(--thsb-pad-d, 10px 24px));
    }
}

/* Mobile (≤ 767px): pakai --thsb-pad-m */
@media (max-width: 767px) {
    .thsb-layer-button {
        padding: var(--thsb-pad-m, var(--thsb-pad-t, var(--thsb-pad-d, 10px 24px)));
    }
}

/* ---- Default button hover (tanpa konfigurasi) ---- */
.thsb-layer-button:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* ============================================================
   Hover Effect via CSS Custom Properties
   Aktif hanya jika layer punya class .thsb-has-hover
   (ditambahkan oleh PHP render jika ada hover dikonfigurasi)

   Vars yang diset per layer:
     --thsb-hover-color   : warna teks saat hover
     --thsb-hover-bg      : warna background saat hover
     --thsb-hover-fs      : ukuran font saat hover
     --thsb-hover-opacity : opacity saat hover
     --thsb-hover-dur     : durasi transisi (ms)
   ============================================================ */
.thsb-layer.thsb-has-hover {
    transition:
        color          var(--thsb-hover-dur, 250ms) ease,
        background-color var(--thsb-hover-dur, 250ms) ease,
        font-size      var(--thsb-hover-dur, 250ms) ease,
        opacity        var(--thsb-hover-dur, 250ms) ease,
        filter         var(--thsb-hover-dur, 250ms) ease,
        transform      var(--thsb-hover-dur, 250ms) ease;
    cursor: pointer;
}

.thsb-layer.thsb-has-hover:hover {
    color:            var(--thsb-hover-color,   inherit);
    background-color: var(--thsb-hover-bg,      transparent);
    font-size:        var(--thsb-hover-fs,       inherit);
    opacity:          var(--thsb-hover-opacity,  1);
    /* Reset default button filter agar tidak double */
    filter: none;
    transform: none;
}

/* Button dengan hover: override default button:hover */
.thsb-layer-button.thsb-has-hover:hover {
    filter: none;
    transform: none;
}

/* ---- Navigation arrows ---- */
.thsb-nav-prev,
.thsb-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.2s;
}
.thsb-nav-prev:hover,
.thsb-nav-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}
.thsb-nav-prev { left: 14px; }
.thsb-nav-next { right: 14px; }
.thsb-nav-prev svg,
.thsb-nav-next svg {
    width: 20px;
    height: 20px;
    stroke: #333;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .thsb-nav-prev,
    .thsb-nav-next {
        width: 34px;
        height: 34px;
    }
    .thsb-nav-prev svg,
    .thsb-nav-next svg {
        width: 16px;
        height: 16px;
    }
    .thsb-nav-prev { left: 8px; }
    .thsb-nav-next { right: 8px; }
}

/* ---- Pagination ---- */
.thsb-pagi {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
}
.thsb-pagi .swiper-pagination-bullet {
    background: rgba(255,255,255,0.5);
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: background 0.2s, transform 0.2s;
}
.thsb-pagi .swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.3);
}

/* ============================================================
   Layer Animations
   ============================================================ */
.thsb-layer[data-anim]    { opacity: 0; }
.thsb-layer.thsb-anim-done { opacity: 1; }

@keyframes thsbFadeIn      { from { opacity:0; }                        to { opacity:1; } }
@keyframes thsbFadeInUp    { from { opacity:0; transform:translateY(30px); }  to { opacity:1; transform:translateY(0); } }
@keyframes thsbFadeInDown  { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
@keyframes thsbFadeInLeft  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes thsbFadeInRight { from { opacity:0; transform:translateX(40px); }  to { opacity:1; transform:translateX(0); } }
@keyframes thsbZoomIn      { from { opacity:0; transform:scale(0.75); }       to { opacity:1; transform:scale(1); } }

.thsb-layer.thsb-anim-done[data-anim="fadeIn"]      { animation: thsbFadeIn      0.6s ease both; }
.thsb-layer.thsb-anim-done[data-anim="fadeInUp"]    { animation: thsbFadeInUp    0.6s ease both; }
.thsb-layer.thsb-anim-done[data-anim="fadeInDown"]  { animation: thsbFadeInDown  0.6s ease both; }
.thsb-layer.thsb-anim-done[data-anim="fadeInLeft"]  { animation: thsbFadeInLeft  0.6s ease both; }
.thsb-layer.thsb-anim-done[data-anim="fadeInRight"] { animation: thsbFadeInRight 0.6s ease both; }
.thsb-layer.thsb-anim-done[data-anim="zoomIn"]      { animation: thsbZoomIn      0.6s ease both; }