/* ==========================================
   LyricsGroove Artist Hero
========================================== */

.lg-artist-hero{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    margin-bottom:80px;

}

.lg-artist-container{

    width:min(1400px,94%);

    margin:0 auto;

    position:relative;

    z-index:5;

}

.lg-artist-banner{

position:relative;

height:560px;

overflow:hidden;

}

.lg-artist-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transform:scale(1.08);

    transition:transform .8s ease;

    filter:
        brightness(.88)
        contrast(1.08)
        saturate(1.08);

}

.lg-artist-overlay{

    position:absolute;

    inset:0;

background:
    linear-gradient(
        to bottom,
        rgba(8,17,31,.35) 0%,
        rgba(8,17,31,.45) 20%,
        rgba(8,17,31,.70) 65%,
        rgba(8,17,31,.92) 100%
    ),

    radial-gradient(
        circle at 40% 35%,
        rgba(79,124,255,.12) 0%,
        rgba(79,124,255,.05) 28%,
        transparent 55%
    );

}

.lg-artist-profile{

    display:flex;

    align-items:flex-end;

    gap:48px;

    position:relative;

    margin-top:-130px;

    z-index:10;

}

.lg-artist-photo{

width:240px;

height:240px;

flex-shrink:0;

background:#fff;

padding:8px;

border-radius:20px;

box-shadow:

0 25px 70px rgba(0,0,0,.45),

0 0 60px rgba(222,73,123,.15);

overflow:hidden;

}


.lg-artist-photo img{

width:100%;

height:100%;

border-radius:16px;

object-fit:cover;

object-position:center;

display:block;

}

.lg-artist-details h1{

    margin:0 0 10px;

    font-size:60px;

    font-weight:900;

    line-height:1.1;

    color:#fff;

    text-shadow:0 3px 20px rgba(0,0,0,.45);

    position:relative;

}
/* Native Name */

.lg-native-name{

margin-top:8px;

font-size:22px;

font-weight:500;

color:#E5E7EB;

letter-spacing:.02em;

}

/* ==========================================
   Tablet
========================================== */

@media (max-width:1024px){

    .lg-artist-banner{

        height:420px;

    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .lg-artist-banner{

        height:320px;

    }

    .lg-artist-profile{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:20px;

        margin-top:-90px;

    }

    .lg-artist-photo{

        width:180px;

        height:180px;

    }

    .lg-artist-details h1{

        font-size:42px;

        line-height:1.1;

    }
    
    .lg-artist-details h1::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:320px;

    height:120px;

    transform:translate(-50%,-50%);

    background:rgba(222,73,123,.22);

    filter:blur(70px);

    z-index:-1;

}

    .lg-native-name{

        font-size:18px;

    }

}


/* ==========================================
   Hero Action Buttons
========================================== */

.lg-artist-actions{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:20px;

}

.lg-artist-actions .lg-btn{

padding:12px 24px;

min-width:160px;

font-size:13px;

}

.lg-artist-actions .lg-btn span{

font-size:13px;

}

.lg-follow-btn{

min-width:180px;

}

.lg-share-btn{

min-width:120px;

}

/* =========================================================
   ARTIST BADGE ROW
========================================================= */

.lg-artist-badge-row {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;

    position:relative;

    z-index:40;

}


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

.lg-artist-extra-badges {

    display:inline-flex;

    align-items:center;

    margin:0;

    vertical-align:middle;

}


.lg-artist-fandom-badge {

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:42px;

    padding:7px 15px;

    box-sizing:border-box;

    border-radius:999px;

    border:1px solid rgba(255,215,80,.78);

    background:
        linear-gradient(
            135deg,
            #fff4ad 0%,
            #ffd84d 48%,
            #eeb400 100%
        );

    color:#17120a;

    box-shadow:
        0 9px 22px rgba(239,179,0,.28),
        inset 0 1px 0 rgba(255,255,255,.82);

    font-size:12px;

    line-height:1;

    white-space:nowrap;

}


.lg-artist-fandom-icon {

    width:25px;

    height:25px;

    flex:0 0 25px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#946400;

    font-size:13px;

    font-weight:900;

}


.lg-artist-fandom-label {

    font-size:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.06em;

    opacity:.68;

}


.lg-artist-fandom-name {

    color:#15100a;

    font-size:13px;

    font-weight:900;

}


/* =========================================================
   FANS LOVED THIS ARTIST
========================================================= */

.lg-artist-fans-badge {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:42px;

    padding:7px 17px 7px 8px;

    margin:0;

    box-sizing:border-box;

    border-radius:999px;

    border:1px solid rgba(255,135,180,.60);

    background:
        linear-gradient(
            135deg,
            #ff4d91 0%,
            #f42d72 52%,
            #df1457 100%
        );

    color:#ffffff;

    box-shadow:
        0 10px 25px rgba(235,32,105,.34),
        0 0 22px rgba(255,57,132,.20),
        inset 0 1px 0 rgba(255,255,255,.28);

    white-space:nowrap;

}


