/* 2026-08-16 batch, Fabian-ønske — ported in full from the handover
   mockup (SBN-Radio-handover-Peter/webradio-sendeplan.html), CSS pulled
   out into this external file rather than left inline, matching this
   project's own established porting convention. Scrim/base layout/vars
   already live in webradio-base.css and are reused as-is; this file only
   has what's specific to this page. */

/* Punkt 18 note (from the mockup's own comment): unlike the homepage/
   station pages, this schedule page is NOT forced into a single
   no-scroll viewport — a full week's worth of programming across 4
   stations genuinely doesn't fit legibly in one screen height. Normal
   page scroll is the honest choice here. */

.hero{position:relative; z-index:5; text-align:center; padding:20px 20px 10px;}
.hero .eyebrow{font-size:12px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; margin-bottom:10px;}
.hero h1{
  font-size:clamp(30px, 5.5vw, 58px); font-weight:900; letter-spacing:-.01em; line-height:1;
  text-transform:uppercase; margin-bottom:10px; color:#fff;
  text-shadow:0 0 50px rgba(230,184,102,.25);
}
.hero .tz-note{font-size:12px; color:var(--ink-dim); max-width:520px; margin:0 auto;}
.hero .tz-note b{color:var(--gold);}

.week-nav{
  position:relative; z-index:5; width:min(620px, calc(100% - 40px)); margin:20px auto 0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
}
.week-nav-btn,.week-current{
  appearance:none; border:1px solid rgba(230,184,102,.3); border-radius:999px;
  background:rgba(4,8,13,.72); color:var(--ink); cursor:pointer;
  font:700 10px/1 'Rajdhani',sans-serif; letter-spacing:.09em; text-transform:uppercase;
  padding:10px 15px; transition:.18s ease;
}
.week-nav-btn:first-child{justify-self:end;}
.week-nav-btn:last-child{justify-self:start;}
.week-nav-btn:hover,.week-current:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-1px);}
.week-heading{display:flex; flex-direction:column; align-items:center; gap:7px; min-width:190px;}
#week-label{font-size:13px; font-weight:800; letter-spacing:.08em; color:#fff; text-transform:uppercase; text-align:center;}
.week-current{padding:6px 12px; color:var(--gold); background:rgba(230,184,102,.06);}
.week-current.is-current{opacity:.45; pointer-events:none;}

