/* --- STYLES FOR ARCHIVE-MUSICIAN.PHP --- */

/* Apply this page's specific background */
body.post-type-archive-musician {
    background: var(--bg) !important;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
}

/* ------- Search band (like Event page) ------- */
.search-band{margin-top:64px;padding:18px 5%;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));border-bottom:1px solid var(--border)}
.search-wrap{max-width:1200px;margin:0 auto}
.search-card{background:#0f1422;border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;padding:12px}
.search-form{display:grid;grid-template-columns:2fr 1.1fr 1.1fr auto;gap:10px}
.field{position:relative}
.icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.55}
.input, .select{width:100%;padding:14px 14px 14px 42px;background:#0b0f1b;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:1rem;transition:border .2s, box-shadow .2s}
.select{padding-left:12px}
.input:focus, .select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}

/* *** FIX 3: Find Artists button styling *** */
.btn{
    padding:14px 18px;
    border:none;
    border-radius:10px;
    background: var(--gold); /* Switched to bright gold */
    color:#0b0d12; /* Dark text for contrast */
    font-weight:800;
    cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
@media(max-width:900px){.search-form{grid-template-columns:1fr}}

/* *** FIX 1: Full-width hero fix *** */
.hero {
    position: relative;
    height: 64vh;
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: hidden; 
    width: 100vw; 
    margin-left: calc(50% - 50vw);
    padding: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.hero-banner{position:absolute;inset:0;overflow:hidden;filter:brightness(.62) saturate(1.05)}
.hero-track{position:absolute;left:0;top:0;height:100%;display:flex;gap:12px;padding:12px;will-change:transform;animation:heroScroll 40s linear infinite}
.hero-track img{height:calc(100% - 24px);width:auto;object-fit:cover;border-radius:10px}
.hero:hover .hero-track{animation-play-state:paused}

/* *** FIX 1: Keyframe animation (for 2-copy track) *** */
@keyframes heroScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){.hero-track{animation:none}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))}
.hero-content{position:relative;z-index:2;text-align:center;padding:1rem 5%;max-width:1000px}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:0 0 .5rem}
.hero p{font-size:clamp(1rem,2.4vw,1.25rem);opacity:.92;margin:.2rem 0 0}

/* Sections */
.section{padding:4rem 5%}
.title{font-size:2.2rem;margin:0 0 1rem;text-align:center}
.sub{opacity:.75;text-align:center;margin:-4px 0 20px}

/* *** FIX 2: Added wrapper style for 'Most Popular' section *** */
.spotlight-wrap {
    max-width: 1200px;
    margin: 0 auto;
    background: #0f1422;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: var(--shadow);
}

