/* hero-video.css - the top section on pages that carry an ad: copy and the h1
   on the left, a real video player on the right, stacking with the video under
   the copy on narrow screens.

   Everything here is scoped to .hero-has-video and loaded after services.css,
   so nothing in the shared sheet is overridden for pages that do not carry a
   video. Every colour, radius, glow and transition resolves from colors.css;
   no new tokens are introduced. */

.service-hero-grid.hero-has-video {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;

  /* services.css holds this row at 720px to make room for the fixed
     background wash. These pages have no wash, so the row is sized by
     its own content instead. */
  min-height: 0;
}

.hero-has-video > .hero-copy {
  max-width: none;
}

.hero-video {
  position: relative;
  z-index: 3;
}

.hero-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;

  background: var(--black);

  border: 1px solid rgba(0, 230, 255, 0.14);
  border-radius: var(--radius-md);
  box-shadow: var(--glow-cyan-soft);

  transition:
    border-color var(--transition-medium),
    box-shadow var(--transition-medium);
}

.hero-video-player:hover,
.hero-video-player:focus-visible {
  border-color: var(--border-active);
  box-shadow: var(--glow-cyan-medium);
}

/* The caption track ships unselected because the captions are already burned
   into the picture; this styles it for the case where a visitor turns it on
   from the player's own menu. */
.hero-video-player::cue {
  background: rgba(5, 7, 13, 0.72);
  color: var(--white);
}

/* Two columns need real width. Below this the copy is squeezed harder than the
   video gains, so the video drops under the text - which is also the mobile
   behaviour, so one rule covers both. */
@media (max-width: 1100px) {
  .service-hero-grid.hero-has-video {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0;
  }
}