/* =======================================================
   XIT MUSIC ARTISTS
======================================================= */

:root{

    --red:#e50914;
    --dark:#0a0a0a;
    --card:#111;
    --gold:#FFD700;
    --white:#ffffff;
    --text:#bfbfbf;
    --border:#232323;

}

/* ==========================
   HERO
========================== */

.artists-hero{

    background:

    linear-gradient(
    135deg,
    #151515,
    #090909
    );

    padding:90px 20px;

    text-align:center;

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

}

.artists-hero h1{

    font-size:3rem;

    color:#fff;

    margin-bottom:15px;

}

.artists-hero p{

    color:#bbb;

    font-size:18px;

}

/* ==========================
   SEARCH
========================== */

.artist-search{

    max-width:700px;

    margin:40px auto;

}

.artist-search input{

    width:100%;

    padding:16px 20px;

    border-radius:12px;

    background:#111;

    color:#fff;

    border:1px solid #333;

    font-size:16px;

    outline:none;

}

.artist-search input:focus{

    border-color:var(--red);

}

/* ==========================
   FEATURED ARTISTS
========================== */

.featured-artists{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:30px;

}

/* ==========================
   ARTISTS GRID
========================== */

.artists-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(250px,1fr));

    gap:30px;

    margin-top:30px;

}

/* ==========================
   ARTIST CARD
========================== */

.artist-card{

    background:#111;

    border:1px solid #222;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    text-decoration:none;

    color:#fff;

}

.artist-card:hover{

    transform:translateY(-8px);

    border-color:#FFD700;

    box-shadow:

    0 15px 35px

    rgba(255,215,0,.18);

}

.artist-image{

    width:100%;

    height:300px;

    object-fit:cover;

}

.artist-info{

    padding:20px;

}

.artist-info h3{

    color:#FFD700;

    margin-bottom:10px;

    font-size:1.4rem;

}

.artist-info p{

    color:#bbb;

    margin-bottom:8px;

}

.artist-info span{

    color:#fff;

    font-weight:700;

}

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

.artist-verified{

    display:inline-block;

    margin-top:12px;

    padding:6px 12px;

    border-radius:20px;

    background:#2196F3;

    color:#fff;

    font-size:12px;

    font-weight:700;

}

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