/* Spotlights carousel */
.carousel{position:relative}
.carousel::before,.carousel::after{content:"";position:absolute;top:0;bottom:0;width:80px;pointer-events:none;z-index:2}
/* Use the wrapper background color for the fade */
.carousel::before{left:0;background:linear-gradient(90deg, #0f1422, rgba(15,20,34,0))}
.carousel::after{right:0;background:linear-gradient(-90deg, #0f1422, rgba(15,20,34,0))}
.track{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px, 1fr);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.track::-webkit-scrollbar{height:10px}
.track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:999px}
.card{scroll-snap-align:start;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .25s}
.card:hover{transform:translateY(-6px)}
.card img{height:260px;width:100%;object-fit:cover}
.card .info{padding:14px}
.pill{display:inline-block;font-size:.8rem;color:#0b0d12;background:#e5e7eb;padding:4px 9px;border-radius:999px;margin-bottom:6px}
.name{font-weight:900;font-size:1.15rem;margin-bottom:4px}
.desc{opacity:.85;font-size:.95rem}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;z-index:3;font-size:1.25rem}
.nav-btn:hover{background:rgba(0,0,0,.7)}
.nav-prev{left:-6px} .nav-next{right:-6px}

/* Islands (3 columns × 5 rows) */
.section-islands{padding:3.5rem 5%;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}
.islands-wrap{max-width:1200px;margin:0 auto;background:#0f1422;border:1px solid var(--border);border-radius:14px;padding:20px 18px;box-shadow:var(--shadow)}
.islands-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.islands-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
@media(max-width:900px){.islands-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:560px){.islands-grid{grid-template-columns:1fr}}
.island{background:#0b0f1b;border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:transform .15s,border .2s}
.island:hover{transform:translateY(-2px);border-color:var(--accent)}
.island .count{opacity:.65;margin-top:6px;font-size:.9rem}

/* Trending (Who’s trending right now?) */
.section-trending{padding:3.5rem 5%;background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(139,92,246,.10));position:relative}
.trending-wrap{max-width:1200px;margin:0 auto;background:#0f1422;border:1px solid var(--border);border-radius:14px;padding:22px 18px;box-shadow:var(--shadow)}
.trending-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}
.trending-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}
@media(max-width:1024px){.trending-grid{grid-template-columns:repeat(3, 1fr)}}
@media(max-width:760px){.trending-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:520px){.trending-grid{grid-template-columns:1fr}}
.trend-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,border .2s}
.trend-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.trend-card img{width:100%;height:180px;object-fit:cover}
.trend-info{padding:12px}
.trend-name{font-weight:900}
.trend-meta{opacity:.8;font-size:.95rem;margin-top:2px}
.trend-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#0b0d12;font-weight:900;padding:4px 10px;border-radius:999px;font-size:.8rem;border:1px solid rgba(255,255,255,.15)}

/* GENRES — Billboard-style vertical list + chart pane */
.section-genres{padding:3.5rem 5%;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}
.genres-wrap{max-width:1200px;margin:0 auto;background:#0f1422;border:1px solid var(--border);border-radius:14px;padding:22px 18px;box-shadow:var(--shadow)}
.genres-billboard{display:grid;grid-template-columns:260px 1fr;gap:16px}
@media(max-width:900px){.genres-billboard{grid-template-columns:1fr}}
.genres-nav{display:flex;flex-direction:column;gap:10px}

/* *** FIX 4a: Lighter genre tab background *** */
.genres-nav .tab{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    background: var(--card); /* Was #0b0f1b, now #111827 */
    border:1px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    font-weight:800;
}
.genres-nav .tab:hover{border-color:var(--accent)}
.genres-nav .tab.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring) inset}
.count-pill{font-size:.85rem;opacity:.85;background:rgba(255,255,255,.06);border:1px solid var(--border);padding:4px 8px;border-radius:999px}
.genres-content{background:#0b0f1b;border:1px solid var(--border);border-radius:12px;padding:14px}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}
.chart-week{display:flex;align-items:center;gap:10px}
.week-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:#0f1422;color:#fff;cursor:pointer}
.week-btn:hover{border-color:var(--accent)}
.chart-list{display:flex;flex-direction:column;gap:10px}
.chart-item{display:grid;grid-template-columns:56px 72px 1fr auto;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}

/* *** FIX 4b: Visible rank numbers *** */
.rank-badge{
    width:48px;
    height:48px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background: var(--gold); /* Switched from gradient to gold */
    color: #0b0d12; /* Dark text for contrast */
    font-weight:900;
}
.cover{width:72px;height:72px;border-radius:10px;object-fit:cover}
.entry-title{font-weight:900}
.entry-artist{opacity:.8;font-size:.95rem;margin-top:2px}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;opacity:.85}
.move{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.move.up{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35)}
.move.down{background:rgba(244,63,94,.15);border-color:rgba(244,63,94,.35)}
.move.new{background:rgba(250,204,21,.15);border-color:rgba(250,204,21,.35)}
.actions{display:flex;gap:8px}
.btn-ghost{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#0f1422;color:#fff;cursor:pointer}
.btn-ghost:hover{border-color:var(--accent)}

/* FIRST-TIMERS */
.section-first{padding:3.5rem 5%;background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(34,211,238,.08));}
.first-wrap{max-width:1200px;margin:0 auto;background:#0f1422;border:1px solid var(--border);border-radius:14px;padding:22px 18px;box-shadow:var(--shadow)}
.ft-list{display:grid;gap:8px;margin-top:10px}
.ft-item{display:grid;grid-template-columns:48px 64px 1fr auto;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px}
.ft-rank{font-weight:900;font-size:1.25rem;text-align:center}
.ft-thumb{width:64px;height:64px;border-radius:8px;object-fit:cover}
.ft-title{font-weight:900}
.ft-meta{opacity:.8;font-size:.95rem}
.badge-new{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:800}

/* Footer */
footer{padding:2rem 5%;opacity:.7;border-top:1px solid var(--border)}
/* --- Fixed grid for Most Popular Caribbean Music Artist (3 + 2) --- */
#spotlights-row1 .track{display:grid;grid-auto-flow:unset;grid-template-columns:repeat(3,1fr);gap:22px;overflow:visible}
#spotlights-row2 .track{display:grid;grid-auto-flow:unset;grid-template-columns:repeat(2,1fr);gap:22px;overflow:visible}
#spotlights-row1 .nav-btn,#spotlights-row2 .nav-btn{display:none}
@media(max-width:980px){#spotlights-row1 .track{grid-template-columns:repeat(2,1fr)}#spotlights-row2 .track{grid-template-columns:1fr}}
@media(max-width:560px){#spotlights-row1 .track,#spotlights-row2 .track{grid-template-columns:1fr}}

/* Chips */
.chip{display:inline-block;padding:6px 12px;border:1px solid var(--border);border-radius:999px;opacity:.9}
/* Genres text color tweak */
.genres-nav .tab span:first-child{color:var(--muted)}
.genres-nav .tab.active span:first-child,
.genres-nav .tab:hover span:first-child{color:var(--gold)}