:root{
  --stage-blue:#1c2e46;
  --stage-red:#CC0033;
  --stage-bg:#f3f1ef;
  --stage-ink:#142238;
  --stage-line:rgba(28,46,70,.16);
  --stage-head:"Bebas Kai","Bebas","Bebas Neue",Impact,sans-serif;
  --stage-body:"Neue Haas Grotesk Text Pro","Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;
}

.tsrh-wrap{
  font-family:var(--stage-body);
  background:var(--stage-bg);
  color:var(--stage-ink);
}
.tsrh-wrap *{box-sizing:border-box}
.tsrh-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* NOW ON AIR */
.tsrh-now{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background-color:var(--stage-blue);
  background-image:var(--tsrh-hero);
  background-size:cover;
  background-position:center 36%;
}
.tsrh-now::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,18,31,.96) 0%,rgba(8,18,31,.78) 44%,rgba(8,18,31,.28) 72%,rgba(8,18,31,.10) 100%),
    linear-gradient(0deg,rgba(8,18,31,.56),transparent 60%);
}
.tsrh-now::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:var(--stage-red);
}
.tsrh-inner{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 44px));
  margin:0 auto;
  padding:76px 0 54px;
}
.tsrh-live{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tsrh-live span{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--stage-red);
  box-shadow:0 0 0 7px rgba(204,0,51,.18);
}
.tsrh-live b{
  background:var(--stage-red);
  color:#fff;
  padding:8px 11px 7px;
}
.tsrh-now h2{
  margin:24px 0 12px;
  max-width:850px;
  color:#fff!important;
  font:400 clamp(66px,10vw,118px)/.86 var(--stage-head);
  letter-spacing:0;
  text-transform:uppercase;
}
.tsrh-claim{
  max-width:740px;
  margin:0 0 10px;
  font-size:clamp(18px,2vw,24px);
  line-height:1.35;
}
.tsrh-host{
  margin:0 0 12px;
  font-weight:700;
}
.tsrh-now-time{
  display:inline-block;
  margin-top:14px;
  padding-top:10px;
  border-top:4px solid var(--stage-red);
  font-size:18px;
  font-weight:800;
}

/* WEEK */
.tsrh-week{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:56px 0 76px;
}
.tsrh-week-head{
  padding-bottom:14px;
  border-bottom:1px solid var(--stage-blue);
}
.tsrh-week-head h2{
  margin:8px 0 0;
  color:var(--stage-blue);
  font:400 clamp(50px,7vw,78px)/.9 var(--stage-head);
  letter-spacing:0;
  text-transform:uppercase;
}

/* tabs */
.tsrh-tabs{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
  margin:20px 0;
}
.tsrh-tab{
  appearance:none;
  min-height:62px;
  border:0;
  padding:0 8px;
  background:var(--stage-blue);
  color:#fff;
  font:400 clamp(18px,2.2vw,28px)/1 var(--stage-head);
  text-transform:uppercase;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}
.tsrh-tab:hover,
.tsrh-tab.is-active{
  background:var(--stage-red);
}

