/* After BDS */
.afterbds { background: #111e31; }

/* Page-specific touches on the shared course hero. The artwork is built as a
   full-bleed banner (dark left, photograph right), so it stays the background
   and the copy keeps to the left half rather than sitting in a grid column. */
.ab-hero { min-height: 620px; padding: 96px 24px 104px; border-radius: 0; background: linear-gradient(90deg, rgba(10, 18, 30, .96) 0%, rgba(10, 18, 30, .9) 38%, rgba(10, 18, 30, .3) 72%, rgba(10, 18, 30, .08)), url(../../img/afterbds/hero.jpg) center / cover no-repeat; }
.ab-hero::before { display: none; }
.ab-hero .course-hero__inner { grid-template-columns: minmax(0, 1fr); align-content: center; }
.ab-hero .course-hero__copy { max-width: 660px; }
.ab-hero h1 span { max-width: 570px; font-size: .42em; line-height: 1.45; }

@media (max-width: 767px) {
  /* The left-to-right fade only works while the dark half is on screen. On a
     phone the crop is mostly photograph, so darken it evenly instead. */
  .ab-hero { min-height: 0; padding: 56px 20px 64px; background-image: linear-gradient(180deg, rgba(10, 18, 30, .95), rgba(10, 18, 30, .86) 55%, rgba(10, 18, 30, .78)), url(../../img/afterbds/hero.jpg); background-position: 68% center; }
  .ab-hero h1 span { font-size: .5em; }
}
@media (max-width: 767px) { .afterbds .speaker { padding: 56px 24px; } }