/* program.css - AIRFM PROGRAM PAGE LIKE HOME v7.6 */

.program-page{
  --program-primary:var(--accent);
  --program-secondary:var(--accent2);
  position:relative;
}

/* Light program atmosphere, without killing performance */
.program-page::before{
  content:"";
  position:fixed;
  inset:-28px;
  z-index:-3;
  pointer-events:none;
  background-image:var(--program-cover-bg, url("/airfmsocial.png"));
  background-size:cover;
  background-position:center;
  filter:blur(28px) saturate(1.15);
  transform:scale(1.06);
  opacity:.22;
}

.program-page::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--program-primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--program-secondary) 22%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(7,6,13,.74), rgba(7,6,13,.96) 72%, #07060d 100%);
}

/* Main player should feel like homepage live player */
.program-live-hero .hero-player{
  min-height:620px;
}

.program-live-hero .hero-content{
  padding:24px 36px 28px;
}

.program-live-hero #program-title{
  margin:8px 0 10px;
  font-family:"Syne",sans-serif;
  font-size:clamp(2.6rem,4vw,4.7rem);
  line-height:.94;
  letter-spacing:-.06em;
}

#program-description{
  display:block;
  margin-top:8px;
  color:var(--muted2);
  line-height:1.55;
  max-width:720px;
}

.program-controls-row{
  justify-content:flex-start;
}

.program-next-note p{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:700;
  line-height:1.55;
}

.program-art-wrap{
  overflow:hidden;
  border-radius:16px;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--program-primary) 20%, transparent), transparent 58%),
    rgba(9,6,18,.88);
}

.program-art-wrap img,
.program-art-wrap video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.36);
}

/* Equalizer */
.program-live-hero .playback-visual{
  width:138px;
  height:46px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
}

.program-live-hero .playback-visual span{
  width:10px;
  height:42px;
  border-radius:2px;
  transform-origin:bottom;
  transform:scaleY(.32);
  background:
    repeating-linear-gradient(
      to top,
      rgba(255,255,255,.92) 0 4px,
      transparent 4px 8px
    );
  opacity:.9;
}

body.playing .program-live-hero .playback-visual span{
  animation:eq-console-clean 1.15s steps(4,end) infinite;
}

body.playing .program-live-hero .playback-visual span:nth-child(1){animation-delay:0ms;}
body.playing .program-live-hero .playback-visual span:nth-child(2){animation-delay:95ms;}
body.playing .program-live-hero .playback-visual span:nth-child(3){animation-delay:190ms;}
body.playing .program-live-hero .playback-visual span:nth-child(4){animation-delay:285ms;}
body.playing .program-live-hero .playback-visual span:nth-child(5){animation-delay:120ms;}
body.playing .program-live-hero .playback-visual span:nth-child(6){animation-delay:215ms;}
body.playing .program-live-hero .playback-visual span:nth-child(7){animation-delay:310ms;}

@keyframes eq-console-clean{
  0%,100%{transform:scaleY(.28);}
  25%{transform:scaleY(.55);}
  50%{transform:scaleY(.88);}
  75%{transform:scaleY(.42);}
}

/* Program queue */

.program-track-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}

.program-track-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:118px;
  height:100%;
  padding:16px 58px 16px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.program-track-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.18);
}

.program-track-card.active{
  border-color:rgba(255,78,205,.45);
  background:
    linear-gradient(
      135deg,
      rgba(168,85,247,.14),
      rgba(255,78,205,.08)
    );
}

.program-track-card strong{
  display:block;
  min-height:44px;
  margin-bottom:8px;
  font-size:.95rem;
  line-height:1.25;
}

.program-track-card span{
  margin-top:auto;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.35;
}

/* Same controls as homepage */
.program-live-hero .btn-icon{
  width:48px;
  height:48px;
  padding:0;
}

.program-live-hero .btn-icon svg{
  width:20px;
  height:20px;
}

.program-live-hero .btn-main-play{
  gap:9px;
  min-height:48px;
}

.program-live-hero .btn-main-play svg{
  width:18px;
  height:18px;
}

