.c8000-media {
  border-radius: 0.75rem;
}

.c8000-hero-wrap p {
  padding-bottom: 0;
  line-height: inherit;
  color: inherit;
}

.c8000-scrim {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13, 18, 61, 0.85) 0%, rgba(13, 18, 61, 0.35) 45%, transparent 75%);
}

.c8000-cta {
  position: relative;
  z-index: 2;
}

@media (min-width: 1026px) {
  .c8000-scrim {
    background: linear-gradient(to right, rgba(13, 18, 61, 0.75) 0%, rgba(13, 18, 61, 0.35) 35%, transparent 65%);
  }

  .c8000-cta {
    position: absolute;
    bottom: 6rem;
    right: 5.5rem;
  }

  .c8000-cta .btn-cta {
    width: auto;
    border-radius: 4px;
  }

  /* Match the main nav's fluid width (component/static/component/css/navigation_update/navigation_update.css)
     continuously from 1026px up, so the hero image's outer edges track the nav's logo/support-link
     edges throughout the resize: fixed 3rem side padding from 1026px, then capped at a 1824px-wide
     content area beyond 1920px (same two-tier shape the nav itself uses), instead of growing full-bleed. */
  .c8000-hero-wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  /* Figma: heading/subheading sit 88px from the image's left edge, not centered with the site container */
  .c8000-hero-wrap .container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .c8000-hero-wrap .row {
    margin-left: 0;
    margin-right: 0;
  }

  .c8000-hero-wrap .col-12 {
    padding-left: 88px;
  }

  .c8000-actions {
    position: relative;
    z-index: 3;
    padding-top: 0;
    margin-top: -3rem;
  }
}

@media (min-width: 1920px) {
  .c8000-hero-wrap {
    padding-left: calc((100vw - 1824px) / 2);
    padding-right: calc((100vw - 1824px) / 2);
  }
}

/* Between 1026px and 1210px the image is shorter (still 21:9) than the headline's
   full 88px size needs: near 1026px "In Control." wraps onto a second line, and
   even once it stops wrapping the subtext still runs past the image's bottom
   edge and gets clipped, easing only as the image regains height toward 1210px.
   Shrinking the headline across this whole band keeps it on one line and inside
   the image; 1210px and up has enough image height for the full 88px size. */
@media (min-width: 1026px) and (max-width: 1210px) {
  .c8000-hero-wrap h1 {
    font-size: 64px;
  }
}

/* Fix layout issues between 1026px and 1210px: the image is shorter here (still
   21:9) but the headline keeps its full lg font size, so the default CTA/actions
   offsets are tight enough to overlap the heading and the quick-action tiles. */
@media (min-width: 1026px) and (max-width: 1210px) {
  .c8000-hero-wrap .col-12 {
    padding-left: 88px;
    padding-right: 2rem;
  }

  .c8000-actions {
    margin-top: 0;
    padding-top: 2rem;
  }

  .c8000-cta {
    position: absolute;
    bottom: 3rem;
    right: 1rem;
  }
}

/* Adjust card outlined spacing for consistency */
@media (min-width: 1026px) {
  .card-outlined {
    padding: 1.75rem;
  }
}