/* Free-radio call to action: inline box, before-you-go panel, phone bar. Markup: inc/radio-cta.php */

/* ---------- Box ---------- */
.psx-radio-cta{margin:44px 0;border-radius:24px;overflow:hidden;color:#FAF3E8;
  background:radial-gradient(120% 140% at 100% 0%,#3D1F75 0%,#1E0E3C 48%,#14082A 100%);
  border:1px solid rgba(220,200,255,.14);box-shadow:0 18px 40px -24px rgba(20,8,42,.55)}
.psx-radio-cta__inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:center;padding:34px 34px 34px 38px}
.psx-single__content .psx-radio-cta__eyebrow,.psx-radio-cta__eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font:700 11px/1 var(--psx-font-sans,Inter,system-ui,sans-serif);letter-spacing:.22em;text-transform:uppercase;color:#C9B8F0}
.psx-radio-cta__live{width:8px;height:8px;border-radius:50%;background:#FF7A7A;box-shadow:0 0 0 0 rgba(255,122,122,.6);animation:psxRcPulse 2.2s infinite}
@keyframes psxRcPulse{0%{box-shadow:0 0 0 0 rgba(255,122,122,.55)}70%{box-shadow:0 0 0 9px rgba(255,122,122,0)}100%{box-shadow:0 0 0 0 rgba(255,122,122,0)}}
.psx-single__content .psx-radio-cta__headline,.psx-radio-cta__headline{margin:0 0 12px;max-width:19ch;
  font:500 clamp(1.55rem,2.7vw,2.05rem)/1.14 var(--psx-font-serif,'Source Serif 4',Georgia,serif);letter-spacing:-.015em;color:#FAF3E8}
.psx-single__content .psx-radio-cta__sub,.psx-radio-cta__sub{margin:0 0 22px;max-width:46ch;
  font:400 15px/1.6 var(--psx-font-sans,Inter,system-ui,sans-serif);color:rgba(250,243,232,.8)}
.psx-single__content a.psx-radio-cta__btn,a.psx-radio-cta__btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;
  font:600 15px/1 var(--psx-font-sans,Inter,system-ui,sans-serif);text-decoration:none;background:#FBE5C8;color:#2A1849;
  box-shadow:0 8px 22px -12px rgba(255,220,180,.55);transition:transform .15s ease,background .15s ease}
.psx-single__content a.psx-radio-cta__btn:hover,a.psx-radio-cta__btn:hover{background:#FFEED4;color:#2A1849;transform:translateY(-1px);text-decoration:none}
a.psx-radio-cta__btn:focus-visible{outline:3px solid #C9B8F0;outline-offset:3px}
.psx-radio-cta__btn svg{width:16px;height:16px}
.psx-single__content .psx-radio-cta__fine,.psx-radio-cta__fine{margin:12px 0 0;font:400 12.5px/1.4 var(--psx-font-sans,Inter,system-ui,sans-serif);color:rgba(250,243,232,.58)}

/* Station tiles (buttons: reset the theme's button styles) */
.psx-radio-cta__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.psx-radio-cta button.psx-radio-cta__tile{-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%;aspect-ratio:1/1;min-height:0;
  padding:0;margin:0;border:0;border-radius:14px;overflow:hidden;background:#2D1659;box-shadow:none;cursor:pointer;color:inherit;font:inherit;
  line-height:0;text-transform:none;letter-spacing:0;transition:transform .15s ease,box-shadow .15s ease}
.psx-radio-cta button.psx-radio-cta__tile:hover,.psx-radio-cta button.psx-radio-cta__tile:focus,.psx-radio-cta button.psx-radio-cta__tile:active{background:#2D1659;color:inherit;box-shadow:none}
.psx-radio-cta button.psx-radio-cta__tile:hover{transform:translateY(-2px)}
.psx-radio-cta button.psx-radio-cta__tile:focus-visible{outline:3px solid #C9B8F0;outline-offset:3px}
.psx-radio-cta button.psx-radio-cta__tile.is-on{box-shadow:0 0 0 2px #FBE5C8}
.psx-radio-cta__tile img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.psx-radio-cta__tile .psx-radio-cta__label{position:absolute;left:8px;bottom:8px;padding:4px 9px;border-radius:999px;background:rgba(20,8,42,.72);
  font:600 11px/1 var(--psx-font-sans,Inter,system-ui,sans-serif);color:#FAF3E8;letter-spacing:.02em}
.psx-radio-cta__play{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;background:rgba(250,243,232,.95);color:#2A1849;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(20,8,42,.6)}
.psx-radio-cta__play svg{width:14px;height:14px;display:block}
.psx-radio-cta__play .psx-i-pause,.psx-radio-cta__tile.is-playing .psx-radio-cta__play .psx-i-play{display:none}
.psx-radio-cta__tile.is-playing .psx-radio-cta__play .psx-i-pause{display:block}
.psx-radio-cta__prog{position:absolute;left:0;right:0;bottom:0;height:5px;display:none;background:linear-gradient(to right,#FBE5C8 calc(var(--p,0) * 100%),rgba(20,8,42,.6) 0)}
.psx-radio-cta__tile.is-on .psx-radio-cta__prog{display:block}
.psx-single__content .psx-radio-cta__status,.psx-radio-cta__status{margin:12px 0 0;min-height:1.35em;text-align:center;
  font:500 12.5px/1.35 var(--psx-font-sans,Inter,system-ui,sans-serif);color:rgba(250,243,232,.72)}
.psx-radio-cta__status b{color:#FAF3E8;font-weight:600;white-space:nowrap}
.psx-radio-cta__status .psx-nw{white-space:nowrap}

@media (max-width:640px){
  .psx-radio-cta{margin:34px 0;border-radius:20px}
  .psx-radio-cta__inner{grid-template-columns:1fr;gap:20px;padding:22px}
  .psx-radio-cta__art{order:-1}
  .psx-radio-cta__tiles{grid-template-columns:repeat(4,1fr);gap:8px}
  .psx-radio-cta button.psx-radio-cta__tile{border-radius:10px}
  .psx-radio-cta__tile .psx-radio-cta__label{left:50%;transform:translateX(-50%);bottom:5px;padding:3px 6px;font-size:9.5px;white-space:nowrap}
  .psx-radio-cta__play{right:auto;bottom:auto;left:50%;top:42%;transform:translate(-50%,-50%);width:28px;height:28px}
  .psx-radio-cta__play svg{width:11px;height:11px}
  .psx-single__content a.psx-radio-cta__btn,a.psx-radio-cta__btn{display:flex;justify-content:center}
}

/* ---------- Before-you-go panel ---------- */
html.psx-rc-lock{overflow:hidden}
.psx-rc-modal[hidden],.psx-rc-bar[hidden]{display:none}
.psx-rc-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:24px}
.psx-rc-modal__backdrop{position:absolute;inset:0;background:rgba(14,6,30,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease}
.psx-rc-modal__dialog{position:relative;width:min(780px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:24px;
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s ease,transform .22s ease}
.psx-rc-modal.is-open .psx-rc-modal__backdrop,.psx-rc-modal.is-open .psx-rc-modal__dialog{opacity:1}
.psx-rc-modal.is-open .psx-rc-modal__dialog{transform:none}
.psx-rc-modal .psx-radio-cta{margin:0;box-shadow:0 30px 70px -20px rgba(8,2,20,.7)}
.psx-rc-modal .psx-radio-cta__inner{padding:60px 44px 38px 44px}
.psx-rc-modal button.psx-rc-modal__x{-webkit-appearance:none;appearance:none;position:absolute;top:14px;right:14px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:rgba(250,243,232,.12);color:#FAF3E8;box-shadow:none;cursor:pointer}
.psx-rc-modal button.psx-rc-modal__x:hover{background:rgba(250,243,232,.22);color:#FAF3E8}
.psx-rc-modal button.psx-rc-modal__x:focus-visible{outline:3px solid #C9B8F0;outline-offset:2px}
.psx-rc-modal__x svg{width:16px;height:16px}
.psx-radio-cta button.psx-radio-cta__no{-webkit-appearance:none;appearance:none;display:inline-block;min-height:0;margin:16px 0 0;padding:4px 0;border:0;background:none;box-shadow:none;
  font:500 13px/1.3 var(--psx-font-sans,Inter,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:rgba(250,243,232,.6);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.psx-radio-cta button.psx-radio-cta__no:hover{background:none;color:#FAF3E8}

@media (max-width:640px){
  .psx-rc-modal{align-items:flex-end;padding:0}
  .psx-rc-modal__dialog{width:100%;max-height:92vh;border-radius:22px 22px 0 0;transform:translateY(40px)}
  .psx-rc-modal .psx-radio-cta{border-radius:22px 22px 0 0;border-bottom:0}
  .psx-rc-modal .psx-radio-cta__inner{padding:58px 22px calc(22px + env(safe-area-inset-bottom))}
  .psx-rc-modal .psx-radio-cta__headline{max-width:17ch}
  .psx-rc-modal button.psx-rc-modal__x{top:12px;right:12px}
  .psx-radio-cta button.psx-radio-cta__no{display:block;margin:12px auto 0}
  .psx-rc-modal .psx-radio-cta__fine{text-align:center}
}

/* ---------- Floating bar (a pill: three stations on phones, four and text-column wide from 700px) ---------- */
.psx-rc-bar{position:fixed;left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:99980;display:flex;align-items:center;gap:0;
  padding:8px 4px 8px 10px;border-radius:999px;border:1px solid rgba(220,200,255,.22);box-sizing:border-box;
  background:radial-gradient(140% 220% at 100% 0%,#3D1F75 0%,#1E0E3C 55%,#14082A 100%);
  box-shadow:0 18px 40px -12px rgba(8,2,20,.8),0 2px 6px rgba(8,2,20,.25);
  transform:translateY(160%);transition:transform .3s ease}
.psx-rc-bar.is-shown{transform:none}
.psx-rc-bar a.psx-rc-bar__open{-webkit-appearance:none;appearance:none;flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:0;margin:0;padding:0;border:0;text-decoration:none;
  background:none;box-shadow:none;color:#FAF3E8;text-align:left;cursor:pointer;font:400 14px/1.2 var(--psx-font-sans,Inter,system-ui,sans-serif);letter-spacing:0;text-transform:none}
.psx-rc-bar a.psx-rc-bar__open:hover,.psx-rc-bar a.psx-rc-bar__open:focus{background:none;color:#FAF3E8;text-decoration:none}
/* The theme animates every button property (transition:all); on the bar only colours may animate, never layout. */
.psx-rc-bar a.psx-rc-bar__open,.psx-rc-bar button.psx-rc-bar__x,.psx-rc-bar__go{transition:background-color .15s ease,color .15s ease}
.psx-rc-bar__stack{flex:none;display:flex}
.psx-rc-bar__stack img{display:block;width:36px;height:36px;max-width:none;margin:0 0 0 -15px;padding:0;border:2px solid #FBE5C8;border-radius:50%;object-fit:cover;
  box-sizing:border-box;box-shadow:0 2px 6px rgba(8,2,20,.45)}
.psx-rc-bar__stack img:first-child{margin-left:0}
.psx-rc-bar__stack img.psx-rc-bar__wide{display:none} /* 4th station: wider screens only */
.psx-rc-bar__txt{flex:1;min-width:0;display:block}
.psx-rc-bar__t,.psx-rc-bar__s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psx-rc-bar__t{font-weight:600;font-size:14.5px;line-height:1.2;color:#FAF3E8}
.psx-rc-bar__s{margin-top:1px;font-size:12px;line-height:1.3;color:rgba(250,243,232,.78)}
.psx-rc-bar__go{flex:none;display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:999px;background:#FBE5C8;color:#2A1849;font-weight:600;font-size:14px;line-height:1}
.psx-rc-bar__go svg{display:block;width:14px;height:14px}
.psx-rc-bar button.psx-rc-bar__x{-webkit-appearance:none;appearance:none;flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:40px;min-height:0;
  margin:0 0 0 4px;padding:0;border:0;border-radius:50%;background:none;color:rgba(250,243,232,.85);box-shadow:none;cursor:pointer}
.psx-rc-bar button.psx-rc-bar__x:hover{background:rgba(250,243,232,.08);color:#FAF3E8}
.psx-rc-bar__x svg{display:block;width:14px;height:14px}
@media (min-width:700px){ /* wider screens: a bigger pill, the width of the text column, centered */
  .psx-rc-bar{left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));width:min(680px,calc(100% - 48px));margin:0 auto;padding:10px 8px 10px 14px}
  .psx-rc-bar a.psx-rc-bar__open{gap:14px}
  .psx-rc-bar__stack img{width:40px;height:40px;margin-left:-13px}
  .psx-rc-bar__stack img.psx-rc-bar__wide{display:block}
  .psx-rc-bar__t{font-size:16px}
  .psx-rc-bar__s{font-size:13px}
  .psx-rc-bar__go{padding:11px 18px;font-size:15px}
  .psx-rc-bar button.psx-rc-bar__x{width:40px;height:40px;margin-left:6px}
}
@media (hover:hover){
  .psx-rc-bar a.psx-rc-bar__open:hover .psx-rc-bar__go{background:#FFF1DE}
}
.psx-rc-bar a.psx-rc-bar__open:focus-visible,.psx-rc-bar button.psx-rc-bar__x:focus-visible{outline:2px solid #FBE5C8;outline-offset:3px;border-radius:999px}
@media (max-width:374px){ /* small Android phones: win back ~16px so the label never truncates */
  .psx-rc-bar{left:8px;right:8px;padding-left:8px}
  .psx-rc-bar a.psx-rc-bar__open{gap:6px}
  .psx-rc-bar__stack img{margin-left:-17px}
  .psx-rc-bar__go{padding:10px 10px}
  .psx-rc-bar button.psx-rc-bar__x{width:32px;margin-left:2px}
}

@media (prefers-reduced-motion:reduce){
  .psx-radio-cta__live{animation:none}
  .psx-rc-modal__backdrop,.psx-rc-modal__dialog,.psx-rc-bar{transition:none}
}
.psx-rc-modal__dialog:focus{outline:none}