/* ============================================================
   Uncommon Christian Network — stylesheet module: media-hub

   The home page's media console: the now-playing bar, the Schedule +
   On Demand & Media columns, and the benefits strip beneath them.

   The palette is the hero's own violet — #a775be, the colour of "prayer
   carries on" in the tagline — rather than the magenta the design build
   shipped with, so the console reads as part of the same page as the art
   above it. The gradients, glows and edge lighting are all mixed from that
   one hue.

   Every rule is scoped under #listen so the console's palette can't leak
   into the rest of the site. Load order (header.php): base, layout, home,
   live, media-hub, support, pages — after live.css, whose older .lx-*
   console this replaces.
   ============================================================ */

#listen{
  /* Violet ramp, all from the hero's #a775be */
  --mh-violet:#a775be;           /* the hero tagline's violet — the anchor */
  --mh-violet-hi:#c9a7db;        /* highlights: icons, active labels */
  --mh-violet-lo:#7a568c;        /* mid shade for gradient bodies */
  --mh-violet-deep:#4a3358;      /* gradient ends */
  --mh-violet-ink:#b98fd0;       /* small accent text */
  --mh-edge:rgba(167,117,190,.34);       /* panel borders */
  --mh-edge-hi:rgba(167,117,190,.62);    /* active/hover borders */
  --mh-edge-soft:rgba(167,117,190,.14);  /* dividers inside a panel */
  --mh-glow:rgba(167,117,190,.28);
  --mh-fill:linear-gradient(135deg,var(--mh-violet),var(--mh-violet-deep));
  --mh-ink:#f2eff3;
  --mh-ink-2:#aaa4ae;
  --mh-ink-3:#8b8592;
  /* Both console columns are this tall, always — the schedule and the library
     scroll inside them, so neither widget grows or shrinks with its content. */
  --mh-col-h:720px;

  /* The console always sits BELOW the hero and never over it: its own stacking
     context, above the hero's z-index:0, with no negative margin anywhere in
     this file. The hero ends on its own artwork, so the gap is deliberately
     tight — a constant, never a clamp, so it can't drift on resize. */
  position:relative;z-index:1;isolation:isolate;
  margin-top:0;
  padding:14px 0 48px;
  background:radial-gradient(circle at 22% 20%,rgba(122,86,140,.16) 0,transparent 32%),#050509;
}
/* The console runs the full width of the page, like the hero above it, rather
   than sitting in a narrower centred column — the two read as one unit. */
#listen .mh-hub{width:100%;margin:0;padding:0 clamp(14px,2.2vw,40px)}
#listen .panel{
  border:1px solid var(--mh-edge);border-radius:18px;
  background:linear-gradient(130deg,rgba(26,17,31,.78),rgba(5,5,10,.97) 46%,rgba(18,11,22,.78));
  box-shadow:inset 0 0 42px rgba(122,86,140,.10),0 0 18px rgba(122,86,140,.05);
}
#listen button,#listen a{font:inherit}
#listen button{cursor:pointer}
#listen h2,#listen h3{font-family:var(--font)}   /* the console sets its own weights, not Sora's */
#listen :where(button,a,select):focus-visible{outline:3px solid var(--mh-violet-hi);outline-offset:3px}
/* Interface icons ship as single-colour SVGs; paint them here. */
#listen .hero-play img,#listen .iconbox img,#listen .card-play img,#listen .dock button img{
  filter:brightness(0) invert(1)}
#listen .iconbox img,#listen .dock button img{opacity:.86}

/* ---------- Now playing ---------- */
#listen .hero-player{
  display:grid;grid-template-columns:132px 86px minmax(230px,310px) 1fr 240px;grid-template-rows:1fr 28px;
  align-items:center;gap:20px;min-height:174px;padding:18px 24px}
#listen .cover{grid-row:1/3;width:132px;height:132px;border-radius:12px;object-fit:cover;
  border:1px solid var(--mh-edge)}
