/* ── Kings Corner – Stat Cards Widget ───────────────────────────────────── */

/* Clip container — mirrors .kc-h-scroll-carousel-wrap */
.kc-stat-cards-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0 12px;
    /* breathing room so box-shadows aren't clipped */
}

/* Inner track — mirrors .kc-h-scroll-carousel */
.kc-sc-track {
    display: flex;
    align-items: flex-end;
    /* ancla al fondo → las cards crecen hacia arriba */
    will-change: transform;
    transition: transform 0.1s ease-out;
    padding: 2%;
    /* espacio para el rebote al llegar al final del scroll */
}

/* nth-child stacking targets the track's direct children */
.kc-sc-track .kc-stat-card:nth-child(1) {
    z-index: 1;
}

.kc-sc-track .kc-stat-card:nth-child(2) {
    z-index: 2;
}

.kc-sc-track .kc-stat-card:nth-child(3) {
    z-index: 3;
}

/* ── Card base ───────────────────────────────────────────────────────────── */

.kc-stat-card {
    flex: 1;
    position: relative;
    /*
     * El margen negativo hace que cada tarjeta se extienda por debajo
     * de la siguiente, creando el efecto de solapamiento.
     */
    margin-right: var(--kc-sc-overlap, -32px);
    cursor: pointer;

    background: var(--kc-sc-card-bg, rgba(255, 255, 255, 0.20));
    backdrop-filter: blur(var(--kc-sc-blur, 12px)) brightness(var(--kc-sc-brightness, 1));
    border: 1px solid var(--kc-sc-border, rgba(255, 255, 255, 0.22));
    border-radius: var(--kc-sc-radius, 14px);
    padding: 32px 28px 24px;

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 var(--kc-sc-glow, rgba(255, 255, 255, 0.20)),
        inset 0 0 28px var(--kc-sc-glow, rgba(255, 255, 255, 0.06));

    transition:
        transform 0.36s cubic-bezier(.25, .8, .25, 1),
        box-shadow 0.36s ease,
        background 0.36s ease,
        z-index 0s;
}

.kc-stat-card:last-child {
    margin-right: 0;
}

/* ── Hover ───────────────────────────────────────────────────────────────── */
/*
 * transform y background usan CSS vars configurables desde Elementor.
 * box-shadow en hover es gestionado por el Group_Control_Box_Shadow
 * de Elementor (selector: .kc-stat-card:hover) — valor por defecto:
 * 1px 4px 9px 2px #008E8A.
 */

.kc-stat-card:hover {
    z-index: 10 !important;
    transform: translateY(var(--kc-sc-hover-ty, -14px)) scale(var(--kc-sc-hover-scale, 1.025)) !important;
    background: var(--kc-sc-card-bg-hover, rgba(255, 255, 255, 0.18));
}

/* ── Card content ────────────────────────────────────────────────────────── */

.kc-sc-number {
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--kc-sc-number-color, #ffffff);
    margin: 0 0 4px;
    margin-bottom: 0 !important;
    letter-spacing: -0.02em;
}

.kc-sc-label {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--kc-sc-label-color, #ffffff);
    margin: 0 0 20px;
}

.kc-sc-desc {
    font-size: 0.88rem;
    color: var(--kc-sc-desc-color, rgba(255, 255, 255, 0.82));
    line-height: 1.6;
    margin: 0 0 20px;
    padding-right: 50px;
}

.kc-sc-source {
    font-size: 0.75rem;
    color: var(--kc-sc-source-color, rgba(255, 255, 255, 0.45));
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

/* ── Scroll animations ───────────────────────────────────────────────────── */

.kc-stat-card[data-anim] {
    opacity: 0;
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(.25, .8, .25, 1),
        box-shadow 0.36s ease,
        background 0.36s ease,
        z-index 0s;
}

/* fade-up */
.kc-stat-card[data-anim="fade-up"] {
    transform: translateY(36px);
}

.kc-stat-card[data-anim="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* fade-in */
.kc-stat-card[data-anim="fade-in"] {
    transform: none;
}

.kc-stat-card[data-anim="fade-in"].is-visible {
    opacity: 1;
}

/* scale */
.kc-stat-card[data-anim="scale"] {
    transform: scale(0.88);
}

.kc-stat-card[data-anim="scale"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered delays */
.kc-stat-card:nth-child(1) {
    transition-delay: 0s;
}

.kc-stat-card:nth-child(2) {
    transition-delay: 0.15s;
}

.kc-stat-card:nth-child(3) {
    transition-delay: 0.30s;
}

/* Sin delay en hover/visible */
.kc-stat-card.is-visible {
    transition-delay: 0s !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/*
 * Tablet (≤900px): reduce overlap and padding, cards still side-by-side.
 */
@media (max-width: 900px) {
    .kc-stat-cards-wrap {
        gap: 0;
    }

    .kc-stat-card {
        padding: 24px 20px 18px;
        --kc-sc-overlap: -20px;
    }
}

/*
 * Mobile (≤640px): horizontal scroll carousel.
 * Cards are ~82 vw wide; scroll-snap keeps one card centred at a time.
 * The slight peek of the next card hints at swipeability.
 */
@media (max-width: 640px) {

    /* The wrap becomes the scroll container on mobile */
    .kc-stat-cards-wrap {
        overflow-x: scroll;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
        padding: 8px 9vw 24px;
    }

    .kc-stat-cards-wrap:active {
        cursor: grabbing;
    }

    .kc-stat-cards-wrap::-webkit-scrollbar {
        display: none;
    }

    /* The track carries the cards — no translateX on mobile (native scroll) */
    .kc-sc-track {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        will-change: unset;
        transition: none;
        transform: none !important;
    }

    .kc-stat-card {
        /* Fixed width + height so all cards are uniform in the carousel */
        flex: 0 0 82vw !important;
        width: 82vw !important;
        height: 300px !important;
        min-width: 0;
        min-height: unset !important;
        overflow: hidden;
        margin-right: 0 !important;
        scroll-snap-align: center;
        padding: 24px 22px 20px;
        /* Restore default stacking (no overlap in scroll mode) */
        z-index: 1 !important;
        transition:
            transform 0.36s cubic-bezier(.25, .8, .25, 1),
            box-shadow 0.36s ease,
            background 0.36s ease,
            z-index 0s;
    }

    /* Number slightly smaller on narrow screens */
    .kc-sc-number {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }

    /* Label tighter */
    .kc-sc-label {
        font-size: clamp(0.95rem, 4vw, 1.2rem);
        margin-bottom: 14px;
    }

    .kc-sc-desc {
        padding-right: 0px;
    }

    /* ── Dots (Pager) ── */
    .kc-sc-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding-bottom: 8px;
    }

    .kc-sc-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .kc-sc-dot.active {
        background-color: var(--kc-sc-accent, #00b4a0);
        transform: scale(1.2);
    }
}

/* Hide dots on desktop by default */
.kc-sc-dots {
    display: none;
}