/* Force purple payment button on program page */
.program-page .airfm-purple-adfree,
.program-page .btn-gold,
.program-page a.airfm-purple-adfree,
.program-page button.airfm-purple-adfree,
.program-page a.btn-gold,
.program-page button.btn-gold{
  color:#fff !important;
  background-color:#a855f7 !important;
  background-image:linear-gradient(120deg,#7c3aed 0%,#a855f7 35%,#ff4ecd 70%,#7c3aed 100%) !important;
  background-size:260% 260% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 10px 30px rgba(168,85,247,.35),
    0 0 26px rgba(255,78,205,.25) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.25) !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.program-page .airfm-purple-adfree::before,
.program-page .airfm-purple-adfree::after,
.program-page .btn-gold::before,
.program-page .btn-gold::after{
  display:none !important;
}

/* AIRFM PROGRAM FAVORITES */

.program-page .favorite-btn{
  position:relative;
  z-index:20;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  background:rgba(7,6,13,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto !important;
  transition:
    transform .16s ease,
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.program-page .favorite-btn:hover{
  transform:scale(1.06);
  color:#ff9be8;
  border-color:rgba(255,78,205,.34);
  background:rgba(255,78,205,.12);
}

.program-page .favorite-btn svg{
  width:18px;
  height:18px;
  pointer-events:none;
}

.program-page .favorite-btn.active{
  color:#ff4ecd;
  background:rgba(255,78,205,.18);
  border-color:rgba(255,78,205,.42);
  box-shadow:0 0 18px rgba(255,78,205,.18);
}

.program-page .favorite-btn.active svg{
  fill:currentColor;
}

.program-page .now-track{
  position:relative;
  padding-right:66px;
}

.program-page .now-track .favorite-btn{
  position:absolute;
  top:14px;
  right:14px;
}

.program-page .program-track-card .favorite-btn{
  position:absolute;
  top:12px;
  right:12px;
}

/* Schedule cards on program page */
.program-page .schedule-grid{
  align-items:stretch;
}

.program-page .schedule-item{
  display:flex;
  flex-direction:column;
  height:100%;
}

.program-page .schedule-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

.program-page .schedule-title{
  min-height:72px;
}

.program-page .schedule-host{
  min-height:22px;
}

.program-page .schedule-desc{
  min-height:72px;
}

.program-page .schedule-live,
.program-page .schedule-cta{
  margin-top:auto;
}

@media (max-width:760px){
  .program-page .now-track{
    padding-right:58px;
  }

  .program-page .now-track .favorite-btn{
    top:12px;
    right:12px;
  }
}

/* Responsive */
@media (max-width:1100px){
  .program-live-hero .hero-player{
    grid-template-columns:1fr;
  }

  .program-live-hero .hero-art{
    min-height:460px;
  }

  .program-track-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:760px){
  .program-page::before{
    filter:blur(20px) saturate(1.05);
    opacity:.16;
  }

  .program-live-hero.hero{
    width:min(var(--container), calc(100% - 20px));
    padding-top:22px;
  }

  .program-live-hero .hero-player{
    display:flex;
    flex-direction:column;
    border-radius:26px;
  }

  .program-live-hero .hero-art{
    order:1;
    min-height:320px;
    padding:16px;
  }

  .program-live-hero .hero-content{
    order:2;
    padding:18px 16px 20px;
  }

  .program-live-hero #program-title{
    font-size:2.2rem;
  }

  .program-live-hero .now-track{
    grid-template-columns:1fr;
    padding:14px;
  }

  .program-live-hero .now-track h2{
    font-size:1.15rem;
  }

  .program-live-hero .playback-visual{
    width:108px;
    height:38px;
    justify-content:flex-start;
    gap:7px;
  }

  .program-live-hero .playback-visual span{
    width:9px;
    height:34px;
    background:
      repeating-linear-gradient(
        to top,
        rgba(255,255,255,.95) 0 4px,
        transparent 4px 8px
      );
  }

  .program-controls-row{
    align-items:flex-start;
  }

  .program-track-grid{
    grid-template-columns:1fr;
  }

  .program-page .schedule-title{
    min-height:auto;
  }

  .program-page .schedule-desc{
    min-height:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  body.playing .program-live-hero .playback-visual span{
    animation:none !important;
    transform:scaleY(.62);
  }
}