#listen .hero-play{
  display:grid;place-items:center;width:80px;height:80px;border:3px solid var(--mh-violet);border-radius:50%;
  background:radial-gradient(circle,rgba(122,86,140,.55),rgba(12,8,14,.98));
  box-shadow:0 0 20px var(--mh-glow);transition:box-shadow .2s,transform .2s}
#listen .hero-play:hover{transform:scale(1.04);box-shadow:0 0 30px rgba(167,117,190,.45)}
#listen .hero-play img{width:33px}
#listen .track .overline,#listen .up-next .overline{
  color:var(--mh-violet-hi);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#listen .track h2{margin:13px 0 8px;font-size:31px;font-weight:700;line-height:1.1;color:var(--mh-ink)}
#listen .track p{margin:0;color:var(--mh-violet);font-size:20px}
#listen .wave{display:flex;align-items:center;justify-content:center;gap:3px;height:74px}
#listen .wave span{
  width:3px;height:30px;border-radius:4px;background:var(--mh-violet);
  box-shadow:0 0 7px rgba(167,117,190,.55);transform-origin:center}
#listen .wave span:nth-child(3n){height:44px}
#listen .wave span:nth-child(4n){height:22px}
#listen .wave span:nth-child(5n){height:58px}
#listen .wave.playing span{animation:mh-wave .7s ease-in-out infinite alternate}
#listen .wave.playing span:nth-child(2n){animation-delay:-.25s}
#listen .wave.playing span:nth-child(3n){animation-delay:-.45s}
@keyframes mh-wave{to{transform:scaleY(.35);opacity:.55}}
#listen .timeline{
  grid-column:4;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  color:var(--mh-ink-3);font-size:12px;font-variant-numeric:tabular-nums}
#listen .timeline i,#listen .volume{height:5px;border-radius:8px;background:rgba(167,117,190,.16)}
#listen .timeline i b{display:block;position:relative;width:0;height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--mh-violet-lo),var(--mh-violet-hi))}
#listen .timeline i b:after{
  content:"";position:absolute;right:-5px;top:-4px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 0 14px var(--mh-violet)}
#listen .up-next{grid-column:5;grid-row:1/3;align-self:stretch;padding:12px 0 0 30px;
  border-left:1px solid var(--mh-edge-soft)}
#listen .up-next p{margin:12px 0;font-size:15px;line-height:1.45;color:var(--mh-ink)}
#listen .up-next a{
  display:inline-block;padding:9px 16px;border:1px solid rgba(167,117,190,.45);border-radius:10px;
  color:var(--mh-violet-hi);font-size:12px;text-decoration:none;text-transform:uppercase;
  transition:border-color .18s,background .18s}
#listen .up-next a:hover{border-color:var(--mh-edge-hi);background:rgba(122,86,140,.24)}

/* ---------- The two console columns ----------
   Fixed height by design: the lists scroll, the widgets don't move. */
#listen .columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;align-items:start}
#listen .schedule,#listen .media{
  min-width:0;overflow:hidden;display:flex;flex-direction:column;height:var(--mh-col-h)}

#listen .section-head{flex:none;display:flex;align-items:center;gap:16px;padding:20px 26px}
#listen .iconbox{
  display:grid;place-items:center;width:58px;height:54px;border:1px solid rgba(167,117,190,.42);
  border-radius:13px;background:linear-gradient(145deg,rgba(122,86,140,.45),rgba(18,11,22,.9));
  box-shadow:inset 0 0 12px rgba(167,117,190,.14)}
#listen .iconbox img{width:27px}
#listen .section-head h2{margin:0;text-transform:uppercase;font-size:22px;font-weight:700;color:var(--mh-ink)}
#listen .section-head p{margin:7px 0 0;color:var(--mh-ink-2);font-size:14px}

/* Clock format + time zone */
#listen .toggles{display:flex;align-items:center;margin-left:auto}
#listen .toggles button,#listen .toggles select,#listen .chips button{
  border:1px solid var(--mh-edge-soft);background:rgba(15,10,18,.9);color:var(--mh-ink)}
