/**
 * Floating Card Image Widget — Frontend & Editor CSS
 * Exactly waisa style jaise screenshot mein hai:
 * rounded corners + colored offset shadow/border + smooth hover
 */

/* ── CSS Variables & Base ── */
.fciv-card-outer {
    --fciv-shadow-color : #3EC6FF;
    --fciv-shadow-x     : 10px;
    --fciv-shadow-y     : 10px;
    --fciv-shadow-blur  : 0px;
    --fciv-shadow-spread: 8px;
    --fciv-bg           : #ffffff;
    --fciv-padding      : 10px;
    --fciv-transition   : 350ms;

    display        : inline-block;
    position       : relative;
    padding        : var(--fciv-padding);
    background     : var(--fciv-bg);
    border-radius  : 24px;
    box-shadow     :
        var(--fciv-shadow-x)
        var(--fciv-shadow-y)
        var(--fciv-shadow-blur)
        var(--fciv-shadow-spread)
        var(--fciv-shadow-color);
    transition     :
        box-shadow var(--fciv-transition) cubic-bezier(.25,.8,.25,1),
        transform  var(--fciv-transition) cubic-bezier(.25,.8,.25,1);
    width          : 100%;
    box-sizing     : border-box;
}

.fciv-card-inner {
    border-radius: 24px;
    overflow: hidden;
    line-height: 0; /* remove bottom gap under img */
}

.fciv-card-inner img {
    display    : block;
    width      : 100%;
    height     : auto;
    border-radius: 24px;
    transition : transform var(--fciv-transition) cubic-bezier(.25,.8,.25,1);
}

.fciv-card-inner a {
    display: block;
    line-height: 0;
}

/* ── Caption ── */
.fciv-caption {
    margin     : 10px 4px 4px;
    font-size  : 14px;
    color      : #555;
    line-height: 1.5;
}

/* ══════════════════════════════
   HOVER ANIMATIONS
══════════════════════════════ */

/* Lift — thoda upar uthaye (default, screenshot wala feel) */
.fciv-hover-lift:hover {
    transform : translateY(-6px);
    box-shadow:
        calc(var(--fciv-shadow-x) * 1.3)
        calc(var(--fciv-shadow-y) * 1.3)
        var(--fciv-shadow-blur)
        calc(var(--fciv-shadow-spread) * 1.3)
        var(--fciv-shadow-color);
}

/* Scale — zoom in */
.fciv-hover-scale:hover {
    transform: scale(1.04);
}
.fciv-hover-scale:hover .fciv-card-inner img {
    transform: scale(1.04);
}

/* Tilt — subtle rotate */
.fciv-hover-tilt:hover {
    transform: rotate(-1.5deg) translateY(-4px);
}

/* Glow — shadow rang badal ke chamkaye */
.fciv-hover-glow:hover {
    box-shadow:
        var(--fciv-shadow-x)
        var(--fciv-shadow-y)
        30px
        var(--fciv-shadow-spread)
        var(--fciv-shadow-color),
        0 0 40px 10px var(--fciv-shadow-color);
}

/* None */
.fciv-hover-none:hover {
    transform  : none;
    box-shadow :
        var(--fciv-shadow-x)
        var(--fciv-shadow-y)
        var(--fciv-shadow-blur)
        var(--fciv-shadow-spread)
        var(--fciv-shadow-color);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .fciv-card-outer {
        --fciv-shadow-x     : 6px;
        --fciv-shadow-y     : 6px;
        --fciv-shadow-spread: 5px;
        --fciv-padding      : 7px;
    }
}