/*
==========================================================
FantasyFanzone Card System
Version: 4.0
==========================================================
*/

.ffz-card{
    position:relative;

    display:flex;
    align-items:flex-start;

    gap:20px;

    min-width:0;

    padding:var(--ffz-card-padding);

    overflow:hidden;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.045),
        rgba(255,255,255,.02)
    );

    border:1px solid var(--ffz-border);

    border-radius:var(--ffz-radius-lg);

    transition:
        transform var(--ffz-transition-normal),
        background-color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

/*======================================================
TOP ACCENT
======================================================*/

.ffz-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:var(--ffz-gradient-primary);

    border-radius:
        var(--ffz-radius-lg)
        var(--ffz-radius-lg)
        0
        0;

    transform:scaleX(0);
    transform-origin:left center;

    transition:
        transform .35s ease;
}

/*======================================================
HOVER
======================================================*/

.ffz-card:hover{
    transform:translateY(-6px);

    background:var(--ffz-card-hover);

    border-color:var(--ffz-primary);

    box-shadow:var(--ffz-shadow-lg);
}

.ffz-card:hover::before{
    transform:scaleX(1);
}

/*======================================================
LINK CARD
======================================================*/

a.ffz-card{
    color:inherit;

    text-decoration:none;
}

a.ffz-card:focus-visible{
    outline:2px solid var(--ffz-primary);
    outline-offset:4px;

    border-color:var(--ffz-primary);

    box-shadow:var(--ffz-shadow-lg);
}

/*======================================================
ICON
======================================================*/

.ffz-card__icon{
    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    width:60px;
    height:60px;

    overflow:hidden;

    border-radius:16px;

    background:rgba(124,58,237,.12);

    color:var(--ffz-primary);

    font-size:26px;
    line-height:1;

    transition:
        background-color var(--ffz-transition-normal),
        color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal);
}

.ffz-card__icon img,
.ffz-card__icon svg{
    display:block;

    max-width:100%;
    max-height:100%;
}

.ffz-card:hover .ffz-card__icon{
    background:var(--ffz-primary);

    color:#fff;

    transform:scale(1.08);
}

/*======================================================
CONTENT
======================================================*/

.ffz-card__content{
    flex:1;

    min-width:0;
}

/*======================================================
LABEL
======================================================*/

.ffz-card__label{
    margin-bottom:8px;

    overflow-wrap:anywhere;

    color:var(--ffz-text-muted);

    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    line-height:1.4;

    text-transform:uppercase;
}

/*======================================================
TITLE
======================================================*/

.ffz-card__title{
    margin-bottom:10px;

    overflow-wrap:anywhere;

    color:var(--ffz-heading);

    font-size:var(--ffz-font-size-xl);
    font-weight:var(--ffz-font-weight-bold);
    line-height:1.25;
}

/*======================================================
VALUE
======================================================*/

.ffz-card__value{
    margin-bottom:10px;

    overflow-wrap:anywhere;

    color:#fff;

    font-size:36px;
    font-weight:800;
    line-height:1.05;

    font-variant-numeric:tabular-nums;
}

/*======================================================
DESCRIPTION
======================================================*/

.ffz-card__description{
    overflow-wrap:anywhere;

    color:var(--ffz-text-muted);

    font-size:15px;
    line-height:1.7;
}

/*======================================================
META
======================================================*/

.ffz-card__meta{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:18px;
}

/*======================================================
BADGE
======================================================*/

.ffz-card__badge{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    font-size:12px;
    font-weight:700;
    line-height:1;
}

/*======================================================
TREND
======================================================*/

.ffz-card__trend{
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
    line-height:1;
}

.ffz-card__trend-icon{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    line-height:1;
}

.ffz-card__trend--up{
    background:rgba(34,197,94,.14);

    color:var(--ffz-success);
}

.ffz-card__trend--down{
    background:rgba(239,68,68,.14);

    color:var(--ffz-danger);
}

.ffz-card__trend--neutral{
    background:rgba(148,163,184,.14);

    color:var(--ffz-text-muted);
}

/*======================================================
VARIANTS
======================================================*/

.ffz-card--primary{
    border-color:rgba(124,58,237,.25);
}

.ffz-card--success{
    border-color:rgba(34,197,94,.25);
}

.ffz-card--warning{
    border-color:rgba(245,158,11,.25);
}

.ffz-card--danger{
    border-color:rgba(239,68,68,.25);
}

/*======================================================
REVEAL
======================================================*/

.ffz-card.ffz-reveal{
    opacity:0;

    transform:translateY(20px);
}

.ffz-card.ffz-reveal.is-visible{
    opacity:1;

    transform:translateY(0);

    transition-delay:
        var(--ffz-card-delay, 0ms);
}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:768px){

    .ffz-card{
        gap:16px;

        padding:20px;
    }

    .ffz-card__icon{
        width:52px;
        height:52px;

        border-radius:14px;

        font-size:22px;
    }

    .ffz-card__title{
        font-size:18px;
    }

    .ffz-card__value{
        font-size:30px;
    }

}

/*======================================================
SMALL PHONES
======================================================*/

@media(max-width:480px){

    .ffz-card{
        gap:14px;

        padding:18px;
    }

    .ffz-card__icon{
        width:48px;
        height:48px;

        font-size:20px;
    }

    .ffz-card__value{
        font-size:28px;
    }

}

/*======================================================
REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-card,
    .ffz-card::before,
    .ffz-card__icon{
        transition:none;
    }

    .ffz-card,
    .ffz-card:hover,
    .ffz-card.ffz-reveal,
    .ffz-card.ffz-reveal.is-visible{
        transform:none;
    }

    .ffz-card.ffz-reveal{
        opacity:1;
    }

    .ffz-card:hover .ffz-card__icon{
        transform:none;
    }

}