#listen .toggles button{padding:9px 17px}
#listen .toggles button:first-child{border-radius:18px 0 0 18px}
#listen .toggles button:nth-child(2){border-radius:0 18px 18px 0;border-left:0}
#listen .toggles select{
  margin-left:10px;padding:9px 16px;border-radius:18px;font-size:14px;
  -webkit-appearance:none;appearance:none}
#listen .toggles .selected{
  border-color:var(--mh-edge-hi);background:var(--mh-fill);box-shadow:0 0 18px var(--mh-glow)}

/* Day strip — the arrows are static, the seven pills are rendered by JS. */
#listen .dates{flex:none;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:8px;
  padding:3px 20px 20px}
#listen .date-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
#listen .date-nav{border:0;background:none;color:var(--mh-violet);font-size:38px;line-height:1}
#listen .date-nav:hover{color:var(--mh-violet-hi)}
#listen .date-nav[disabled]{opacity:.28;cursor:default}
#listen .rp-day{
  height:62px;border:1px solid var(--mh-edge-soft);border-radius:12px;background:rgba(15,10,18,.9);
  color:var(--mh-ink);text-transform:uppercase;font-size:12px;padding:0 4px;overflow:hidden;
  transition:border-color .18s}
#listen .rp-day span{display:block;margin-top:7px;font-size:12px}
#listen .rp-day:hover{border-color:var(--mh-edge-hi)}
#listen .rp-day.active{border-color:var(--mh-edge-hi);background:var(--mh-fill);
  box-shadow:0 0 16px var(--mh-glow)}

/* Schedule list — scrolls inside the fixed column */
#listen #guideList{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(167,117,190,.4) transparent}
#listen #guideList::-webkit-scrollbar,#listen .cards::-webkit-scrollbar{width:8px}
#listen #guideList::-webkit-scrollbar-thumb,#listen .cards::-webkit-scrollbar-thumb{
  background:rgba(167,117,190,.32);border-radius:99px}
#listen .schedule-list{
  margin:0 22px 12px;padding:0;border:1px solid var(--mh-edge-soft);border-radius:13px;
  list-style:none;overflow:hidden}
#listen .schedule-list li{
  display:grid;grid-template-columns:80px 58px 1fr auto;align-items:center;gap:12px;
  min-height:82px;padding:0 16px;border-bottom:1px solid var(--mh-edge-soft)}
#listen .schedule-list li:last-child{border-bottom:0}
#listen .schedule-list li.on{
  border:1px solid var(--mh-edge-hi);border-radius:12px;
  background:linear-gradient(90deg,rgba(122,86,140,.34),rgba(15,9,18,.7))}
#listen .schedule-list time{
  border-right:1px solid var(--mh-edge-soft);font-style:normal;font-variant-numeric:tabular-nums;
  align-self:stretch;display:flex;flex-direction:column;justify-content:center}
#listen .schedule-list time b{font-size:20px;line-height:.86;color:var(--mh-ink)}
#listen .schedule-list small{display:block;margin-top:6px;color:var(--mh-ink-3)}
#listen .roundicon{
  display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(167,117,190,.5);
  border-radius:50%;background:radial-gradient(circle,rgba(122,86,140,.4),rgba(15,9,18,.95))}
#listen .roundicon img{width:27px;height:27px}
#listen .schedule-list div>b{font-size:16px;color:var(--mh-ink)}
#listen .schedule-list em{
  color:var(--mh-violet-ink);font-size:12px;font-style:normal;text-transform:uppercase;white-space:nowrap}
#listen .schedule-list em.on-air{
  display:inline-flex;align-items:center;gap:.45rem;padding:7px 13px;border-radius:99px;color:#fff;
  background:var(--mh-fill);box-shadow:0 0 18px var(--mh-glow)}
#listen .schedule-list em.on-air:before{
  content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
#listen .guide-empty{margin:0 22px 12px;padding:26px 18px;border:1px solid var(--mh-edge-soft);
  border-radius:13px;color:var(--mh-ink-2);font-size:14px;text-align:center}

