/* --- STYLES FOR SINGLE-MUSICIAN.PHP (VERSION 2) --- */

body.single-musician {
    background: var(--ink) !important;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
    scroll-behavior: smooth;
}

/* Top nav */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,12,18,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{font-weight:900;letter-spacing:.3px}
.quicknav{margin-left:auto;display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.pill{padding:8px 12px;border:1px solid var(--border);border-radius:999px;white-space:nowrap}
.pill.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}

/* Search bar (REMOVED from template, but styles are safe) */
.asearch-band{display:none;} /* Hides it if it ever comes back */

/* *** 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 .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.03) contrast(1.03) brightness(.78)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 20%, rgba(255,45,149,.25), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75))}
.hero .content{position:relative;z-index:1;max-width:1100px;margin:auto;padding:48px 16px;text-align:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(0,0,0,.35);font-size:12px;color:var(--muted)}
.hero h1{font-size:clamp(28px,6.5vw,64px);margin:10px 0 6px}
.sub{opacity:.92}
.socials{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.06)}
.sbtn:hover{border-color:var(--accent)}

/* Stats */
.stats{max-width:1100px;margin:16px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:clamp(18px,3.5vw,28px);font-weight:900}

/* Sections */
.wrap{max-width:1200px;margin:0 auto;padding:32px 16px}
.section{padding:18px 0 36px;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:0}
.section-header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section h2{margin:0;font-size:clamp(20px,3.5vw,30px)}
.lead{color:#e6e9f2;opacity:.95}
.tag{font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:999px}

/* About & Bio */
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:16px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.fact{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:10px}
.fact .k{font-size:12px;color:var(--muted)}
.fact .v{font-weight:800}
.fact .v a:hover { text-decoration: underline; color: var(--accent); }

/* Player */
.player{display:grid;grid-template-columns:1fr .9fr;gap:18px}
@media (max-width:900px){.player{grid-template-columns:1fr}}
.now{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.now .row{display:flex;gap:14px}
.cover{width:96px;height:96px;border-radius:14px;overflow:hidden;background:#0b0d12;flex:0 0 96px}
.tmeta{font-size:12px;color:var(--muted)}
.controls{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.btn[aria-pressed="true"]{background:var(--gold);color:#000;border-color:rgba(245,183,0,.85)}
.seek, .vol{appearance:none;width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border);cursor:pointer}
.seek::-webkit-slider-thumb, .vol::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #fff}

.playlist{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;max-height:420px;overflow:auto}
.track{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;cursor:pointer}
.track:hover{background:rgba(255,255,255,.04)}
.track.active{outline:2px solid var(--accent);background:rgba(255,45,149,.08)}

/* Discography */
.albums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){.albums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.albums{grid-template-columns:1fr}}
.album{display:flex;flex-direction:column}
.thumb{position:relative;aspect-ratio:1/1;background:#0b0d12;overflow:hidden;border-radius:12px}
.thumb img{width:100%;height:100%;object-fit:cover}
.album .meta{display:flex;justify-content:space-between;gap:8px;margin:8px 2px 6px}
.tracks{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tr{display:flex;gap:10px;align-items:center;padding:10px;background:rgba(255,255,255,.03)}
.tr+.tr{border-top:1px solid var(--border)}
.tr .ix{width:26px;text-align:center;opacity:.8}
.tr .ttl{flex:1}
.tr .dur{opacity:.7;font-size:12px}
.tr .play{border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.05);cursor:pointer}

/* Videos (YouTube modal) */
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1000px){.yt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.yt-grid{grid-template-columns:1fr}}
.yt-card{background:var(--card);border:1px solid var(--border);padding:10px;border-radius:12px}
.yt-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.yt-thumb{position:absolute;inset:0;background-size:cover;background-position:center;filter:contrast(1.05) brightness(.9)}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(0,0,0,.55);display:grid;place-items:center;cursor:pointer}

#ytModal{position:fixed;inset:0;display:none;z-index:1000}
#ytModal.open{display:block}
#ytModal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
#ytModal .dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1020px,92vw);background:#0b0d12;border:1px solid var(--border);box-shadow:0 18px 48px rgba(0,0,0,.5)}
#ytModal .frame{position:relative;aspect-ratio:16/9}
#ytModal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#ytModal .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--border)}

/* Tour */
.tour{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tour-row{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;align-items:center;padding:12px 14px;background:rgba(255,255,255,.03)}
.tour-row+.tour-row{border-top:1px solid var(--border)}
@media(max-width:820px){.tour-row{grid-template-columns:1fr 1fr;gap:6px}}

/* Contact */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){form.contact{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.input,.textarea{padding:12px;border-radius:12px;border:1px solid var(--border);background:#0b0f1b;color:#fff}
.textarea{min-height:140px;resize:vertical}
.submit{margin-top:6px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,var(--accent),var(--accent-2));font-weight:900;color:#0a0610;cursor:pointer}

/* Misc */
.to-top{position:fixed;right:14px;bottom:14px;z-index:40;display:none}
.to-top.show{display:block}