/* Extracted from music/genre.php */

body[data-page="genre"] .artist-hero{
  border-radius:14px;
  margin:12px 0 28px;
  background:#000;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    0 10px 30px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateZ(0);
}

body[data-page="genre"] .artist-hero-bg{
  width:100%;
  height:450px;
  object-fit:cover;
  border-radius:14px;
  filter:
    contrast(1.08)
    saturate(1.12)
    brightness(1.05);
}

body[data-page="genre"] .artist-hero-overlay{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:transparent;
  -webkit-mask-image:none;
  mask-image:none;
}

body[data-page="genre"] .artist-hero::before{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:inherit;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, var(--grad-1), transparent 50%),
    radial-gradient(circle at 80% 20%, var(--grad-2), transparent 55%),
    radial-gradient(circle at 50% 100%, var(--grad-3), transparent 60%);
  opacity:.55;
  filter:blur(40px);
}

body[data-page="genre"] .artist-hero::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12), transparent 25%),
    linear-gradient(to top, rgba(0,0,0,.65), transparent 55%);
  mix-blend-mode:soft-light;
}

body[data-page="genre"] .artist-hero-inner{
  position:absolute;
  bottom:22px;
  left:22px;
  right:22px;
  max-width:760px;
}

body[data-page="genre"] .artist-hero-sub{
  margin-bottom:8px;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}

body[data-page="genre"] .artist-hero-title{
  margin:0;
  font-size:clamp(2.4rem, 5vw, 4rem);
  color:#fff;
}

body[data-page="genre"] .artist-hero-meta{
  margin-top:10px;
  font-size:1rem;
  color:#e5e7eb;
}

body[data-page="genre"] .genre-slug-pill{
  display:inline-block;
  margin-top:4px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #374151;
  font-size:.8rem;
  background:#020617;
  color:#9ca3af;
}

body[data-page="genre"] .article-body-wrap{
  margin:0 0 40px;
}

body[data-page="genre"] .article-body{
  max-width:820px;
  margin:0 auto;
}

body[data-page="genre"] .article-body p{
  margin:0 0 1em;
  line-height:1.8;
  color:#e5e7eb;
  text-align:justify;
}

body[data-page="genre"] .article-body h2,
body[data-page="genre"] .article-body h3,
body[data-page="genre"] .article-body h4{
  margin-top:1.4em;
  margin-bottom:.6em;
  color:#f9fafb;
}

body[data-page="genre"] .article-body ul,
body[data-page="genre"] .article-body ol{
  margin:0 0 1em 1.4em;
  color:#e5e7eb;
}

body[data-page="genre"] .article-body blockquote{
  margin:1em 0;
  padding:10px 14px;
  border-left:3px solid #6366f1;
  background:rgba(15,23,42,0.7);
  border-radius:8px;
  color:#e5e7eb;
  font-style:italic;
}

body[data-page="genre"] .muted{
  color:#9ca3af;
  font-size:.95rem;
}

body[data-page="genre"] .article-body .toc-list{
  list-style:none;
  padding-left:0;
  margin:.5em 0 1.5em;
}

body[data-page="genre"] .article-body .toc-list li{
  margin-bottom:4px;
}

body[data-page="genre"] .article-body .toc-list a{
  color:#a5b4fc;
  text-decoration:none;
  font-size:.95rem;
}

body[data-page="genre"] .article-body .toc-list a:hover{
  text-decoration:underline;
}

body[data-page="genre"] .article-body table{
  width:100%;
  border-collapse:collapse;
  margin:1.5em 0;
  font-size:.95rem;
  color:#e5e7eb;
}

body[data-page="genre"] .article-body th,
body[data-page="genre"] .article-body td{
  border:1px solid #374151;
  padding:8px 10px;
  vertical-align:top;
}

body[data-page="genre"] .article-body th{
  background:#020617;
  font-weight:600;
}

body[data-page="genre"] .artist-hero-credit{
  margin-top:8px;
  color:rgba(255,255,255,.82);
}

@media (max-width:720px){
  body[data-page="genre"] .artist-hero-inner{
    left:18px;
    right:18px;
    bottom:18px;
    text-align:center;
  }

  body[data-page="genre"] .artist-hero-sub{
    font-size:.82rem;
  }

  body[data-page="genre"] .artist-hero-meta{
    font-size:.95rem;
  }
}