/* ---------- On demand ---------- */
#listen .chips{flex:none;display:flex;flex-wrap:wrap;gap:10px;padding:8px 20px 22px}
#listen .chips.subchips{padding-top:0;padding-bottom:18px}
#listen .chips button{padding:9px 18px;border-radius:20px;text-transform:uppercase;font-size:11px;
  transition:border-color .18s}
#listen .chips button:hover{border-color:var(--mh-edge-hi)}
#listen .chips .active{border-color:var(--mh-edge-hi);background:var(--mh-fill);box-shadow:0 0 18px var(--mh-glow)}

/* The library is a list of shows: cover, name, and what the show is about.
   Episodes are folded away until a row is opened. */
#listen .cards{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:0 18px 4px;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(167,117,190,.4) transparent}
#listen .show{
  flex:none;border:1px solid var(--mh-edge-soft);border-radius:14px;background:rgba(15,10,18,.9);
  overflow:hidden;transition:border-color .18s,box-shadow .18s}
#listen .show:hover{border-color:rgba(167,117,190,.34)}
#listen .show.is-open{border-color:var(--mh-edge-hi);box-shadow:0 0 20px rgba(122,86,140,.16)}
#listen .show-head{
  display:grid;grid-template-columns:88px minmax(0,1fr) 28px;align-items:center;gap:16px;
  width:100%;padding:14px;border:0;background:none;text-align:left;color:inherit}
#listen .show-logo{
  width:88px;height:88px;border-radius:11px;object-fit:cover;
  border:1px solid rgba(167,117,190,.32);
  background:radial-gradient(circle at 50% 40%,rgba(122,86,140,.4),rgba(13,8,16,.98))}
#listen .show-meta{min-width:0;display:flex;flex-direction:column;gap:5px}
#listen .show-meta b{font-size:19px;font-weight:700;line-height:1.2;color:var(--mh-ink)}
#listen .show-meta small{font-size:14px;line-height:1.4;color:var(--mh-ink-2);overflow-wrap:anywhere}
#listen .show-meta em{
  font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mh-violet-ink)}
#listen .show-toggle{
  display:grid;place-items:center;color:var(--mh-violet);transition:transform .22s}
#listen .show-toggle svg{width:22px;height:22px}
#listen .show.is-open .show-toggle{transform:rotate(180deg)}

/* Episodes inside an open show */
#listen .show-list{
  list-style:none;margin:0;padding:0 14px 12px;display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--mh-edge-soft)}
/* Four columns: play, title, duration, share. The fourth is not optional — with
   three declared, the Share button wrapped onto a second row and landed in the
   42px play column, where a 999px pill renders as a clipped circle. A row with
   no duration simply leaves the third column empty. */
#listen .show-list .od-item{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:9px 10px;border:1px solid transparent;border-radius:10px;cursor:pointer;
  transition:background .18s,border-color .18s}
#listen .show-list .od-item:first-child{margin-top:12px}
/* Album heading inside a creator's card — the series a run of tracks belongs to. */
#listen .show-list .od-subhead{list-style:none;margin:14px 0 2px;padding:0 4px;
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mh-ink-3)}
#listen .show-list .od-subhead:first-child{margin-top:12px}
#listen .show-list .od-subhead + .od-item{margin-top:4px}
#listen .show-list .od-item:hover{background:rgba(122,86,140,.14);border-color:var(--mh-edge-soft)}
#listen .show-list .od-item.playing{background:rgba(122,86,140,.22);border-color:var(--mh-edge-hi)}
#listen .ep-play{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:0;
  background:var(--mh-fill);box-shadow:0 0 12px var(--mh-glow);transition:transform .18s}
#listen .ep-play:hover{transform:scale(1.07)}
#listen .ep-play img{width:17px;height:17px;margin-left:2px;filter:brightness(0) invert(1)}
#listen .ep-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
#listen .ep-meta b{font-size:15px;font-weight:600;line-height:1.3;color:var(--mh-ink);
  overflow-wrap:anywhere}
