/* 320 FM – Priority 1 / homepage polish, preview only.
   Carefully scoped to the home route, including client-side route changes.
   No new theme, no player rewiring, no changes to CMS data. */

#app:has(.schedule-upcoming) .hero{
  min-height:542px;
  padding:28px 0 10px;
}
#app:has(.schedule-upcoming) .hero .copy{
  padding-top:26px;
  padding-bottom:26px;
}
#app:has(.schedule-upcoming) .hero .eyebrow{
  margin-bottom:18px;
  letter-spacing:.17em;
  font-weight:750;
}
#app:has(.schedule-upcoming) .hero .subtitle{
  margin-top:22px;
  font-size:clamp(19px,1.75vw,25px);
  letter-spacing:-.035em;
  font-weight:635;
  color:#f1f2f3;
}
#app:has(.schedule-upcoming) .hero .subline{
  margin-top:7px;
  color:#9cadb9;
}
#app:has(.schedule-upcoming) .hero .set-tools{
  margin-top:18px;
  gap:12px;
}
#app:has(.schedule-upcoming) .hero .primaryrow{
  margin-top:24px;
}
#app:has(.schedule-upcoming) .hero .playcircle{
  box-shadow:0 12px 35px rgba(var(--accent-rgb),.2);
}
#app:has(.schedule-upcoming) .hero .playcopy strong{
  font-size:12px;
  letter-spacing:.135em;
}
#app:has(.schedule-upcoming) .hero .playcopy small{
  color:#a7b6c0;
}
#app:has(.schedule-upcoming) .hero .set-progress-track{
  height:3px;
  border-radius:4px;
}
#app:has(.schedule-upcoming) .hero .set-progress-fill{
  border-radius:4px;
}
#app:has(.schedule-upcoming) .hero .set-progress-clocks{
  color:#a1b1bd;
}
#app:has(.schedule-upcoming) .hero .set-progress-durations{
  color:#a9b8c4;
}

#app:has(.schedule-upcoming) .hero-art{
  height:495px;
}
#app:has(.schedule-upcoming) .hero-art .set-visual{
  width:clamp(210px,23.4vw,310px);
}
#app:has(.schedule-upcoming) .hero .hero-art--cover-focus .cover-ambience{
  opacity:.4;
  filter:blur(20px) saturate(1.14);
}
#app:has(.schedule-upcoming) .hero .hero-art--cover-focus .cover-surface{
  border-color:rgba(234,241,244,.23);
  box-shadow:0 24px 44px -18px rgba(0,0,0,.76),0 6px 24px rgba(var(--accent-rgb),.14);
}
#app:has(.schedule-upcoming) .hero .hero-art--cover-focus .cover-note{
  color:#e2e9ed;
}

/* Keep the existing three-column upcoming programme, refine it in place. */
#app:has(.schedule-upcoming) .schedule-upcoming .timeline-head{
  margin-top:38px;
  margin-bottom:20px;
}
#app:has(.schedule-upcoming) .schedule-upcoming .timeline-head h2{
  font-weight:690;
  letter-spacing:-.055em;
}
#app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item{
  padding:20px 23px 18px;
  min-height:143px;
  transition:background .24s ease;
}
#app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item:first-child{
  padding-left:3px;
}
#app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item:hover{
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.07),rgba(255,255,255,.012) 65%,transparent);
}
#app:has(.schedule-upcoming) .schedule-upcoming .slot-details{
  gap:14px;
  margin-top:11px;
}
#app:has(.schedule-upcoming) .schedule-upcoming .cover-surface.small{
  width:50px;
  height:50px;
  border-color:rgba(241,245,249,.21);
  transition:border-color .24s ease,box-shadow .24s ease;
}
#app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item:hover .cover-surface.small{
  border-color:rgba(var(--accent-rgb),.58);
  box-shadow:0 6px 17px rgba(0,0,0,.3);
}
#app:has(.schedule-upcoming) .schedule-upcoming .slot-name{
  font-size:clamp(17px,1.65vw,22px);
  letter-spacing:-.035em;
  font-weight:700;
  color:#f3f5f7;
}
#app:has(.schedule-upcoming) .schedule-upcoming .slot-show{
  margin-top:5px;
  font-size:11px;
  color:#a2b2bd;
}
#app:has(.schedule-upcoming) .schedule-upcoming .slot-top{
  color:#9db0ba;
}
#app:has(.schedule-upcoming) .schedule-upcoming .slot-footer{
  margin-top:9px;
}
#app:has(.schedule-upcoming) .presentation{
  margin-top:68px;
  padding-bottom:100px;
}
#app:has(.schedule-upcoming) .presentation p{
  font-size:14px;
  line-height:1.78;
  color:#98a9b5;
}

@media(max-width:1000px){
  #app:has(.schedule-upcoming) .hero{
    min-height:495px;
  }
  #app:has(.schedule-upcoming) .hero-art{
    height:450px;
  }
  #app:has(.schedule-upcoming) .hero-art .set-visual{
    width:clamp(205px,25vw,285px);
  }
}