.day-tabs{
  position:relative; z-index:5; display:flex; justify-content:center; gap:8px;
  flex-wrap:wrap; margin:18px auto 0; padding:0 20px;
}
.day-tab{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:8px 16px; border-radius:999px; border:1px solid rgba(230,184,102,.25);
  background:rgba(255,255,255,.02); color:var(--ink-dim); cursor:pointer; transition:.18s;
}
.day-tab:hover{color:var(--ink); border-color:rgba(230,184,102,.5);}
.day-tab.active{color:#1a1204; background:var(--gold); border-color:var(--gold);}
.day-tab .today-dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:#7dffb0; margin-left:5px; vertical-align:middle;}
.day-tab.active .today-dot{background:#1a1204;}

.sched-wrap{
  position:relative; z-index:5; max-width:1240px; margin:26px auto 40px; padding:0 24px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:1000px){ .sched-wrap{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:620px){ .sched-wrap{grid-template-columns:1fr;} }

.station-col{
  border:1px solid rgba(230,184,102,.25); border-radius:12px;
  background:rgba(255,255,255,.02); overflow:hidden;
}
.station-col .col-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(230,184,102,.2);
}
.station-col .col-head img{width:38px; height:38px; border-radius:50%; object-fit:contain; background:#0a0a0a;}
.station-col .col-head .name{font-size:13px; font-weight:800; letter-spacing:.03em;}
.station-col .col-head .live-pill{
  display:flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; margin-top:2px;
}
.station-col .col-head .live-pill i{width:6px; height:6px; border-radius:50%;}
.station-col .col-head .live-pill.on{color:#7dffb0;}
.station-col .col-head .live-pill.on i{background:#7dffb0; box-shadow:0 0 6px #7dffb0;}
.station-col .col-head .live-pill.off{color:var(--ink-dim);}
.station-col .col-head .live-pill.off i{background:var(--ink-dim);}

.slot-list{padding:8px 0;}
.slot{
  display:flex; gap:12px; padding:10px 16px; border-bottom:1px dashed rgba(230,184,102,.12);
  position:relative;
}
.slot:last-child{border-bottom:none;}
.slot.now-live{background:rgba(230,184,102,.08);}
.slot .time{flex:none; width:76px; font-size:11px; color:var(--ink-dim); line-height:1.3; padding-top:1px;}
.slot.now-live .time{color:var(--gold); font-weight:700;}
.slot .info{min-width:0;}
.slot .show{font-size:13px; font-weight:700; line-height:1.3;}
.slot .host{font-size:11px; color:var(--ink-dim); margin-top:1px;}
.slot .tag{font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-top:3px;}
.slot .now-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:700; letter-spacing:.06em;
  color:#ff5a5a; text-transform:uppercase; margin-top:3px;
}
.slot .now-badge i{width:5px; height:5px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 6px #ff5a5a; animation:pulse-dot 1.4s infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.3;}}

.slot .empty-note{font-size:11px; color:var(--ink-dim); padding:20px 16px; text-align:center;}

/* 2026-08-31 batch, brugerrapporteret (Fabian, via the user): News
   blocks (webradio.views._splice_news_into_day_blocks()) get their own
   distinct tag/tint rather than reading like generic "24/7 Hits"
   filler — a light blue reads as "informational," distinct from gold
   (filler/brand) and the existing on-air red. .news-at-marker is the
   smaller sibling shown ON TOP of a real claimed live show when a news
   anchor falls inside it (see that same function's docstring for why
   the show itself is never replaced) — same visual language as
   .now-badge above, just its own color so the two are never confused
   for each other at a glance. */
.slot.news-slot{background:rgba(79,209,232,.06);}
.slot .tag.news-tag{color:#4fd1e8;}
.slot .news-at-marker{
  display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:700; letter-spacing:.06em;
  color:#4fd1e8; text-transform:uppercase; margin-top:3px;
}
@media (max-width:620px){
  .week-nav{grid-template-columns:1fr 1fr;}
  .week-heading{grid-column:1 / -1; grid-row:1;}
  .week-nav-btn:first-child{justify-self:stretch; grid-column:1; grid-row:2;}
  .week-nav-btn:last-child{justify-self:stretch; grid-column:2; grid-row:2;}
}

/* Live and Program Studio broadcasts use the same public programme styling.
   Their production method is intentionally kept inside the staff schedule. */
.slot.program-slot{background:rgba(47,217,242,.045);}

@media (prefers-reduced-motion: reduce){
  .slot .now-badge i{animation:none;}
}

/* 2026 premium programme guide — same visual universe as the station pages. */
#page-header{position:absolute;z-index:8;inset:0 0 auto 0}
.schedule-hero{
  position:relative;z-index:5;overflow:hidden;
  display:block;text-align:center;
  width:min(1040px,calc(100% - 40px));margin:10px auto 0;padding:42px 28px 28px;
}
.schedule-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 50% 52%,rgba(83,177,220,.11),transparent 39%);
}
.schedule-orbit{position:absolute;z-index:-1;left:50%;top:53%;width:660px;height:260px;transform:translate(-50%,-50%);pointer-events:none;opacity:.34}
.schedule-orbit i{position:absolute;inset:0;border:1px solid rgba(79,209,232,.2);border-radius:50%;transform:rotate(-7deg)}
.schedule-orbit i:nth-child(2){inset:28px 74px;border-color:rgba(230,184,102,.2);transform:rotate(7deg)}
.schedule-orbit i:nth-child(3){inset:58px 148px;border-color:rgba(255,77,177,.16);transform:rotate(-13deg)}
.schedule-hero-title{min-width:0;text-align:center}
.schedule-hero .eyebrow{font:700 10px/1 'Rajdhani',sans-serif;letter-spacing:.42em;color:#70ddf3;text-transform:uppercase;margin-bottom:10px}
.schedule-hero h1{margin:0;color:#fff;font:800 clamp(40px,4.6vw,66px)/.94 'Rajdhani',sans-serif;letter-spacing:-.025em;text-transform:none;text-shadow:0 0 44px rgba(79,209,232,.13)}
.schedule-hero h1 em{display:inline-block;color:var(--gold);font:italic 500 1.12em/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:-.015em}
.schedule-hero-detail{padding:0;text-align:center}
.schedule-hero-detail>p{max-width:630px;margin:17px auto 0;color:var(--ink-dim);font-size:14px;line-height:1.55}
.timezone-pill{display:inline-flex;align-items:center;gap:10px;margin-top:17px;padding:8px 13px;border:1px solid rgba(79,209,232,.24);border-radius:999px;background:rgba(3,12,20,.66);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.timezone-pill span{color:var(--ink-dim);font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:.18em}
.timezone-pill b{color:#73e7fa;font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:.1em}

.schedule-console{position:relative;z-index:5;width:min(1500px,calc(100% - 34px));margin:0 auto 46px;padding:0 0 18px}
.schedule-console-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto 14px;padding:0 5px 12px;border-bottom:1px solid rgba(79,209,232,.18)}
.schedule-console-head div{display:flex;align-items:baseline;gap:13px}
.schedule-console-head span{color:#6ce3f7;font:700 9px/1 'Rajdhani',sans-serif;letter-spacing:.22em}
.schedule-console-head strong{color:#fff;font-size:14px;letter-spacing:.02em}
.schedule-console-head small{color:var(--ink-dim);font-size:10px}
.week-nav{width:min(760px,100%);margin:0 auto;padding:13px 16px;border:1px solid rgba(230,184,102,.24);border-radius:13px;background:linear-gradient(135deg,rgba(10,20,31,.89),rgba(3,8,15,.86));box-shadow:0 15px 40px rgba(0,0,0,.2)}
.week-nav-btn,.week-current{border-radius:7px;background:rgba(255,255,255,.018)}
.week-heading{min-width:230px}
#week-label{font-size:14px;letter-spacing:.055em}
.day-tabs{margin:13px auto 0;padding:0;gap:7px}
.day-tab{min-width:104px;padding:9px 14px;border-radius:7px;border-color:rgba(79,209,232,.17);background:rgba(4,12,20,.68);font-size:10px}
.day-tab:hover{border-color:rgba(79,209,232,.55);background:rgba(79,209,232,.055)}
.day-tab.active{color:#071018;border-color:#73e7fa;background:linear-gradient(135deg,#73e7fa,#e8c872);box-shadow:0 0 24px rgba(79,209,232,.16)}

.sched-wrap{max-width:1440px;margin:17px auto 0;padding:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:start}
.station-col{--station-rgb:230,184,102;position:relative;border:1px solid rgba(var(--station-rgb),.28);border-radius:15px;background:linear-gradient(155deg,rgba(9,20,31,.96),rgba(3,9,16,.96));box-shadow:0 22px 48px rgba(0,0,0,.22);overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.station-col::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(var(--station-rgb),.95),transparent)}
.station-col:hover{transform:translateY(-3px);border-color:rgba(var(--station-rgb),.52);box-shadow:0 28px 60px rgba(0,0,0,.3),0 0 28px rgba(var(--station-rgb),.08)}
.station-col.station-stellar{--station-rgb:197,140,255}.station-col.station-quantum{--station-rgb:74,204,247}.station-col.station-pulse{--station-rgb:255,77,177}.station-col.station-redneck{--station-rgb:220,154,76}
.station-col .col-head{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 22px;align-items:center;gap:12px;min-height:94px;padding:14px 15px;border-bottom:1px solid rgba(var(--station-rgb),.18);text-decoration:none;color:var(--ink);background:radial-gradient(circle at 13% 20%,rgba(var(--station-rgb),.17),transparent 48%)}
.station-col .col-head img{width:62px;height:62px;border:0;background:transparent;filter:drop-shadow(0 7px 14px rgba(0,0,0,.45))}
.signal-label{display:block;margin-bottom:4px;color:rgba(var(--station-rgb),.95);font:700 7px/1 'Rajdhani',sans-serif;letter-spacing:.18em}
.station-col .col-head .name{font-size:16px;line-height:1.05}
.station-col .col-head .live-pill{margin-top:6px;font-size:8px;letter-spacing:.08em}
.station-arrow{color:rgba(var(--station-rgb),.9);font-size:17px;transition:transform .2s ease}
.col-head:hover .station-arrow{transform:translate(2px,-2px)}
.slot-list{position:relative;z-index:1;padding:6px 9px 9px}
.slot{gap:10px;margin-top:4px;padding:10px 9px;border:1px solid transparent;border-bottom-color:rgba(var(--station-rgb),.11);border-radius:8px;transition:background .18s ease,border-color .18s ease}
.slot:hover{border-color:rgba(var(--station-rgb),.18);background:rgba(var(--station-rgb),.035)}
.slot:last-child{border-bottom:1px solid transparent}
.slot .time{width:73px;color:rgba(205,219,227,.6);font:600 10px/1.3 'Rajdhani',sans-serif;letter-spacing:.025em}
.slot .show{font-size:13px;line-height:1.2;color:#f1f7fa}
.slot .host{margin-top:3px;font-size:10px}
.slot .tag{margin-top:5px;color:rgba(var(--station-rgb),.78);font:700 8px/1 'Rajdhani',sans-serif;letter-spacing:.1em}
.slot.program-slot{background:rgba(var(--station-rgb),.055);border-color:rgba(var(--station-rgb),.12)}
.slot.now-live{background:linear-gradient(90deg,rgba(255,83,103,.11),rgba(var(--station-rgb),.055));border-color:rgba(255,83,103,.32);box-shadow:inset 3px 0 0 #ff5367}
.slot.news-slot{background:rgba(79,209,232,.07);border-color:rgba(79,209,232,.15)}

@media(max-width:1100px){.sched-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-console{width:min(940px,calc(100% - 28px))}}
@media(max-width:900px){.schedule-hero{width:min(940px,calc(100% - 28px))}}
@media(max-width:680px){
  #page-header{position:relative}
  .schedule-hero{width:calc(100% - 24px);padding:14px 2px 18px;gap:11px}.schedule-orbit{width:480px;height:190px}.schedule-hero h1{font-size:42px}.schedule-hero-detail>p{font-size:13px}
  .schedule-console{width:calc(100% - 20px)}.schedule-console-head{align-items:flex-start;flex-direction:column;gap:5px}.schedule-console-head div{align-items:flex-start;flex-direction:column;gap:5px}.schedule-console-head small{line-height:1.35}
  .week-nav{grid-template-columns:1fr 1fr;padding:12px}.week-heading{min-width:0;grid-column:1/-1;grid-row:1}.week-nav-btn:first-child{grid-column:1;grid-row:2}.week-nav-btn:last-child{grid-column:2;grid-row:2}.week-nav-btn{width:100%;padding:10px 8px}
  .day-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 1px 5px;scrollbar-width:none}.day-tabs::-webkit-scrollbar{display:none}.day-tab{flex:none;min-width:96px}
  .sched-wrap{grid-template-columns:1fr;gap:11px}.station-col .col-head{grid-template-columns:60px minmax(0,1fr) 22px}.station-col .col-head img{width:58px;height:58px}
}