#listen .ep-meta small{font-size:13px;color:var(--mh-ink-3)}
#listen .ep-dur{font-size:13px;color:var(--mh-ink-3);font-variant-numeric:tabular-nums}
#listen .cards .od-empty{padding:34px 10px;text-align:center;color:var(--mh-ink-2);font-size:14px}

/* Connecting — a live stream buffers for a few seconds after the click, so the
   button pulses to show the press registered rather than looking dead. */
#listen .hero-play.is-connecting{animation:mh-connect 1s ease-in-out infinite}
@keyframes mh-connect{50%{box-shadow:0 0 34px rgba(167,117,190,.6);border-color:var(--mh-violet-hi)}}
@media (prefers-reduced-motion:reduce){#listen .hero-play.is-connecting{animation:none}}

/* Playing state — the play glyph swaps to a pause glyph. */
#listen .js-play.is-playing{box-shadow:0 0 26px rgba(167,117,190,.7)}
#listen .js-play.is-playing>img{content:url('/assets/media-hub/icons/pause.svg')}

/* ---------- Responsive ----------
   The columns keep a fixed height at every width — a shorter one on small
   screens, but still fixed, so the widgets never resize around their content. */
@media (max-width:1240px){
  #listen .hero-player{grid-template-columns:132px 86px minmax(200px,1fr) 1fr}
  #listen .up-next{display:none}
  #listen .timeline{grid-column:4}
}
@media (max-width:1100px){
  #listen{--mh-col-h:640px}
  #listen .hero-player{grid-template-columns:110px 74px 1fr}
  #listen .cover{width:110px;height:110px}
  #listen .hero-play{width:68px;height:68px}
  #listen .wave,#listen .timeline{grid-column:1/4}
  #listen .columns{grid-template-columns:1fr}
}
@media (max-width:700px){
  #listen{--mh-col-h:560px}
  #listen .mh-hub{padding:0 12px}
  #listen .hero-player{grid-template-columns:76px 1fr;grid-template-rows:auto auto auto;gap:14px}
  #listen .cover{grid-row:1;width:76px;height:76px}
  #listen .hero-play{width:52px;height:52px;border-width:2px}
  #listen .hero-play img{width:22px}
  #listen .track{grid-column:1/3}
  #listen .track h2{font-size:23px}
  #listen .wave{grid-column:1/3;height:42px}
  #listen .timeline{grid-column:1/3}
  #listen .dates{grid-template-columns:28px 1fr 28px;padding-inline:12px}
  #listen .date-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  #listen .rp-day:nth-child(n+4){display:none}
  #listen .toggles{display:none}
  #listen .schedule-list{margin-inline:10px}
  #listen .schedule-list li{grid-template-columns:60px 44px 1fr;padding:12px}
  #listen .schedule-list em{grid-column:1/-1;justify-self:start}
  #listen .roundicon{width:40px;height:40px}
  #listen .roundicon img{width:21px;height:21px}
  #listen .cards{padding-inline:12px}
  #listen .show-head{grid-template-columns:64px minmax(0,1fr) 24px;gap:12px;padding:12px}
  #listen .show-logo{width:64px;height:64px}
  #listen .show-meta b{font-size:16px}
  #listen .show-meta small{font-size:13px}
  #listen .chips{overflow-x:auto;flex-wrap:nowrap;padding-inline:18px}
  #listen .section-head{padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){
  #listen .wave.playing span{animation:none}
}

/* Share button on an on-demand row. Quiet until wanted — the row's job is to
   play; sharing is the second thing anyone does, not the first. */
.ep-share{background:none;border:1px solid rgba(255,255,255,.16);color:var(--ucn-bright,#af80c5);
  border-radius:999px;padding:6px 14px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap}
.ep-share:hover{border-color:var(--ucn-bright,#af80c5);background:rgba(175,128,197,.12)}
/* The station's own button sits under the artist line rather than beside a row,
   so it drops the row's left gutter and takes vertical space instead. */
#listen #mhShare{margin:14px 0 0}