/* one day */
.tsrh-day{display:none}
.tsrh-day.is-active{display:block}
.tsrh-day-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:15px 18px;
  background:var(--stage-blue);
  color:#fff;
  font:400 clamp(34px,4vw,48px)/1 var(--stage-head);
  text-transform:uppercase;
}
.tsrh-day.is-active .tsrh-day-title em{
  font:800 10px/1 var(--stage-body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tsrh-day-title em{font-style:normal}

/* cards */
.tsrh-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.tsrh-card{
  position:relative;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  min-height:178px;
  overflow:hidden;
  border:0;
  border-left:5px solid var(--stage-blue);
  padding:0;
  background:#fff;
  color:var(--stage-ink);
  box-shadow:0 8px 28px rgba(28,46,70,.08);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tsrh-card:hover{
  transform:translateY(-2px);
  border-left-color:var(--stage-red);
  box-shadow:0 14px 34px rgba(28,46,70,.14);
}
.tsrh-card.is-live{
  background:var(--stage-blue);
  color:#fff;
  border-left-color:var(--stage-red);
}
.tsrh-card-img{
  position:relative;
  min-height:178px;
  overflow:hidden;
  background:var(--stage-blue);
}
.tsrh-card-img img{
  display:block;
  width:100%;
  height:100%;
  min-height:178px;
  object-fit:cover;
  object-position:center;
}
.tsrh-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:178px;
  background:linear-gradient(135deg,var(--stage-blue),#101a29);
  color:#fff;
  font:400 58px/1 var(--stage-head);
}
.tsrh-card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:22px;
}
.tsrh-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tsrh-meta b{
  display:inline-flex;
  padding:6px 8px;
  background:var(--stage-red);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tsrh-meta i{
  color:inherit;
  font-style:normal;
  font-size:10px;
  font-weight:800;
}
.tsrh-card strong{
  display:block;
  margin:0;
  font:400 clamp(34px,3.4vw,48px)/.92 var(--stage-head);
  letter-spacing:0;
  text-transform:uppercase;
}
.tsrh-time{
  display:block;
  color:var(--stage-red);
  font-size:13px;
  font-weight:800;
}
.tsrh-card.is-live .tsrh-time{color:#fff}
.tsrh-card small{
  display:block;
  color:#62666c;
  font-size:13px;
  line-height:1.35;
}
.tsrh-card.is-live small{color:rgba(255,255,255,.82)}
.tsrh-live-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  padding:7px 9px;
  background:var(--stage-red);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* modal */
.tsrh-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:999999;
  padding:22px;
}
.tsrh-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}
.tsrh-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,18,31,.84);
  backdrop-filter:blur(4px);
}
.tsrh-modal-panel{
  position:relative;
  z-index:2;
  width:min(1000px,100%);
  max-height:calc(100vh - 44px);
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}
.tsrh-modal-scroll{
  display:grid;
  grid-template-columns:42% 58%;
  max-height:calc(100vh - 44px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.tsrh-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
  width:44px;
  height:44px;
  border:0;
  background:#333;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.tsrh-modal-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:560px;
  padding:0;
  overflow:hidden;
  background:var(--stage-blue);
}
.tsrh-modal-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  object-position:center;
}
.tsrh-modal-content{
  padding:46px 42px 40px;
}
.tsrh-modal-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.tsrh-modal-meta span{
  padding:7px 10px;
  background:var(--stage-red);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.tsrh-modal-meta b{
  color:var(--stage-blue);
  font-size:12px;
}
.tsrh-modal-content h3{
  margin:18px 0 12px;
  color:var(--stage-blue);
  font:400 clamp(52px,6vw,76px)/.88 var(--stage-head);
  letter-spacing:0;
  text-transform:uppercase;
}
.tsrh-modal-claim{
  margin:0 0 10px;
  color:var(--stage-red);
  font-size:18px;
  font-weight:700;
}
.tsrh-modal-host{
  margin:0 0 14px;
  font-weight:700;
}
.tsrh-modal-description{
  color:#3d4652;
  font-size:16px;
  line-height:1.6;
}
.tsrh-modal-description:empty,
.tsrh-modal-claim:empty,
.tsrh-modal-host:empty{display:none}
.tsrh-modal-week{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--stage-line);
}
.tsrh-modal-week h4{
  margin:0 0 10px;
  color:var(--stage-blue);
  font:400 30px/1 var(--stage-head);
  text-transform:uppercase;
}
.tsrh-week-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:8px 0;
  border-bottom:1px solid rgba(28,46,70,.08);
  font-size:13px;
}
.tsrh-week-row strong{color:var(--stage-blue)}
body.tsrh-modal-open{overflow:hidden}

