.video-card-widget-wrapper {
    width: 100%;
    overflow: hidden;

    /* =============================================
	MOBILE / DEFAULT — Overlapping Static Grid
	============================================= */
    .karplexus-hero-video-cards {
        display: grid;
        grid-template-columns: 15% 35% 35% 15%;
        align-items: center;
        padding: 60px 0 160px;
        width: 100%;
        max-width: 100vw;
    }

    .hero-video {
        position: relative;
        width: 100%;
        border-radius: 15px;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .hero-video img,
    .hero-video video {
        width: 100%;
        height: 380px;
        object-fit: cover;
        border-radius: 15px;
        background-color: #1a1a1a;
        pointer-events: none;
        display: block;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
        transition: box-shadow 0.35s ease;
    }

    .hero-video video {
        border: none;
        outline: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    /* --- MOBILE CARD POSITIONS (Overlapping) --- */

    /* Left Card - Tucked behind */
    .hero-video:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        z-index: 1;
        transform: scale(0.85) translateX(-10%);
    }

    /* Center Card - Prominent & Raised */
    .hero-video:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1;
        z-index: 3;
        transform: scale(1);
    }

    .hero-video:nth-child(2) img {
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }

    /* Right Card - Tucked behind */
    .hero-video:nth-child(3) {
        grid-column: 3 / 5;
        grid-row: 1;
        z-index: 1;
        transform: scale(0.85) translateX(10%);
    }

    /* =============================================
	INSIGHT BADGE
	============================================= */
    .insight-badge {
        position: absolute;
        text-align: center;
        box-shadow: 0 12px 28px var(--insight-shadow);
        z-index: 10;
        width: 185px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out 0.7s, transform 0.6s ease-out 0.7s;
    }

    /* Animation class added via JS */
    .hero-video.video-loaded .insight-badge {
        opacity: 1;
        transform: translateY(0);
    }

    /* Mobile Badge Overrides */
    .hero-video:nth-child(1) .insight-badge {
        bottom: 20px;
        left: -30px;
    }

    .hero-video:nth-child(2) .insight-badge {
        bottom: -20px;
        right: -70px;
        /* Aligns to bottom right as per the image */
        left: auto;
    }

    .hero-video:nth-child(3) .insight-badge {
        top: -30px;
        right: -30px;
        left: auto;
    }

    /* =============================================
	DESKTOP LAYOUT — Expanded 3-Column Grid
	============================================= */
    @media (min-width: 575px) {

        .karplexus-hero-video-cards {
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            padding: 80px 40px 140px;
            max-width: 1280px;
            margin: 0 auto;
        }

        /* Reset overlapping behavior for desktop */
        .hero-video:nth-child(1),
        .hero-video:nth-child(2),
        .hero-video:nth-child(3) {
            grid-column: auto;
            grid-row: auto;
            transform: none;
            opacity: 1;
            z-index: 1;
        }

        .hero-video img,
        .hero-video video {
            height: 480px;
        }

        /* Desktop Badge Sizing */
        .hero-video .insight-badge {
            width: 328px;
            padding: 1.35rem 1.3rem;
        }

        /* ------------------------------------------
		Card 1 Desktop
		------------------------------------------ */
        .hero-video:nth-child(1) .insight-badge {
            bottom: 28px;
            left: -30px;
        }

        /* ------------------------------------------
		Card 2 Desktop
		------------------------------------------ */
        .hero-video:nth-child(2) {
            transform: translateY(72px);
            z-index: 2;
        }

        .hero-video:nth-child(2) .insight-badge {
            bottom: -28px;
            right: -30px;
            left: auto;
        }

        /* ------------------------------------------
		Card 3 Desktop
		------------------------------------------ */
        .hero-video:nth-child(3) .insight-badge {
            top: -54px;
            right: -30px;
            left: auto;
            bottom: auto;
        }
    }

    /* =============================================
	CUSTOM STACK SLIDER STYLE (Mobile only)
	============================================= */
    @media (max-width: 574px) {
        .karplexus-hero-video-cards.slider-active {
            display: grid !important;
            grid-template-columns: 15% 35% 35% 15% !important;
            align-items: center;
            padding: 60px 0 140px !important;
            position: relative;
            overflow: visible !important;
            cursor: grab;
            user-select: none;
            touch-action: pan-y;
            /* Prevent browser scrolling while dragging horizontally */
        }

        .karplexus-hero-video-cards.slider-active.dragging-active {
            cursor: grabbing;
        }

        .karplexus-hero-video-cards.slider-active .hero-video {
            grid-column: 2 / 4 !important;
            /* Stack all cards in the center */
            grid-row: 1 !important;
            width: 100% !important;
            margin: 0 auto;
            transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
                z-index 0.45s ease,
                opacity 0.45s ease,
                top 0.45s ease !important;
            top: 0 !important;
            /* Reset default top offset */
        }

        /* Disable transitions during drag */
        .karplexus-hero-video-cards.slider-active .hero-video.dragging {
            transition: none !important;
        }

        /* State configurations for custom slider */
        .karplexus-hero-video-cards.slider-active .hero-video.state-left {
            z-index: 1 !important;
            transform: scale(0.85) translateX(-70%) !important;
            /* opacity: 0.75; */
            pointer-events: none;
        }

        .karplexus-hero-video-cards.slider-active .hero-video.state-center {
            z-index: 3 !important;
            transform: scale(1) translateX(0) !important;
            opacity: 1;
            pointer-events: auto;
        }

        .karplexus-hero-video-cards.slider-active .hero-video.state-right {
            z-index: 1 !important;
            transform: scale(0.85) translateX(70%) !important;
            /* opacity: 0.75; */
            pointer-events: none;
        }

        /* Adjust center card top offset on very small screens to match original design */
        @media (max-width: 575px) {
            .karplexus-hero-video-cards.slider-active .hero-video.state-center {
                top: 25% !important;
            }
        }

        /* Ensure all badges use their correct default properties and positions */
        .karplexus-hero-video-cards.slider-active .hero-video .insight-badge {
            transition: opacity 0.6s ease-out, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
        }

        .karplexus-hero-video-cards.slider-active .hero-video.dragging .insight-badge {
            transition: none !important;
        }
    }
}