/*
Programs Section Styles
Based on WMOM Theme Style.css
*/


/* ===== RESET ===== */

*{

box-sizing:border-box;

}

html,body{

margin:0;
padding:0;
background:black;
color:white;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;

}

body.programs-body{

padding-bottom:80px;

}

a{

color:#ff3366;
text-decoration:none;

}

a:hover{

color:white;

}

img{

max-width:100%;
height:auto;

}

ul{

margin:0;
padding:0;

}


/* ===== PROGRAMS NAV ===== */

.programs-header{

background:black;
border-bottom:2px solid #ff004c;

}

.programs-menu{

list-style:none;
text-align:center;
padding:15px 0;

}

.programs-menu li{

display:inline-block;
margin:0 25px;

}

.programs-menu a{

color:white;
font-weight:bold;
letter-spacing:2px;
text-transform:uppercase;
font-size:15px;

transition:.25s;

}

.programs-menu a:hover{

color:#ff3366;

text-shadow:0 0 8px rgba(255,0,76,.6);

}


/* ===== NOW PLAYING ===== */

.now-playing-panel{

max-width:1200px;

margin:0 auto;

padding:25px 20px 15px 20px;

}

.np-card{

max-width:900px;

margin:auto;

background:linear-gradient(180deg,#0a0a0a,#000);

border-radius:16px;

padding:35px;

border:1px solid #ff004c;

box-shadow:0 0 35px rgba(255,0,90,.35);

text-align:center;

position:relative;

overflow:hidden;

}

.np-card:hover{

box-shadow:0 0 55px rgba(255,0,90,.6);

}

.np-card:before{

content:"";

position:absolute;

inset:0;

border-radius:16px;

background:linear-gradient(120deg,transparent,#ff004c33,transparent);

opacity:.35;

pointer-events:none;

}

.np-header{

color:#ff3366;

letter-spacing:5px;

font-size:13px;

margin-bottom:12px;

}

.np-artist{

font-size:42px;

font-weight:900;

margin-top:5px;

}

.np-title{

font-size:20px;

color:#bbb;

margin-top:6px;

}


/* LIVE DOT */

.live-dot{

display:inline-block;

width:10px;

height:10px;

background:#ff004c;

border-radius:50%;

margin-left:8px;

animation:livePulse 1.5s infinite;

}

@keyframes livePulse{

0%{box-shadow:0 0 0 0 rgba(255,0,90,.7);}

70%{box-shadow:0 0 0 10px rgba(255,0,90,0);}

100%{box-shadow:0 0 0 0 rgba(255,0,90,0);}

}


/* ===== LISTEN BUTTON ===== */

.listen-now-wrap{

text-align:center;

margin-top:15px;

}

.listen-now-button{

display:inline-block;

background:#ff004c;

color:white;

padding:10px 28px;

border-radius:30px;

font-weight:bold;

letter-spacing:1px;

transition:.25s;

box-shadow:0 0 15px rgba(255,0,76,.35);

animation:listenPulse 2.5s infinite;

}

.listen-now-button:hover{

background:#ff3366;

box-shadow:0 0 25px rgba(255,0,76,.6);

transform:translateY(-2px);

}

@keyframes listenPulse{

0%{box-shadow:0 0 15px rgba(255,0,76,.35);}

50%{box-shadow:0 0 28px rgba(255,0,76,.65);}

100%{box-shadow:0 0 15px rgba(255,0,76,.35);}

}


/* ===== EQUALIZER ===== */

.equalizer{

margin-top:15px;

}

.equalizer span{

display:inline-block;
width:6px;
margin:0 3px;
background:#ff3366;

}


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

.page-wrap.programs-page{

max-width:1200px;
margin:0 auto;
padding:30px 20px;

}

.programs-hero{

text-align:center;
margin-bottom:40px;

border-top:1px solid #151515;

padding-top:30px;

}

.programs-hero h1{

font-size:42px;
margin-bottom:15px;

}

.programs-hero p{

max-width:800px;
margin:0 auto;
font-size:18px;
line-height:1.6;
color:#ccc;

}


/* ===== PROGRAM GRID ===== */

.program-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;

}

.program-card{

background:#111;
border-radius:14px;
overflow:hidden;
border:1px solid #222;
box-shadow:0 0 20px rgba(255,0,76,.15);

transition:.3s;

cursor:pointer;

}

.program-card:hover{

transform:translateY(-4px);

box-shadow:0 0 35px rgba(255,0,76,.35);

}

.program-card.featured{

grid-column:span 2;

border:1px solid #ff004c;

box-shadow:0 0 30px rgba(255,0,76,.25);

background:linear-gradient(145deg,#111,#0a0a0a);

}

.program-image{

position:relative;

overflow:hidden;

}

.program-image img{

display:block;
width:100%;

transition:.4s;

}

.program-card:hover img{

transform:scale(1.05);

}

.time-badge{

position:absolute;
bottom:12px;
left:12px;
background:#ff004c;
color:white;
padding:8px 12px;
border-radius:6px;
font-size:13px;
font-weight:bold;

}

.program-content{

padding:26px;

}

.program-content h2{

margin-top:0;
margin-bottom:14px;
font-size:26px;

letter-spacing:.5px;

}

.program-content p{

color:#d0d0d0;
line-height:1.6;
margin-bottom:14px;

font-size:15px;

}


/* ===== PLAYER ===== */

.programs-player{

max-width:1200px;

margin:40px auto 0 auto;

padding:30px;

border-top:2px solid #ff004c;

border-radius:12px;

text-align:center;

background:#050505;

}


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

.programs-footer{

border-top:2px solid #ff004c;
padding:25px;
text-align:center;
background:black;
margin-top:60px;

}


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

@media(max-width:800px){

.programs-menu{

display:grid;
grid-template-columns:1fr 1fr;
padding:0;

}

.programs-menu li{

margin:0;
border:1px solid #111;

}

.programs-menu a{

display:block;
padding:14px 0;

}

.program-card.featured{

grid-column:span 1;

}

.programs-hero h1{

font-size:30px;

}

}