.lg-artist-fans-icon {

    width:29px;

    height:29px;

    flex:0 0 29px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#ffffff;

}


.lg-artist-fans-icon svg {

    width:18px;

    height:18px;

    display:block;

}


.lg-artist-fans-count {

    color:#ffffff;

    font-size:17px;

    font-weight:950;

    line-height:1;

}


.lg-artist-fans-text {

    color:#ffffff;

    font-size:11px;

    font-weight:850;

    line-height:1;

    white-space:nowrap;

}


/*
 * Safety rule: if an older badges.php still contains
 * a Fans Loved badge, don't render a second one.
 */

.lg-badges .lg-artist-fans-badge {

    display:none !important;

}


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

@media (max-width:1024px){

    .lg-artist-badge-row {

        gap:8px;

    }

    .lg-artist-fandom-badge {

        min-height:40px;

        padding:6px 13px;

    }

    .lg-artist-fans-badge {

        min-height:40px;

        padding:6px 14px 6px 7px;

    }

    .lg-artist-fans-count {

        font-size:16px;

    }

    .lg-artist-fans-text {

        font-size:10px;

    }

}


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

@media (max-width:768px){

    .lg-artist-badge-row {

        justify-content:center;

        gap:8px;

        margin-top:12px;

    }

    .lg-artist-extra-badges {

        margin:0;

    }

    .lg-artist-fandom-badge {

        min-height:38px;

        padding:6px 11px;

    }

    .lg-artist-fandom-icon {

        width:23px;

        height:23px;

        flex-basis:23px;

        font-size:12px;

    }

    .lg-artist-fandom-label {

        font-size:9px;

    }

    .lg-artist-fandom-name {

        font-size:11px;

    }

    .lg-artist-fans-badge {

        min-height:38px;

        padding:6px 12px 6px 7px;

    }

    .lg-artist-fans-icon {

        width:26px;

        height:26px;

        flex-basis:26px;

    }

    .lg-artist-fans-icon svg {

        width:16px;

        height:16px;

    }

    .lg-artist-fans-count {

        font-size:15px;

    }

    .lg-artist-fans-text {

        font-size:9px;

    }

}


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

@media (max-width:480px){

    .lg-artist-fandom-badge,
    .lg-artist-fans-badge {

        max-width:100%;

    }

    .lg-artist-fandom-name {

        max-width:140px;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .lg-artist-fans-text {

        white-space:normal;

        line-height:1.15;

    }

}


/* =========================================================
   HERO END LINE / SHADOW SAFETY
========================================================= */

.lg-artist-hero {

    overflow:visible;

    box-shadow:
        0 28px 70px rgba(0,0,0,.38),
        0 10px 30px rgba(90,50,180,.10);

}


.lg-artist-hero::after {

    bottom:-1px;

    height:4px;

    z-index:100;

}


/* =========================================================
   FINAL ARTIST HERO BADGE FIX
   This block intentionally comes last so it overrides any
   earlier duplicate badge rules in this file.
========================================================= */

.lg-artist-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    position: relative !important;
    z-index: 60 !important;
}

/* Let the existing Artist Type + Origin badge component
   participate in the same horizontal flex row. */
