/* ============================================================
   FXRK Hover Card Widget  —  Frontend Styles
   ============================================================ */

/* ── Base card ────────────────────────────────────────────── */
.fxrk-hover-card {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 420px;               /* default; overridden per Elementor control */
    border-radius: 16px;
    text-decoration: none;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
}

/* ── Background image layer ───────────────────────────────── */
.fxrk-hover-card__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    transform: scale(1);
    transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fxrk-hover-card:hover .fxrk-hover-card__image {
    transform: scale(1.06);      /* default; overridden by Elementor control */
}

/* ── Colour overlay ───────────────────────────────────────── */
.fxrk-hover-card__overlay {
    position: absolute;
    inset: 0;
    background: #16133E;         /* default; overridden by Elementor background control */
    opacity: 0.65;               /* default; overridden by Elementor control */
    will-change: opacity;
    transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
                background 420ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fxrk-hover-card:hover .fxrk-hover-card__overlay {
    opacity: 0.82;               /* default; overridden by Elementor control */
}

/* ── Content area ─────────────────────────────────────────── */
.fxrk-hover-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;               /* default; overridden by Elementor control */
    z-index: 2;
}

/* ── Title ────────────────────────────────────────────────── */
.fxrk-hover-card__title {
    color: #ffffff;
    margin: 0 0 12px;
    will-change: transform;
    transform: translateY(0);
    transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1),
                color     420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fxrk-hover-card:hover .fxrk-hover-card__title {
    transform: translateY(-12px); /* default; overridden by Elementor control */
}

/* ── Description ──────────────────────────────────────────── */
.fxrk-hover-card__desc {
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    opacity: 0;
    will-change: opacity, transform;
    transform: translateY(18px);  /* default; overridden by Elementor control */
    transition: opacity      420ms cubic-bezier(0.4, 0, 0.2, 1),
                transform    420ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0ms;        /* default; overridden by Elementor control */
    pointer-events: none;
}

.fxrk-hover-card:hover .fxrk-hover-card__desc {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 60ms;       /* default; overridden by Elementor control */
}

/* ── Accessibility — respect reduced motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .fxrk-hover-card__image,
    .fxrk-hover-card__overlay,
    .fxrk-hover-card__title,
    .fxrk-hover-card__desc {
        transition: none !important;
    }

    .fxrk-hover-card:hover .fxrk-hover-card__image {
        transform: none !important;
    }

    .fxrk-hover-card:hover .fxrk-hover-card__title {
        transform: none !important;
    }
}

/* ── Focus styles (keyboard navigation) ───────────────────── */
.fxrk-hover-card:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 4px;
}

/* ── Elementor editor placeholder ────────────────────────────
   Shows a subtle dark box when no image has been picked yet  */
.elementor-editor-active .fxrk-hover-card:not([style*="background-image"]) .fxrk-hover-card__image {
    background-color: #16133E;
}