@media(max-width:800px){
  #app:has(.schedule-upcoming) .hero{
    min-height:0;
    padding:22px 0 8px;
  }
  #app:has(.schedule-upcoming) .hero .copy{
    padding:25px 0 12px 18px;
  }
  #app:has(.schedule-upcoming) .hero .subtitle{
    margin-top:20px;
  }
  #app:has(.schedule-upcoming) .hero .set-tools{
    margin-top:16px;
  }
  #app:has(.schedule-upcoming) .hero .primaryrow{
    margin-top:21px;
  }
  #app:has(.schedule-upcoming) .hero-art{
    height:310px;
  }
  #app:has(.schedule-upcoming) .hero-art .set-visual{
    width:245px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item{
    padding:18px 12px;
    min-height:138px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .slot-details{
    gap:10px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .cover-surface.small{
    width:43px;
    height:43px;
  }
  #app:has(.schedule-upcoming) .presentation{
    padding-bottom:94px;
  }
}

@media(max-width:560px){
  #app:has(.schedule-upcoming) .hero{
    padding:9px 0 3px;
  }
  #app:has(.schedule-upcoming) .hero .copy{
    padding:26px 0 9px 16px;
  }
  #app:has(.schedule-upcoming) .hero .copy:before{
    top:17px;
    height:calc(100% - 25px);
  }
  #app:has(.schedule-upcoming) .hero .eyebrow{
    margin-bottom:15px;
    font-size:9px;
  }
  #app:has(.schedule-upcoming) .hero .artist{
    font-size:clamp(49px,11.4vw,66px);
  }
  #app:has(.schedule-upcoming) .hero .subtitle{
    margin-top:15px;
    font-size:18px;
    line-height:1.34;
  }
  #app:has(.schedule-upcoming) .hero .subline{
    margin-top:5px;
    font-size:10px;
  }
  #app:has(.schedule-upcoming) .hero .set-tools{
    margin-top:13px;
    gap:8px;
  }
  #app:has(.schedule-upcoming) .hero .external-players-inline{
    margin-top:7px;
  }
  #app:has(.schedule-upcoming) .hero .hero-set-timing .external-players-inline ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0 7px;
  }
  #app:has(.schedule-upcoming) .hero .external-players-inline a{
    min-height:37px;
    font-size:10px;
    gap:4px;
  }
  #app:has(.schedule-upcoming) .hero .external-players-inline img{
    width:14px;
    height:14px;
  }
  #app:has(.schedule-upcoming) .hero .hero-secondary-actions{
    gap:8px;
  }
  #app:has(.schedule-upcoming) .hero .set-tools .popup-launch{
    min-height:34px;
  }
  #app:has(.schedule-upcoming) .hero .primaryrow{
    margin-top:13px;
    gap:13px;
  }
  #app:has(.schedule-upcoming) .hero .playcircle{
    width:52px;
    height:52px;
  }
  #app:has(.schedule-upcoming) .hero .playbutton{
    gap:19px;
  }
  #app:has(.schedule-upcoming) .hero-art{
    height:240px;
    margin-top:0;
  }
  #app:has(.schedule-upcoming) .hero-art .set-visual{
    width:190px;
    top:49%;
  }
  #app:has(.schedule-upcoming) .hero .hero-art--cover-focus .cover-ambience{
    filter:blur(14px) saturate(1.12);
    opacity:.34;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .timeline-head{
    margin-top:25px;
    margin-bottom:18px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .timeline-head h2{
    font-size:clamp(24px,7vw,28px);
    line-height:1.08;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item,
  #app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item:first-child{
    padding:12px 4px!important;
    min-height:0;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .slot-details{
    gap:11px;
    margin-top:9px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .cover-surface.small{
    width:46px;
    height:46px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .slot-name{
    font-size:18px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .slot-show{
    font-size:10px;
  }
  #app:has(.schedule-upcoming) .schedule-upcoming .slot-footer{
    margin-top:7px;
  }
  #app:has(.schedule-upcoming) .presentation{
    margin-top:54px;
    padding-top:18px;
    padding-bottom:72px;
    gap:20px;
  }
  #app:has(.schedule-upcoming) .presentation .statement{
    font-size:clamp(29px,8vw,34px);
  }
  #app:has(.schedule-upcoming) .presentation p{
    font-size:13px;
  }

  /* The compact closed dock keeps every legal link accessible.
     The expanded live player preserves all original controls. */
  #app:has(.schedule-upcoming) .shell-bottom .footer{
    display:flex;
    flex-wrap:wrap;
    gap:4px 12px;
    align-items:center;
    justify-content:flex-start;
    padding:11px 0 10px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .footer-legal{
    justify-content:flex-start;
    gap:5px 13px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .footer-tagline{
    display:none;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-launcher{
    --dock-launcher-gap:8px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-launch-button{
    min-height:42px;
    padding:9px 16px;
    font-size:11px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-player .player-inner{
    grid-template-rows:36px 19px;
    gap:0 10px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-player .player-left>.cover-surface.small{
    width:36px;
    height:36px;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-player .dock-track{
    color:#d3dce3;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-player .player-text strong{
    font-weight:700;
  }
  #app:has(.schedule-upcoming) .shell-bottom .dock-player .dock-timeline-live{
    height:3px;
  }
}
@media(max-width:360px){
  #app:has(.schedule-upcoming) .hero .hero-set-timing .external-players-inline ul{
    gap:0 12px;
  }
  #app:has(.schedule-upcoming) .hero-art .set-visual{
    width:180px;
  }
}
@media(prefers-reduced-motion:reduce){
  #app:has(.schedule-upcoming) .schedule-upcoming .upcoming-item,
  #app:has(.schedule-upcoming) .schedule-upcoming .cover-surface.small{
    transition:none!important;
  }
}

/* At 320px the animated SVG can spill a fractional pixel; clip horizontal
   overflow without creating a scrolling container or hiding controls. */
@media(max-width:360px){
  body:has(#app .schedule-upcoming){overflow-x:clip}
}


/* MOBILE FOOTER-PLAYER POLISH 2026-11-15
   Preview-only, all In Motion routes. Keep the persistent player, all
   playback controls, cover, progress, settings and legal links accessible. */
@media (max-width:700px){
  #app > .prototyp .shell-bottom .footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:2px 12px;
    padding:8px 0 7px;
    line-height:1.35;
    letter-spacing:.025em;
  }
  #app > .prototyp .shell-bottom .footer strong{
    display:block;
    font-size:8px;
    line-height:12px;
    letter-spacing:.055em;
    white-space:nowrap;
  }
  #app > .prototyp .shell-bottom .footer-legal{
    display:flex;
    grid-column:auto;
    grid-row:auto;
    flex:1 0 100%;
    justify-content:flex-start;
    gap:3px 11px;
    font-size:8.5px;
    line-height:1.45;
  }
  #app > .prototyp .shell-bottom .footer-legal a,
  #app > .prototyp .shell-bottom .footer-legal button{
    font-size:inherit;
    line-height:inherit;
  }
  #app > .prototyp .shell-bottom .footer-tagline{
    display:none;
  }
  #app > .prototyp .shell-bottom .dock-player .player-inner{
    height:58px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:35px 15px;
    align-content:center;
    align-items:center;
    gap:0 9px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-left{
    min-width:0;
    grid-column:1;
    grid-row:1;
    align-items:center;
    gap:8px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-left>.cover-surface.small{
    width:34px;
    height:34px;
    flex:none;
  }
  #app > .prototyp .shell-bottom .dock-player .player-text{
    min-width:0;
    line-height:1.18;
  }
  #app > .prototyp .shell-bottom .dock-player .player-text strong{
    font-size:10.5px;
    line-height:13px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-track{
    font-size:10px;
    line-height:12px;
    color:#cdd7df;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-timeline{
    grid-column:1;
    grid-row:2;
    min-width:0;
    align-self:center;
    gap:6px;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-timeline-time{
    font-size:8.5px;
    line-height:1.1;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-timeline-live{
    height:3px;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-timeline-seek{
    height:20px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-actions{
    grid-column:2;
    grid-row:1 / 3;
    align-items:center;
    gap:4px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-actions .player-link{
    min-width:65px;
    height:40px;
    padding:8px 9px;
    gap:5px;
    font-size:10px;
    letter-spacing:.015em;
  }
  #app > .prototyp .shell-bottom .dock-player .player-actions .player-link svg{
    width:13px;
    height:13px;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-icon,
  #app > .prototyp .shell-bottom .dock-player .dock-settings>summary,
  #app > .prototyp .shell-bottom .dock-player .dock-collapse{
    width:34px;
    height:40px;
    padding:8px;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-settings-panel{
    max-height:calc(100dvh - var(--bottom-dock-height,125px) - 20px);
  }
  #app > .prototyp .shell-bottom .dock-launcher{
    --dock-launcher-gap:7px;
  }
  #app > .prototyp .shell-bottom .dock-launch-button{
    min-height:40px;
    padding:8px 14px;
    gap:9px;
    font-size:11px;
  }
}
@media(max-width:350px){
  #app > .prototyp .shell-bottom .footer-legal{
    gap:3px 9px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-inner{
    column-gap:7px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-left{
    gap:6px;
  }
  #app > .prototyp .shell-bottom .dock-player .player-actions{
    gap:3px;
  }
  #app > .prototyp .shell-bottom .dock-player .dock-icon,
  #app > .prototyp .shell-bottom .dock-player .dock-settings>summary,
  #app > .prototyp .shell-bottom .dock-player .dock-collapse{
    width:32px;
    padding:7px;
  }
}