/* Stream block. Colours use your existing variables where they exist;
   the fallbacks after the comma keep it sane if they don't. */

.stream{
  margin: 48px 0;
}

.stream__head{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.stream__badge{
  background: #e2495b;
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 999px;
  /* a quiet pulse, not a flashing banner */
  animation: streamPulse 2.4s ease-in-out infinite;
}

@keyframes streamPulse{
  0%, 100% { opacity: 1 }
  50%      { opacity: .55 }
}

@media (prefers-reduced-motion: reduce){
  .stream__badge{ animation: none }
}

.stream__title{
  font-size: 20px;
  margin: 0;
}

.stream__meta{
  font: 400 13px system-ui, sans-serif;
  opacity: .7;
}

.stream__player{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0e0e10;
}

.stream__player iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stream__cta{
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #9146ff;
  color: #fff;
  font: 700 14px system-ui, sans-serif;
  text-decoration: none;
}

.stream__cta:hover{ background: #7d33e8 }