/* ═══════════════════════════════════════════════
   VIDEOS CAROUSEL — Netflix-style
   ═══════════════════════════════════════════════ */

/* Wrapper — full viewport width, clips overflow */
.jdl-vc-wrapper{position:relative;width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;padding:20px 0;font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box;overflow:hidden!important}
.jdl-vc-wrapper *,.jdl-vc-wrapper *::before,.jdl-vc-wrapper *::after{box-sizing:border-box}

/* Light / Dark */
.jdl-vc-wrapper{--vc-bg:transparent;--vc-card-bg:#fff;--vc-card-border:#e8eaef;--vc-card-shadow:0 2px 12px rgba(0,0,0,0.08);--vc-cta-bg:#000;--vc-cta-color:#fff;--vc-cta-hover:#222}
.jdl-vc-wrapper.jdl-vc-dark{--vc-bg:#111111;--vc-card-bg:#333;--vc-card-border:#444;--vc-card-shadow:0 2px 12px rgba(0,0,0,0.3);--vc-cta-bg:#000;--vc-cta-color:#fff;--vc-cta-hover:#222}
.jdl-vc-wrapper{background:var(--vc-bg)}

/* Track — NO native scroll, pure transform */
.jdl-vc-track{display:flex!important;flex-wrap:nowrap!important;gap:16px;overflow:visible!important;cursor:grab;user-select:none;-webkit-user-select:none;padding:4px 0}
.jdl-vc-track:active{cursor:grabbing}

/* Slide */
.jdl-vc-slide{flex-shrink:0;width:var(--jdl-vc-card-w);display:flex;flex-direction:column;gap:12px;align-items:stretch}

/* CSS fallback before JS */
.jdl-vc-wrapper:not(.jdl-vc-ready) .jdl-vc-slide{width:calc((100% - 16px * 4) / 5)}
@media(max-width:1023px){.jdl-vc-wrapper:not(.jdl-vc-ready) .jdl-vc-slide{width:calc((100% - 16px * 2) / 3)}}
@media(max-width:767px){.jdl-vc-wrapper:not(.jdl-vc-ready) .jdl-vc-slide{width:calc(100% - 40px)}}

/* Card */
.jdl-vc-card{width:100%;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--vc-card-border);box-shadow:var(--vc-card-shadow);transition:transform 0.25s ease,box-shadow 0.25s ease}
.jdl-vc-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15)}

/* Video 9:16 */
.jdl-vc-video{position:relative;width:100%;aspect-ratio:9/16;background:#000;cursor:pointer;overflow:hidden}
.jdl-vc-video iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:none;z-index:3}

/* Thumbnail */
.jdl-vc-thumb{position:absolute;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover;transition:opacity 0.3s}
.jdl-vc-video.playing .jdl-vc-thumb{opacity:0;pointer-events:none}

/* Play overlay */
.jdl-vc-play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2;background:rgba(0,0,0,0.15);transition:background 0.2s;cursor:pointer}
.jdl-vc-play-overlay:hover{background:rgba(0,0,0,0.3)}
.jdl-vc-video.playing .jdl-vc-play-overlay{display:none}
.jdl-vc-play-icon{width:56px;height:56px;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));transition:transform 0.2s}
.jdl-vc-play-overlay:hover .jdl-vc-play-icon{transform:scale(1.12)}

/* CTA Button */
.jdl-vc-cta{display:block;width:100%;text-align:center;padding:12px 16px;background:var(--vc-cta-bg);color:var(--vc-cta-color)!important;text-decoration:none!important;font-size:14px;font-weight:600;letter-spacing:0.3px;border-radius:100px;border:solid 1px #444;transition:background 0.2s,transform 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jdl-vc-cta:hover{background:var(--vc-cta-hover);color:var(--vc-cta-color)!important;transform:translateY(-1px)}

/* Arrows */
.jdl-vc-arrow{-webkit-tap-highlight-color:transparent;outline:none}
.jdl-vc-arrow:hover{background:rgba(0,0,0,0.8)!important}

/* aspect-ratio fallback */
@supports not (aspect-ratio:9/16){
    .jdl-vc-video{padding-top:177.78%;height:0}
    .jdl-vc-video iframe,.jdl-vc-video .jdl-vc-thumb,.jdl-vc-video .jdl-vc-play-overlay{position:absolute;top:0;left:0}
}

/* Force Elementor parents — but ONLY above the wrapper, not the wrapper itself */
.elementor-shortcode:has(.jdl-vc-wrapper),
.elementor-widget-container:has(.jdl-vc-wrapper),
.elementor-widget:has(.jdl-vc-wrapper),
.e-con-inner:has(.jdl-vc-wrapper),
.e-con:has(.jdl-vc-wrapper),
.elementor-section:has(.jdl-vc-wrapper),
.elementor-container:has(.jdl-vc-wrapper),
.elementor-column-wrap:has(.jdl-vc-wrapper),
.elementor-widget-wrap:has(.jdl-vc-wrapper){overflow:visible!important}