/* Upcoming-event slate: the poster (or logo) fills the frame, with a lower-third bar in
   brand colors anchored to its bottom edge.

   Plain CSS because it ships in two places: imported into the site's Sass build, and
   linked on its own by partner embeds, which carry no Bootstrap or brand variables.
   Sizes are in container units so the bar keeps its proportions in any size of frame,
   from a small sidebar embed to the full watch page. */
.upcoming-slate {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 50, 161, 0.9), rgba(220, 0, 40, 0.7)), #000;
  color: #fff;
}

.upcoming-slate__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centered in the space above the bar. */
.upcoming-slate__logo {
  position: absolute;
  top: 40%;
  left: 50%;
  height: 32cqh;
  transform: translate(-50%, -50%);
}

.upcoming-slate__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  background: rgba(0, 50, 161, 0.88);
  border-top: max(2px, 0.4cqw) solid #dc0028;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  line-height: 1.1;
}

.upcoming-slate__label {
  display: flex;
  align-items: center;
  padding: 1.4cqw 2.4cqw;
  background: #dc0028;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: max(9px, 1.8cqw);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.upcoming-slate__time {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 1.4cqw 2.4cqw;
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: max(12px, 3.6cqw);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}