/* responsive */
@media(max-width:900px){
  .tsrh-cards{grid-template-columns:1fr}
}
@media(max-width:768px){
  .tsrh-now{
    min-height:430px;
    background-position:center top;
  }
  .tsrh-now::before{
    background:linear-gradient(0deg,rgba(8,18,31,.96),rgba(8,18,31,.70) 55%,rgba(8,18,31,.25));
  }
  .tsrh-inner{
    width:calc(100% - 28px);
    padding:100px 0 36px;
  }
  .tsrh-now h2{
    font-size:clamp(54px,18vw,80px);
  }
  .tsrh-claim{font-size:17px}

  .tsrh-week{
    width:calc(100% - 24px);
    padding-top:36px;
  }
  .tsrh-tabs{gap:5px}
  .tsrh-tab{
    aspect-ratio:1/1;
    min-height:0;
    padding:0;
    font-size:clamp(12px,4vw,16px);
  }
  .tsrh-day-title{
    min-height:58px;
    padding:12px 14px;
    font-size:34px;
  }
  .tsrh-cards{
    grid-template-columns:1fr;
    gap:9px;
  }
  .tsrh-card{
    grid-template-columns:112px minmax(0,1fr);
    min-height:116px;
  }
  .tsrh-card-img,
  .tsrh-card-img img,
  .tsrh-fallback{
    min-height:116px;
  }
  .tsrh-card-body{
    padding:14px;
    gap:5px;
  }
  .tsrh-card strong{font-size:31px}
  .tsrh-meta b{font-size:8px;padding:5px 6px}
  .tsrh-meta i{font-size:9px}
  .tsrh-time{font-size:11px}
  .tsrh-card small{font-size:11px}
  .tsrh-live-badge{
    top:7px;right:7px;
    padding:5px 6px;
    font-size:7px;
  }

  .tsrh-modal{
    padding:0;
    align-items:stretch;
  }
  .tsrh-modal-panel{
    width:100%;
    height:100dvh;
    max-height:100dvh;
  }
  .tsrh-modal-scroll{
    display:block;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .tsrh-close{
    position:fixed;
    top:12px;
    right:12px;
  }
  .tsrh-modal-media{
    min-height:300px;
    height:300px;
  }
  .tsrh-modal-media img{
    width:100%;
    height:300px;
    min-height:300px;
    object-fit:cover;
  }
  .tsrh-modal-content{
    padding:30px 22px 46px;
  }
  .tsrh-modal-content h3{
    font-size:54px;
  }
}


/* v3.3 — full-width page integration */
.tsrh-wrap{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:var(--stage-bg);
}

.tsrh-now{
  width:100%;
}

.tsrh-week{
  width:min(1180px,calc(100% - 36px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Remove typical Sprout/Gutenberg width constraints around the Radio Hub */
body:has(.tsrh-wrap) .entry-content,
body:has(.tsrh-wrap) .wp-block-post-content,
body:has(.tsrh-wrap) .vw-post-content,
body:has(.tsrh-wrap) .vw-page-content,
body:has(.tsrh-wrap) .site-main,
body:has(.tsrh-wrap) main,
body:has(.tsrh-wrap) .content-area{
  max-width:none !important;
  width:100% !important;
}

body:has(.tsrh-wrap),
body:has(.tsrh-wrap) #page,
body:has(.tsrh-wrap) .site,
body:has(.tsrh-wrap) .site-content,
body:has(.tsrh-wrap) .content-area,
body:has(.tsrh-wrap) .site-main{
  background:var(--stage-bg) !important;
}

@media(max-width:768px){
  .tsrh-wrap{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* v3.4 — refined THE STAGE landscape cards, closer to the successful legacy design */

/* Keep the program airy and editorial */
.tsrh-cards{
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  align-items:stretch;
}

.tsrh-card{
  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) !important;
  min-height:154px !important;
  height:auto !important;
  background:#fff !important;
  color:var(--stage-ink) !important;
  border:0 !important;
  border-left:4px solid var(--stage-blue) !important;
  box-shadow:0 7px 22px rgba(28,46,70,.07) !important;
  overflow:hidden !important;
  transform:none !important;
}

.tsrh-card:hover{
  border-left-color:var(--stage-red) !important;
  box-shadow:0 12px 30px rgba(28,46,70,.12) !important;
  transform:translateY(-1px) !important;
}

.tsrh-card.is-live{
  background:#fff !important;
  color:var(--stage-ink) !important;
  border-left-color:var(--stage-red) !important;
  box-shadow:0 10px 30px rgba(204,0,51,.12) !important;
}

/* Image = clean horizontal crop, not poster-like */
.tsrh-card-img{
  min-height:154px !important;
  height:100% !important;
  background:var(--stage-blue) !important;
}

.tsrh-card-img img{
  width:100% !important;
  height:100% !important;
  min-height:154px !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

.tsrh-fallback{
  min-height:154px !important;
}

/* Text area: compact, elegant, left aligned */
.tsrh-card-body{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:7px !important;
  padding:20px 22px !important;
  text-align:left !important;
}

.tsrh-meta{
  width:100%;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:8px !important;
  margin:0 !important;
}

.tsrh-meta b{
  display:inline-flex !important;
  width:auto !important;
  padding:6px 9px 5px !important;
  background:var(--stage-red) !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
}

.tsrh-meta i{
  color:#69707a !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.tsrh-card strong{
  margin:2px 0 0 !important;
  color:var(--stage-blue) !important;
  font:400 clamp(32px,2.8vw,43px)/.93 var(--stage-head) !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;
}

.tsrh-time{
  margin:0 !important;
  color:var(--stage-red) !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.tsrh-card small{
  margin:0 !important;
  color:#5e6671 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  max-width:100%;
}

/* Live state = subtle badge only, not a fully dark card */
.tsrh-card.is-live .tsrh-time{
  color:var(--stage-red) !important;
}
.tsrh-card.is-live small{
  color:#5e6671 !important;
}
.tsrh-live-badge{
  top:9px !important;
  right:9px !important;
  padding:6px 8px !important;
}

/* Popup: allow the actual picture proportions instead of forcing a tall crop */
.tsrh-modal-panel{
  width:min(1040px,100%) !important;
  background:#fff !important;
}

.tsrh-modal-scroll{
  grid-template-columns:minmax(360px,44%) minmax(0,56%) !important;
  align-items:start !important;
}

.tsrh-modal-media{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  background:var(--stage-blue) !important;
  align-self:start !important;
  overflow:hidden !important;
}

.tsrh-modal-media img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center top !important;
  background:var(--stage-blue);
}

.tsrh-modal-content{
  min-width:0;
  padding:44px 42px 40px !important;
}

/* Give the left image column a deliberate end instead of stretching/cropping it */
.tsrh-modal-media:after{
  content:"";
  display:block;
  height:8px;
  background:var(--stage-red);
}

/* Slightly calmer typography inside popup */
.tsrh-modal-content h3{
  font-size:clamp(50px,5.5vw,72px) !important;
  line-height:.9 !important;
}

.tsrh-modal-description{
  max-width:620px;
}

/* Tablet */
@media(max-width:980px){
  .tsrh-cards{
    grid-template-columns:1fr !important;
  }
}

/* Mobile: horizontal cards remain elegant and tappable */
@media(max-width:768px){
  .tsrh-card{
    grid-template-columns:118px minmax(0,1fr) !important;
    min-height:118px !important;
  }

  .tsrh-card-img,
  .tsrh-card-img img,
  .tsrh-fallback{
    min-height:118px !important;
  }

  .tsrh-card-body{
    padding:14px 14px !important;
    gap:5px !important;
  }

  .tsrh-card strong{
    font-size:30px !important;
  }

  .tsrh-meta b{
    font-size:8px !important;
    padding:5px 6px 4px !important;
  }

  .tsrh-meta i{
    font-size:9px !important;
  }

  .tsrh-time{
    font-size:11px !important;
  }

  .tsrh-card small{
    font-size:11px !important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  /* Full-screen mobile popup, scrollable, with image shown in its own natural ratio */
  .tsrh-modal-scroll{
    display:block !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
  }

  .tsrh-modal-media{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  .tsrh-modal-media img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  .tsrh-modal-media:after{
    height:6px;
  }

  .tsrh-modal-content{
    padding:28px 22px 44px !important;
  }
}


/* v3.5 — page background continuity + mobile refinement */

/* Match the surrounding page canvas to the shortcode background */
html:has(.tsrh-wrap),
body:has(.tsrh-wrap),
body:has(.tsrh-wrap) #page,
body:has(.tsrh-wrap) .site,
body:has(.tsrh-wrap) .site-content,
body:has(.tsrh-wrap) .content-area,
body:has(.tsrh-wrap) .site-main,
body:has(.tsrh-wrap) main,
body:has(.tsrh-wrap) article,
body:has(.tsrh-wrap) .entry-content,
body:has(.tsrh-wrap) .wp-block-post-content{
  background:var(--stage-bg) !important;
}

/* Desktop tabs use full weekday names */
.tsrh-tab-long{display:inline}
.tsrh-tab-short{display:none}

@media(max-width:768px){

  /* Heading must fit cleanly on mobile */
  .tsrh-week-head h2{
    font-size:clamp(38px,11.5vw,52px) !important;
    line-height:.92 !important;
    max-width:100% !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  /* Square, centered weekday tabs */
  .tsrh-tab-long{display:none !important}
  .tsrh-tab-short{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-align:center;
  }

  .tsrh-tabs{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100%;
  }

  .tsrh-tab{
    aspect-ratio:1/1 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:clamp(12px,3.8vw,16px) !important;
    line-height:1 !important;
  }

  /* Mobile cards: calm horizontal layout with a fixed square image */
  .tsrh-card{
    grid-template-columns:112px minmax(0,1fr) !important;
    min-height:112px !important;
    align-items:stretch !important;
  }

  .tsrh-card-img{
    width:112px !important;
    height:112px !important;
    min-height:112px !important;
    aspect-ratio:1/1 !important;
    align-self:start;
  }

  .tsrh-card-img img{
    width:112px !important;
    height:112px !important;
    min-height:112px !important;
    aspect-ratio:1/1 !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .tsrh-fallback{
    width:112px !important;
    height:112px !important;
    min-height:112px !important;
    aspect-ratio:1/1 !important;
  }

  .tsrh-card-body{
    min-width:0;
    justify-content:center !important;
    gap:5px !important;
    padding:12px 13px !important;
  }

  /* Claim is intentionally hidden in the compact mobile card */
  .tsrh-card small{
    display:none !important;
  }

  /* Keep time on one line */
  .tsrh-time{
    white-space:nowrap !important;
    font-size:10px !important;
    letter-spacing:-.01em;
  }

  /* Category badge may be long, but never wraps */
  .tsrh-meta{
    min-width:0;
    gap:6px !important;
    padding-right:0;
  }

  .tsrh-meta b{
    max-width:145px;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:7.5px !important;
    padding:5px 6px 4px !important;
    letter-spacing:.03em !important;
  }

  .tsrh-meta i{
    white-space:nowrap;
    font-size:8.5px !important;
  }

  .tsrh-card strong{
    font-size:clamp(25px,8vw,31px) !important;
    line-height:.94 !important;
    max-width:100%;
  }

  /* Live state: avoid two adjacent red badges */
  .tsrh-card.is-live .tsrh-meta b{
    background:transparent !important;
    color:var(--stage-blue) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .tsrh-live-badge{
    position:absolute !important;
    top:7px !important;
    right:7px !important;
    padding:5px 6px !important;
    font-size:7px !important;
  }

  .tsrh-card.is-live .tsrh-card-body{
    padding-top:28px !important;
  }

  /* Keep the live card itself white and editorial */
  .tsrh-card.is-live{
    background:#fff !important;
    color:var(--stage-ink) !important;
  }

  .tsrh-card.is-live .tsrh-time{
    color:var(--stage-red) !important;
  }

  /* Mobile popup remains safely scrollable */
  .tsrh-modal-panel,
  .tsrh-modal-scroll{
    height:100dvh !important;
    max-height:100dvh !important;
  }

  .tsrh-modal-scroll{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .tsrh-close{
    position:fixed !important;
    top:12px !important;
    right:12px !important;
  }
}

@media(max-width:390px){
  .tsrh-card{
    grid-template-columns:98px minmax(0,1fr) !important;
  }
  .tsrh-card-img,
  .tsrh-card-img img,
  .tsrh-fallback{
    width:98px !important;
    height:98px !important;
    min-height:98px !important;
  }
  .tsrh-card-body{
    padding:10px 11px !important;
  }
  .tsrh-meta b{
    max-width:118px;
  }
  .tsrh-time{
    font-size:9px !important;
  }
}


/* v3.6 — final visual cleanup */

/* Undo v3.5 surrounding-page grey override */
html:has(.tsrh-wrap),
body:has(.tsrh-wrap),
body:has(.tsrh-wrap) #page,
body:has(.tsrh-wrap) .site,
body:has(.tsrh-wrap) .site-content,
body:has(.tsrh-wrap) .content-area,
body:has(.tsrh-wrap) .site-main,
body:has(.tsrh-wrap) main,
body:has(.tsrh-wrap) article,
body:has(.tsrh-wrap) .entry-content,
body:has(.tsrh-wrap) .wp-block-post-content{
  background:initial !important;
}

/* Keep only the plugin's own canvas */
.tsrh-wrap{
  background:var(--stage-bg) !important;
}

/* Desktop tabs: full weekday only */
.tsrh-tab-long{display:inline !important}
.tsrh-tab-short{display:none !important}

/* Hide duration everywhere */
.tsrh-meta i{
  display:none !important;
}

/* Mobile */
@media(max-width:768px){

  .tsrh-tab-long{display:none !important}
  .tsrh-tab-short{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100%;
    height:100%;
  }

  /* Cards use vertically centered square image */
  .tsrh-card{
    align-items:center !important;
  }

  .tsrh-card-img{
    align-self:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .tsrh-card-img img{
    align-self:center !important;
    object-position:center center !important;
  }

  /* More room for long category labels */
  .tsrh-meta{
    display:block !important;
    width:100%;
    min-width:0;
  }

  .tsrh-meta b{
    display:inline-block !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:7px !important;
    letter-spacing:0 !important;
    padding:4px 5px 3px !important;
    line-height:1 !important;
  }

  /* Ensure title itself never leaves an orphaned last letter */
  .tsrh-card strong{
    font-size:clamp(23px,7.4vw,29px) !important;
    line-height:.95 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }

  .tsrh-time{
    font-size:9.5px !important;
    white-space:nowrap !important;
  }

  .tsrh-card.is-live .tsrh-meta b{
    max-width:calc(100% - 68px) !important;
  }
}

@media(max-width:390px){
  .tsrh-meta b{
    font-size:6.7px !important;
    padding:4px 4px 3px !important;
  }

  .tsrh-card strong{
    font-size:22px !important;
  }

  .tsrh-time{
    font-size:9px !important;
  }
}


/* v3.7 — edge-to-edge mobile program */
@media(max-width:768px){

  /* Use the complete mobile width for the schedule */
  .tsrh-week{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Only the editorial heading keeps a small breathing space */
  .tsrh-week-head{
    margin-left:14px !important;
    margin-right:14px !important;
  }

  .tsrh-week-head h2{
    font-size:clamp(42px,12.5vw,58px) !important;
  }

  /* Tabs run edge to edge */
  .tsrh-tabs{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    gap:4px !important;
  }

  .tsrh-tab{
    font-size:clamp(13px,4.2vw,17px) !important;
  }

  /* Day header also uses the full width */
  .tsrh-day-title{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Cards sit directly on the program canvas */
  .tsrh-cards{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    gap:7px !important;
  }

  .tsrh-card{
    grid-template-columns:120px minmax(0,1fr) !important;
    min-height:120px !important;
    border-left-width:4px !important;
  }

  .tsrh-card-img,
  .tsrh-card-img img,
  .tsrh-fallback{
    width:120px !important;
    height:120px !important;
    min-height:120px !important;
  }

  .tsrh-card-body{
    padding:13px 15px !important;
  }

  .tsrh-card strong{
    font-size:clamp(26px,8.2vw,32px) !important;
  }

  .tsrh-meta b{
    font-size:7.4px !important;
    max-width:155px !important;
  }

  .tsrh-time{
    font-size:10px !important;
  }
}

@media(max-width:390px){
  .tsrh-week-head{
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .tsrh-card{
    grid-template-columns:106px minmax(0,1fr) !important;
    min-height:106px !important;
  }

  .tsrh-card-img,
  .tsrh-card-img img,
  .tsrh-fallback{
    width:106px !important;
    height:106px !important;
    min-height:106px !important;
  }

  .tsrh-card-body{
    padding:11px 12px !important;
  }

  .tsrh-card strong{
    font-size:24px !important;
  }

  .tsrh-meta b{
    max-width:132px !important;
    font-size:6.9px !important;
  }
}


/* v3.8 — desktop current/next split + true viewport mobile bleed */

/* Desktop hero: approx. 3:1 */
.tsrh-now{
  min-height:0 !important;
  background:none !important;
  overflow:hidden;
}
.tsrh-now::before,
.tsrh-now::after{
  display:none !important;
}
.tsrh-now-layout{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(250px,1fr);
  min-height:500px;
  width:100%;
}
.tsrh-now-main{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-width:0;
  color:#fff;
  background-color:var(--stage-blue);
  background-image:var(--tsrh-hero);
  background-size:cover;
  background-position:center 36%;
  overflow:hidden;
}
.tsrh-now-main::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,18,31,.96) 0%,rgba(8,18,31,.78) 45%,rgba(8,18,31,.24) 78%,rgba(8,18,31,.10) 100%),
    linear-gradient(0deg,rgba(8,18,31,.56),transparent 60%);
}
.tsrh-now-main::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:var(--stage-red);
}
.tsrh-now-main .tsrh-inner{
  width:min(900px,calc(100% - 44px));
  margin-left:max(22px,calc((100vw - 1180px)/2));
  margin-right:22px;
}

/* Upcoming panel */
.tsrh-next{
  position:relative;
  min-width:0;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background-color:var(--stage-blue);
  background-image:var(--tsrh-next-image);
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.tsrh-next::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,18,31,.96),rgba(8,18,31,.58) 58%,rgba(8,18,31,.20));
}
.tsrh-next::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:rgba(255,255,255,.20);
}
.tsrh-next-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:34px 26px 36px;
}
.tsrh-next-kicker{
  display:inline-block;
  margin-bottom:14px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.tsrh-next-genre{
  display:block;
  width:max-content;
  max-width:100%;
  margin-bottom:10px;
  padding:6px 8px 5px;
  background:var(--stage-red);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tsrh-next h3{
  margin:0 0 16px;
  color:#fff;
  font:400 clamp(38px,3.8vw,58px)/.90 var(--stage-head);
  text-transform:uppercase;
}
.tsrh-next-time{
  display:inline-block;
  padding-top:9px;
  border-top:3px solid var(--stage-red);
  font-size:15px;
  font-weight:800;
}

/* Real edge-to-edge mobile schedule, regardless of parent/theme content width */
@media(max-width:768px){

  /* Mobile keeps only the current show hero */
  .tsrh-now-layout{
    display:block !important;
    min-height:0 !important;
  }
  .tsrh-now-main{
    min-height:430px !important;
    background-position:center top !important;
  }
  .tsrh-next{
    display:none !important;
  }
  .tsrh-now-main .tsrh-inner{
    width:calc(100% - 28px) !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  /* Escape Sprout/Gutenberg inner width completely */
  .tsrh-week{
    position:relative !important;
    left:50% !important;
    right:50% !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .tsrh-week-head{
    margin-left:14px !important;
    margin-right:14px !important;
  }

  .tsrh-tabs,
  .tsrh-day,
  .tsrh-day-title,
  .tsrh-cards{
    width:100% !important;
    max-width:none !important;
  }

  .tsrh-tabs{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .tsrh-cards{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

@media(min-width:769px) and (max-width:1050px){
  .tsrh-now-layout{
    grid-template-columns:minmax(0,2.4fr) minmax(230px,1fr);
  }
  .tsrh-next-content{
    padding-left:20px;
    padding-right:20px;
  }
}


/* v3.9 — complete mobile full-bleed canvas */
@media(max-width:768px){

  /*
   * The week section already escaped the theme container in v3.8.
   * Apply the same viewport escape to the complete Radio Hub and the
   * Now On Air hero, so neither the hero nor the grey canvas inherits
   * Sprout/Gutenberg's mobile side gutters.
   */
  .tsrh-wrap{
    position:relative !important;
    left:50% !important;
    right:50% !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow-x:hidden !important;
    background:var(--stage-bg) !important;
  }

  .tsrh-now{
    position:relative !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .tsrh-now-layout,
  .tsrh-now-main{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Keep readable breathing room only inside the hero content itself. */
  .tsrh-now-main .tsrh-inner{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /*
   * Since the whole wrapper is now viewport-wide, the week no longer
   * needs a second -50vw escape. Reset it to the wrapper width.
   */
  .tsrh-week{
    position:relative !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* v4.0 — Mobile layout harmonisation
   Desktop intentionally untouched. */
@media(max-width:768px){

  /* The full plugin still escapes the theme container so the hero can be full-bleed. */
  .tsrh-wrap{
    position:relative !important;
    left:50% !important;
    right:50% !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow-x:hidden !important;
    background:#fff !important;
  }

  /* HERO: full width, unchanged in spirit from v3.9. */
  .tsrh-now,
  .tsrh-now-layout,
  .tsrh-now-main{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .tsrh-now-main .tsrh-inner{
    width:calc(100% - 28px) !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  /* PROGRAM: consistent small white gutter from the guide heading downward. */
  .tsrh-week{
    position:relative !important;
    left:0 !important;
    right:auto !important;
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    background:var(--stage-bg) !important;
  }

  .tsrh-week-head{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .tsrh-tabs,
  .tsrh-day,
  .tsrh-day-title,
  .tsrh-cards{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .tsrh-tabs,
  .tsrh-cards{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* v4.1 — unified white content canvas on desktop and mobile */
.tsrh-wrap{
  background:#fff !important;
}

.tsrh-week{
  background:#fff !important;
}

.tsrh-week-head{
  background:#fff !important;
}

.tsrh-cards{
  background:#fff !important;
}

.tsrh-card{
  background:#fff !important;
  border-left:4px solid var(--stage-blue) !important;
  box-shadow:0 7px 22px rgba(28,46,70,.07) !important;
}

.tsrh-card:hover{
  border-left-color:var(--stage-red) !important;
  box-shadow:0 12px 30px rgba(28,46,70,.12) !important;
}

.tsrh-card.is-live{
  background:#fff !important;
  color:var(--stage-ink) !important;
  border-left-color:var(--stage-red) !important;
  box-shadow:0 10px 30px rgba(204,0,51,.10) !important;
}

.tsrh-card.is-live .tsrh-time{
  color:var(--stage-red) !important;
}

.tsrh-card.is-live small{
  color:#5e6671 !important;
}

/* Keep structural headers and tabs strong, but not the whole section grey. */
.tsrh-day-title{
  box-shadow:none !important;
}

@media(max-width:768px){
  .tsrh-wrap{
    background:#fff !important;
  }

  .tsrh-week{
    background:#fff !important;
  }

  .tsrh-week-head,
  .tsrh-tabs,
  .tsrh-day,
  .tsrh-cards{
    background:#fff !important;
  }

  .tsrh-card{
    box-shadow:0 5px 16px rgba(28,46,70,.07) !important;
  }
}

/* v4.1.1 — force a genuinely white page canvas around Radio Hub.
   This overrides legacy v3.x theme-container background rules only on pages
   that actually contain .tsrh-wrap. Hero and program components stay intact. */
html:has(.tsrh-wrap),
body:has(.tsrh-wrap),
body:has(.tsrh-wrap) #page,
body:has(.tsrh-wrap) .site,
body:has(.tsrh-wrap) .site-content,
body:has(.tsrh-wrap) .content-area,
body:has(.tsrh-wrap) .site-main,
body:has(.tsrh-wrap) main,
body:has(.tsrh-wrap) article,
body:has(.tsrh-wrap) .entry-content,
body:has(.tsrh-wrap) .wp-block-post-content,
body:has(.tsrh-wrap) .vw-post-content,
body:has(.tsrh-wrap) .vw-page-content {
  background:#fff !important;
}

.tsrh-wrap,
.tsrh-week,
.tsrh-week-head,
.tsrh-day,
.tsrh-cards {
  background:#fff !important;
}

/* Preserve the intended dark/image-led hero areas. */
.tsrh-now-main,
.tsrh-next {
  background-color:var(--stage-blue) !important;
}

@media(max-width:768px){
  html:has(.tsrh-wrap),
  body:has(.tsrh-wrap),
  body:has(.tsrh-wrap) #page,
  body:has(.tsrh-wrap) .site,
  body:has(.tsrh-wrap) .site-content,
  body:has(.tsrh-wrap) .content-area,
  body:has(.tsrh-wrap) .site-main,
  body:has(.tsrh-wrap) main,
  body:has(.tsrh-wrap) article,
  body:has(.tsrh-wrap) .entry-content,
  body:has(.tsrh-wrap) .wp-block-post-content,
  body:has(.tsrh-wrap) .vw-post-content,
  body:has(.tsrh-wrap) .vw-page-content {
    background:#fff !important;
  }
}