#grh-live-hub{
  --red:#b5121b;
  --red-dark:#8f0e15;
  --gold:#d7a52f;
  --gold-dark:#8a6514;
  --black:#191919;
  --text:#202020;
  --muted:#666666;
  --cream:#fff8e8;

  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto;
  overflow:hidden;

  background:#fff;

  border:3px solid var(--red);
  border-radius:14px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.10),
    0 0 0 1px rgba(181,18,27,.06);

  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
}

#grh-live-hub *,
#grh-live-hub *::before,
#grh-live-hub *::after{
  box-sizing:border-box;
}

#grh-live-hub::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  z-index:5;

  background:
    linear-gradient(
      90deg,
      var(--red-dark),
      var(--red),
      var(--gold),
      var(--red),
      var(--red-dark)
    );
}

#grh-live-hub .grh-live-row{
  display:flex;
  align-items:center;
  gap:16px;

  width:100%;
  min-height:100px;

  padding:16px 18px;

  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fff 78%,
      #fff8e8 100%
    );
}

#grh-live-hub .grh-radio-row{
  border-bottom:1px solid #e9e9e9;
}

#grh-live-hub .grh-youtube-row{
  background:#fafafa;
}


/* GRH LOGO */

#grh-live-hub .grh-live-logo-wrap{
  width:64px;
  height:64px;
  flex:0 0 64px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#050505;

  border:2px solid var(--gold);
  border-radius:50%;

  box-shadow:
    0 4px 12px rgba(0,0,0,.16);
}

#grh-live-hub .grh-live-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}


/* TEXT */

#grh-live-hub .grh-live-copy{
  min-width:0;
  flex:1 1 auto;
}

#grh-live-hub .grh-live-kicker{
  display:flex;
  align-items:center;
  gap:7px;

  margin:0 0 5px;

  color:var(--red);

  font-size:11px;
  line-height:1.2;
  font-weight:900;

  letter-spacing:.10em;
  text-transform:uppercase;
}

#grh-live-hub .grh-live-dot{
  width:8px;
  height:8px;
  flex:0 0 8px;

  border-radius:50%;

  background:var(--gold);

  box-shadow:
    0 0 0 3px rgba(215,165,47,.13);
}

#grh-live-hub .grh-live-title{
  color:var(--black);

  font-size:18px;
  line-height:1.2;
  font-weight:900;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#grh-live-hub .grh-live-subtitle{
  margin-top:4px;

  color:var(--muted);

  font-size:12px;
  line-height:1.35;
  font-weight:600;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* BUTTONS */

#grh-live-hub .grh-live-button{
  flex:0 0 auto;

  min-width:140px;
  min-height:46px;

  padding:0 16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  border-radius:9px;

  font-family:Arial,Helvetica,sans-serif;

  font-size:11px;
  line-height:1;
  font-weight:900;

  letter-spacing:.04em;

  text-decoration:none !important;

  cursor:pointer;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

#grh-live-hub .grh-live-button-primary{
  border:2px solid var(--red);
  background:var(--red);
  color:#fff;
}

#grh-live-hub .grh-live-button-primary:hover{
  background:var(--red-dark);
  border-color:var(--red-dark);
  transform:translateY(-1px);
}

#grh-live-hub .grh-live-button-primary.is-playing{
  background:var(--cream);
  border-color:var(--gold-dark);
  color:#725616;
}

#grh-live-hub .grh-live-button-secondary{
  border:2px solid #ddb8ba;
  background:#fff;
  color:var(--red) !important;
}

#grh-live-hub .grh-live-button-secondary:hover{
  background:#fff5f5;
  border-color:var(--red);
  transform:translateY(-1px);
}

#grh-live-hub .grh-live-button-secondary.is-live{
  background:var(--red);
  border-color:var(--red);
  color:#fff !important;
}


/* YOUTUBE THUMBNAIL */

#grh-live-hub .grh-youtube-thumb-wrap{
  position:relative;

  width:120px;
  flex:0 0 120px;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:#fff;

  border:1px solid #ddd;
  border-radius:9px;

  box-shadow:
    0 3px 9px rgba(0,0,0,.08);
}

#grh-live-hub .grh-youtube-placeholder{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      145deg,
      var(--red),
      var(--red-dark)
    );

  color:#fff;

  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
}

#grh-live-hub .grh-youtube-thumb{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
}

#grh-live-hub .grh-live-kicker.is-live::before{
  content:"●";
  color:var(--red);
}


/* WORDPRESS / KADENCE SAFETY */

#grh-live-hub button{
  -webkit-appearance:none !important;
  appearance:none !important;
  margin:0 !important;
  text-transform:none !important;
}


/* MOBILE */

@media(max-width:650px){

  #grh-live-hub{
    border-width:2px;
    border-radius:11px;
  }

  #grh-live-hub .grh-live-row{
    gap:11px;
    min-height:0;
    padding:14px;
  }

  #grh-live-hub .grh-live-logo-wrap{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  #grh-live-hub .grh-youtube-thumb-wrap{
    width:96px;
    flex-basis:96px;
  }

  #grh-live-hub .grh-live-title{
    font-size:15px;
  }

  #grh-live-hub .grh-live-subtitle{
    font-size:11px;
  }

  #grh-live-hub .grh-live-button{
    min-width:112px;
    min-height:42px;
    padding:0 11px;
    font-size:10px;
  }

}

@media(max-width:540px){

  #grh-live-hub .grh-live-row{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  #grh-live-hub .grh-live-copy{
    flex:1 1 calc(100% - 68px);
  }

  #grh-live-hub .grh-youtube-row .grh-live-copy{
    flex:1 1 calc(100% - 110px);
  }

  #grh-live-hub .grh-live-button{
    width:100%;
  }

}

/* 0.9.2 Batch 4 no-schedule artwork. The component's authored 120/96 slots are unchanged. */
#grh-live-hub .grh-youtube-placeholder[hidden]{display:none!important}
#grh-live-hub .grh-youtube-placeholder{background:#0b0b0b;color:transparent;font-size:0;letter-spacing:0}
#grh-live-hub .grh-youtube-placeholder picture,#grh-live-hub .grh-youtube-placeholder img{display:block;width:100%;height:100%}
#grh-live-hub .grh-youtube-placeholder img{object-fit:contain}