.lg-artist-badge-row > .lg-badges {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lg-artist-extra-badges,
.lg-artist-fans-badge {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.lg-artist-fandom-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 42px !important;
    padding: 7px 15px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.lg-artist-fans-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 42px !important;
    padding: 7px 17px 7px 8px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

.lg-artist-fans-icon {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
}

.lg-artist-fans-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.lg-artist-fans-count {
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}

.lg-artist-fans-text {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

/* Never allow an older badge component to create a second
   Fans Loved button. */
.lg-artist-badge-row .lg-badges .lg-artist-fans-badge {
    display: none !important;
}

/* Keep the hero bottom line and shadow visible without
   clipping the badge row. */
.lg-artist-hero {
    overflow: visible !important;
    position: relative !important;
    box-shadow:
        0 28px 70px rgba(0,0,0,.38),
        0 10px 30px rgba(90,50,180,.10) !important;
}

.lg-artist-hero::after {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    z-index: 100 !important;
}

@media (max-width: 768px) {
    .lg-artist-badge-row {
        justify-content: center !important;
        gap: 8px !important;
    }

    .lg-artist-badge-row > .lg-badges {
        justify-content: center !important;
        gap: 8px !important;
    }

    .lg-artist-fandom-badge,
    .lg-artist-fans-badge {
        min-height: 38px !important;
    }

    .lg-artist-fans-count {
        font-size: 15px !important;
    }

    .lg-artist-fans-text {
        font-size: 9px !important;
    }
}

/* =========================================================
   LYRICSGROOVE — FINAL HERO BADGE SYSTEM
   AUTHORITATIVE OVERRIDE — KEEP THIS BLOCK LAST
========================================================= */

.lg-artist-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 14px !important;
    position: relative !important;
    z-index: 100 !important;
}

.lg-artist-badge-row > .lg-badges {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

.lg-artist-badge-row > .lg-artist-extra-badges,
.lg-artist-badge-row > .lg-artist-fans-badge {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Fandom — always visible when PHP has a value */
.lg-artist-badge-row .lg-artist-fandom-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    min-height: 42px !important;
    padding: 7px 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,215,80,.82) !important;
    background: linear-gradient(135deg,#fff4ad 0%,#ffd84d 48%,#eeb400 100%) !important;
    color: #17120a !important;
    box-shadow: 0 9px 22px rgba(239,179,0,.28), inset 0 1px 0 rgba(255,255,255,.82) !important;
    white-space: nowrap !important;
}

.lg-artist-badge-row .lg-artist-fandom-icon {
    width: 25px !important;
    height: 25px !important;
    flex: 0 0 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.78) !important;
    color: #946400 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.lg-artist-badge-row .lg-artist-fandom-label {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #4f3a05 !important;
    opacity: .72 !important;
}

.lg-artist-badge-row .lg-artist-fandom-name {
    font-size: 13px !important;
    font-weight: 950 !important;
    color: #15100a !important;
    line-height: 1 !important;
}

/* Fans Loved — exactly one badge, aligned with the other badges */
.lg-artist-badge-row > .lg-artist-fans-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 42px !important;
    padding: 7px 17px 7px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,135,180,.60) !important;
    background: linear-gradient(135deg,#ff4d91 0%,#f42d72 52%,#df1457 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 25px rgba(235,32,105,.34), 0 0 22px rgba(255,57,132,.20), inset 0 1px 0 rgba(255,255,255,.28) !important;
    white-space: nowrap !important;
}

.lg-artist-badge-row .lg-artist-fans-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

.lg-artist-badge-row .lg-artist-fans-icon svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    stroke: currentColor !important;
}

.lg-artist-badge-row .lg-artist-fans-count {
    display: inline-block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.lg-artist-badge-row .lg-artist-fans-text {
    display: inline-block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* If an old badge template ever contains this same class,
   suppress that nested copy. */
.lg-artist-badge-row .lg-badges .lg-artist-fans-badge {
    display: none !important;
}

/* Keep the hero's bottom line visible and prevent the shadow
   from being clipped by the hero itself. */
.lg-artist-hero {
    overflow: visible !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 10px 30px rgba(90,50,180,.10) !important;
}

.lg-artist-hero::after {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    z-index: 120 !important;
}

@media (max-width: 1024px) {
    .lg-artist-badge-row {
        gap: 8px !important;
    }

    .lg-artist-badge-row > .lg-badges {
        gap: 8px !important;
    }
}

@media (max-width: 768px) {
    .lg-artist-badge-row {
        justify-content: center !important;
        gap: 8px !important;
    }

    .lg-artist-badge-row > .lg-badges {
        justify-content: center !important;
        gap: 8px !important;
    }

    .lg-artist-badge-row .lg-artist-fandom-badge,
    .lg-artist-badge-row > .lg-artist-fans-badge {
        min-height: 38px !important;
    }

    .lg-artist-badge-row .lg-artist-fandom-icon {
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
    }

    .lg-artist-badge-row .lg-artist-fandom-name {
        font-size: 12px !important;
    }

    .lg-artist-badge-row .lg-artist-fans-icon {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
    }

    .lg-artist-badge-row .lg-artist-fans-count {
        font-size: 15px !important;
    }

    .lg-artist-badge-row .lg-artist-fans-text {
        font-size: 10px !important;
    }
}

@media (max-width: 480px) {
    .lg-artist-badge-row {
        width: 100% !important;
    }

    .lg-artist-badge-row > .lg-badges,
    .lg-artist-badge-row > .lg-artist-extra-badges,
    .lg-artist-badge-row > .lg-artist-fans-badge {
        max-width: 100% !important;
    }

    .lg-artist-badge-row .lg-artist-fandom-name {
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* =========================================================
   LYRICSGROOVE — FINAL FANDOM + DYNAMIC FANS BADGE FIX
   Keep this block LAST.
========================================================= */

/* Fandom star: black circle instead of white circle. */
.lg-artist-badge-row .lg-artist-fandom-icon {
    background: #111111 !important;
    color: #ffd84d !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.20) !important;
}

/* Keep the fandom badge readable after changing the icon. */
.lg-artist-badge-row .lg-artist-fandom-icon {
    font-weight: 900 !important;
}

/* Final Fans Loved typography. */
.lg-artist-badge-row .lg-artist-fans-text {
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Final count size. */
.lg-artist-badge-row .lg-artist-fans-count {
    font-size: 18px !important;
    font-weight: 950 !important;
}

@media (max-width: 768px) {
    .lg-artist-badge-row .lg-artist-fans-text {
        font-size: 10px !important;
    }

    .lg-artist-badge-row .lg-artist-fans-count {
        font-size: 15px !important;
    }
}