/* =========================================================
   LyricsGroove
   Artist Information Bar
   Premium v1
========================================================= */


/* =========================================================
   MAIN INFORMATION BAR
========================================================= */

.lg-artist-stats{

    position:relative;

    z-index:30;

    display:grid;

    grid-template-columns:

        minmax(0, 1.35fr)

        minmax(0, .9fr)

        minmax(0, 1fr)

        minmax(0, 1.2fr);

    align-items:stretch;

    width:100%;

    margin:32px 0 56px;

    padding:0;

    box-sizing:border-box;

    overflow:hidden;

    border-radius:22px;

    border:1px solid rgba(11,28,58,.09);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.98) 0%,
            rgba(248,250,255,.98) 55%,
            rgba(242,246,255,.98) 100%
        );

    box-shadow:

        0 20px 55px rgba(8,28,58,.10),

        0 4px 14px rgba(8,28,58,.04);

}


/* =========================================================
   TOP LIGHT
========================================================= */

.lg-artist-stats::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:2px;

    background:

        linear-gradient(
            90deg,
            #315BFF 0%,
            #D5007B 45%,
            #8B5CF6 75%,
            #315BFF 100%
        );

    opacity:.85;

}


/* =========================================================
   STAT ITEM
========================================================= */

.lg-artist-stats .lg-stat-card{

    position:relative;

    display:flex !important;

    align-items:center;

    gap:14px;

    min-width:0 !important;

    min-height:88px !important;

    width:auto !important;

    margin:0 !important;

    padding:20px 22px !important;

    box-sizing:border-box;

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    transform:none !important;

    overflow:hidden;

}


/* =========================================================
   VERTICAL SEPARATOR
========================================================= */

.lg-artist-stats .lg-stat-card:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:22px;

    bottom:22px;

    width:1px;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(20,43,84,.14),
            transparent
        );

}


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

.lg-artist-stats .lg-stat-icon{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px !important;

    height:46px !important;

    min-width:46px !important;

    flex:0 0 46px;

    border-radius:14px;

    color:#ffffff !important;

    font-size:17px !important;

    line-height:1;

    background:

        linear-gradient(
            135deg,
            #0A2858 0%,
            #2454A0 100%
        ) !important;

    box-shadow:

        0 8px 18px rgba(15,48,105,.18),

        inset 0 1px 0 rgba(255,255,255,.18);

}


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

.lg-stat-agency .lg-stat-icon{

    background:

        linear-gradient(
            135deg,
            #173B79,
            #4B64D8
        ) !important;

}


.lg-stat-members .lg-stat-icon{

    background:

        linear-gradient(
            135deg,
            #3A2B9B,
            #8057D9
        ) !important;

}


.lg-stat-origin .lg-stat-icon{

    background:

        linear-gradient(
            135deg,
            #006C8C,
            #168BB4
        ) !important;

}


.lg-stat-genres .lg-stat-icon{

    background:

        linear-gradient(
            135deg,
            #B40069,
            #E34A9B
        ) !important;

}


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

.lg-artist-stats .lg-stat-content{

    min-width:0;

    flex:1 1 auto;

}


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

.lg-artist-stats .lg-stat-title{

    display:block;

    margin:0 0 5px !important;

    color:#7A879B !important;

    font-size:10px !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    letter-spacing:.16em !important;

    text-transform:uppercase;

}


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

.lg-artist-stats .lg-stat-value{

    display:block;

    margin:0 !important;

    color:#101B32 !important;

    font-size:16px !important;

    font-weight:800 !important;

    line-height:1.3 !important;

    word-break:normal;

    overflow-wrap:anywhere;

}


/* =========================================================
   AGENCY
========================================================= */

.lg-stat-agency .lg-stat-value{

    max-width:240px;

}


/* =========================================================
   GENRES
========================================================= */

.lg-stat-genres .lg-stat-value{

    white-space:nowrap;

}


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

.lg-artist-stats .lg-stat-card{

    transition:

        background .25s ease,

        transform .25s ease;

}


.lg-artist-stats .lg-stat-card:hover{

    background:

        linear-gradient(
            135deg,
            rgba(247,249,255,.92),
            rgba(239,244,255,.82)
        ) !important;

    transform:translateY(-2px) !important;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .lg-artist-stats{

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        border-radius:20px;

    }


    .lg-artist-stats .lg-stat-card{

        min-height:84px !important;

        padding:18px !important;

    }


    /*
     * Remove separators between
     * the second column items.
     */

    .lg-artist-stats
    .lg-stat-card:nth-child(2)::after{

        display:none;

    }


    /*
     * Add a horizontal separator
     * between rows.
     */

    .lg-artist-stats
    .lg-stat-card:nth-child(-n+2){

        border-bottom:
            1px solid rgba(20,43,84,.08) !important;

    }


    .lg-artist-stats
    .lg-stat-card:nth-child(-n+2)::after{

        top:18px;

        bottom:18px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .lg-artist-stats{

        grid-template-columns:1fr;

        margin-top:26px;

        margin-bottom:42px;

        border-radius:18px;

    }


    .lg-artist-stats
    .lg-stat-card{

        min-height:76px !important;

        padding:16px 18px !important;

    }


    /*
     * Remove desktop vertical separators.
     */

    .lg-artist-stats
    .lg-stat-card::after{

        display:none !important;

    }


    /*
     * Horizontal separators.
     */

    .lg-artist-stats
    .lg-stat-card:not(:last-child){

        border-bottom:
            1px solid rgba(20,43,84,.08) !important;

    }


    .lg-artist-stats
    .lg-stat-icon{

        width:42px !important;

        height:42px !important;

        min-width:42px !important;

        flex-basis:42px;

        border-radius:12px;

        font-size:15px !important;

    }


    .lg-artist-stats
    .lg-stat-title{

        font-size:9px !important;

        letter-spacing:.14em !important;

    }


    .lg-artist-stats
    .lg-stat-value{

        font-size:14px !important;

    }


    .lg-stat-genres .lg-stat-value{

        white-space:normal;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){

    .lg-artist-stats{

        margin-top:22px;

        border-radius:16px;

    }


    .lg-artist-stats
    .lg-stat-card{

        padding:14px 15px !important;

        gap:12px;

    }


    .lg-artist-stats
    .lg-stat-icon{

        width:40px !important;

        height:40px !important;

        min-width:40px !important;

        flex-basis:40px;

    }


    .lg-artist-stats
    .lg-stat-value{

        font-size:13px !important;

    }

}