/* OFFICIAL2: complete photo captions and a responsive program navigator. */

html body[data-page][data-page].program-detail-page main.inside-page {
  overflow: visible !important;
}

html body[data-page][data-page] main.has-program-quicknav {
  overflow: visible !important;
}

html body[data-page][data-page] main .program-quicknav {
  --program-nav-offset: var(--v6-header, 4.75rem);
  position: sticky !important;
  top: var(--program-nav-offset) !important;
  z-index: 890;
  width: min(calc(100% - 2rem), var(--v6-content, 86rem));
  margin: .75rem auto 1rem;
  padding: .55rem;
  gap: .45rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 1rem;
  border: 1px solid rgba(0, 38, 87, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 9px 24px rgba(0, 31, 72, .08);
  -webkit-backdrop-filter: saturate(145%) blur(16px);
  backdrop-filter: saturate(145%) blur(16px);
  transition: border-radius .2s ease, box-shadow .2s ease, background-color .2s ease;
}

html body[data-page][data-page] main .program-quicknav.is-scrolled {
  border-color: rgba(10, 114, 193, .2);
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 14px 32px rgba(0, 31, 72, .14);
}

html body[data-page][data-page] main .program-quicknav > span {
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: .45rem .72rem;
  color: var(--v6-navy-900, #002657);
  border: 1px solid rgba(0, 38, 87, .1);
  border-radius: .72rem;
  background: #fff;
  box-shadow: 6px 0 14px rgba(255, 255, 255, .96);
  font-size: .7rem;
  letter-spacing: .085em;
}

html body[data-page][data-page] main .program-quicknav a {
  min-height: 2.75rem;
  border-radius: .72rem;
}

html body[data-page][data-page] main .program-quicknav a[aria-current="page"] {
  color: #fff;
  border-color: var(--v6-navy-900, #002657);
  background: linear-gradient(135deg, var(--v6-navy-900, #002657), var(--v6-blue-700, #075fa8));
  box-shadow: 0 7px 16px rgba(0, 38, 87, .18);
}

/* OFFICIAL2 desktop caption centering: outrank historical inset shorthands. */
@media (min-width: 701px) {
  html body[data-page][data-page] main :where(
    .visual-caption,
    .preparation-label,
    .program-detail-hero__caption,
    .v5-home-hero__badge
  ) {
    top: auto !important;
    right: auto !important;
    bottom: clamp(.8rem, 1.6vw, 1.25rem) !important;
    left: 50% !important;
    width: min(calc(100% - 2rem), 36rem) !important;
    max-width: 36rem !important;
    transform: translateX(-50%) !important;
  }
}
@media (max-width: 700px) {
  html body[data-page][data-page] main .program-quicknav {
    width: calc(100% - .8rem);
    margin: .5rem .4rem 1rem;
    padding: .42rem;
    border-radius: .9rem;
    scrollbar-width: none;
  }

  html body[data-page][data-page] main .program-quicknav::-webkit-scrollbar {
    display: none;
  }

  html body[data-page][data-page] main .program-quicknav > span {
    min-height: 2.65rem;
    padding-inline: .62rem;
  }

  html body[data-page][data-page] main :where(
    .school-hero-visual,
    .preparation-visual,
    .program-detail-hero__media,
    .v5-home-hero__media
  ) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page][data-page] main :where(
    .school-hero-visual,
    .preparation-visual,
    .program-detail-hero__media,
    .v5-home-hero__media
  )::after {
    display: none !important;
    content: none !important;
  }

  html body[data-page][data-page] main :where(
    .school-hero-visual,
    .preparation-visual,
    .program-detail-hero__media,
    .v5-home-hero__media
  ) > picture {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(18rem, 112vw, 30rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body[data-page][data-page] main :where(
    .school-hero-visual,
    .preparation-visual,
    .program-detail-hero__media,
    .v5-home-hero__media
  ) > picture > img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  html body[data-page][data-page] main :where(
    .visual-caption,
    .preparation-label,
    .program-detail-hero__caption,
    .v5-home-hero__badge
  ) {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: max-content !important;
    max-height: none !important;
    margin: 0 !important;
    padding: .9rem 1rem 1rem !important;
    overflow: visible !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  html body[data-page][data-page] main :where(
    .visual-caption,
    .preparation-label,
    .program-detail-hero__caption,
    .v5-home-hero__badge
  ) :where(span, strong) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page][data-page] main .program-quicknav {
    scroll-behavior: auto;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body[data-page][data-page] main .program-quicknav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  html body[data-page][data-page] main .program-quicknav,
  html body[data-page][data-page] main .program-quicknav > span,
  html body[data-page][data-page] main .program-quicknav a {
    color: CanvasText;
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}