.artist-featured{

    position:absolute;

    top:15px;

    left:15px;

    background:#FFD700;

    color:#111;

    padding:7px 14px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.artist-card{

    position:relative;

}

/* ==========================
   EMPTY STATE
========================== */

.empty-artists{

    text-align:center;

    padding:80px 20px;

    color:#999;

}

.empty-artists h2{

    color:#fff;

    margin-bottom:15px;

}

/* ==========================
   RESPONSIVE
========================== */
@media(max-width:768px){

    .artists-grid{

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

        gap:12px;

    }

    .featured-artists{

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

        gap:12px;

    }

    .artist-card{

        min-width:0;

    }

    .artist-image{

        height:220px;

    }

    .artist-info{

        padding:12px;

    }

    .artist-info h3{

        font-size:1.05rem;

        margin-bottom:8px;

    }

    .artist-info p{

        font-size:13px;

    }

    .artist-verified{

        font-size:10px;

        padding:5px 9px;

    }

    .artist-featured{

        top:8px;

        left:8px;

        padding:5px 9px;

        font-size:10px;

    }

    .artists-hero h1{

        font-size:2rem;

    }

}
/* ==========================
   FOOTER
========================== */

.site-footer{

    margin-top:80px;

    padding:40px 20px;

    background:#080808;

    border-top:1px solid #1d1d1d;

    text-align:center;

}

.footer-copy{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

    letter-spacing:.5px;

}

.footer-company{

    color:#e50914;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.xit-mma-red{color:#e50914!important;font-weight:800;}

/* XITMMA atmospheric background */
body{
  background:
    radial-gradient(ellipse at 15% 10%, rgba(229,9,20,.24) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 15%, rgba(180,0,35,.20) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.035) 0%, transparent 38%),
    radial-gradient(ellipse at 20% 90%, rgba(229,9,20,.12) 0%, transparent 32%),
    linear-gradient(125deg,#030303 0%,#0b0b0d 38%,#15090d 68%,#040404 100%);
  background-attachment: fixed;
  background-size: 140% 140%;
}
.mma-magazine-info{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(229,9,20,.28);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(229,9,20,.08),rgba(255,255,255,.025));
}
.mma-magazine-info strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;color:#ddd;font-size:.88rem}

/* card magazine spacing */
.mma-magazine-info{box-sizing:border-box;width:100%;margin-top:12px}

/* product-driven magazine card */
.mma-magazine-info{margin:12px 0 2px;padding:10px 12px;border:1px solid rgba(229,9,20,.3);border-radius:9px;background:rgba(229,9,20,.06)}
.mma-magazine-info strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;font-size:13px;color:#eee}

/* FIX: product-saved magazine edition */
.mma-magazine-info{
  display:block!important;
  width:100%;
  margin-top:10px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid rgba(229,9,20,.35);
  border-radius:8px;
  background:rgba(229,9,20,.07);
}
.mma-magazine-info strong{display:block!important;color:#e50914;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mma-magazine-info span{display:block!important;color:#fff;font-size:12px;margin-top:3px}

/* ==========================================================
   ARTISTS PAGE — PREMIUM ATMOSPHERIC BACKGROUND
========================================================== */
body#artistsPage{
    background:
        radial-gradient(circle at 12% 8%, rgba(229,9,20,.18) 0%, transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(120,0,30,.16) 0%, transparent 30%),
        radial-gradient(circle at 50% 55%, rgba(255,255,255,.025) 0%, transparent 34%),
        radial-gradient(circle at 18% 92%, rgba(229,9,20,.10) 0%, transparent 30%),
        linear-gradient(135deg,#030303 0%,#0a0a0d 42%,#12080c 72%,#030303 100%);
    background-attachment:fixed;
    background-size:140% 140%;
}

/* Keep the hero distinct while blending it into the page atmosphere. */
body#artistsPage .artists-hero{
    background:
        radial-gradient(circle at 50% 0%, rgba(229,9,20,.14), transparent 42%),
        linear-gradient(135deg,rgba(20,20,22,.94),rgba(5,5,7,.96));
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 45px rgba(0,0,0,.28);
}

/* Shorter, cleaner artist search bar. */
body#artistsPage .artist-search{
    width:min(100%,520px);
    max-width:520px;
    margin:30px auto 0;
}

body#artistsPage .artist-search input{
    width:100%;
    height:52px;
    box-sizing:border-box;
    padding:0 18px 0 48px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background-color:rgba(12,12,14,.92);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e50914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:17px center;
    background-size:20px 20px;
    box-shadow:0 10px 30px rgba(0,0,0,.30),0 0 24px rgba(229,9,20,.07);
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}

body#artistsPage .artist-search input:focus{
    border-color:rgba(229,9,20,.75);
    background-color:#151517;
    box-shadow:0 0 0 3px rgba(229,9,20,.13),0 12px 32px rgba(0,0,0,.34);
}

@media(max-width:768px){
    body#artistsPage .artists-hero{
        padding:52px 16px 44px;
    }

    body#artistsPage .artist-search{
        width:100%;
        max-width:430px;
        margin-top:22px;
    }

    body#artistsPage .artist-search input{
        height:48px;
        padding-left:44px;
        padding-right:14px;
        border-radius:13px;
        background-position:14px center;
        background-size:19px 19px;
        font-size:15px;
    }
}

/* ==========================================================
   ARTISTS — HIGH-END CINEMATIC BACKGROUND
========================================================== */
body#artistsPage{
    background:
        radial-gradient(900px 520px at 8% 0%, rgba(229,9,20,.16), transparent 62%),
        radial-gradient(760px 520px at 94% 12%, rgba(140,0,35,.13), transparent 62%),
        radial-gradient(820px 620px at 52% 48%, rgba(255,255,255,.025), transparent 68%),
        radial-gradient(700px 520px at 8% 96%, rgba(229,9,20,.09), transparent 65%),
        radial-gradient(700px 520px at 96% 90%, rgba(90,0,30,.10), transparent 65%),
        linear-gradient(125deg,#020203 0%,#070709 30%,#10070b 58%,#080607 78%,#010102 100%);
    background-attachment:fixed;
    background-size:cover;
}