/* Homepage course promotion. All selectors are isolated to this hero modifier. */
.hero--with-courses .hero-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, .95fr);
  gap: 66px;
  align-items: center;
}
.hero--with-courses .hero-copy { max-width: 640px; padding-right: 0; }
.hero--with-courses .hero-course-promo {
  position: relative;
  display: block;
  isolation: isolate;
  width: 100%;
  max-width: 365px;
  min-height: 171px;
  justify-self: end;
  padding: 17px 22px 16px;
  margin-top: 25px;
  border: 1px solid rgba(202, 167, 118, .58);
  border-top: 3px solid var(--gold-soft);
  background: linear-gradient(145deg, rgba(5, 13, 34, .93), rgba(10, 31, 74, .88));
  color: #fff;
  box-shadow: 0 17px 50px rgba(5, 13, 34, .2);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  overflow: hidden;
}
.hero--with-courses .hero-course-promo::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -35px;
  bottom: -55px;
  width: 195px;
  height: 195px;
  border: 1px solid rgba(202, 167, 118, .13);
  transform: rotate(30deg);
  pointer-events: none;
}
.hero--with-courses .hero-course-promo:hover { transform: translateY(-4px); border-color: var(--gold-soft); background: linear-gradient(145deg, rgba(5, 13, 34, .98), rgba(17, 42, 92, .94)); color: #fff; }
.hero--with-courses .hero-course-promo:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.hero--with-courses .oc-promo-kicker { display: block; margin-bottom: 8px; color: var(--gold-soft); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.hero--with-courses .hero-course-promo > strong { position: relative; display: block; max-width: none; color: #fff; font-size: 22px; font-weight: 600; line-height: 1.32; letter-spacing: -.022em; text-wrap: balance; }
.hero--with-courses .oc-promo-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; margin-top: 12px; border-top: 1px solid rgba(202, 167, 118, .3); color: var(--gold-soft); font-size: 12px; font-weight: 600; line-height: 1.6; }
.hero--with-courses .oc-promo-link svg { width: 23px; height: 23px; flex: 0 0 23px; transition: transform .2s ease; }
.hero--with-courses .hero-course-promo:hover .oc-promo-link svg { transform: translateX(3px); }
.hero--with-courses .oc-promo-mark { position: absolute; z-index: -1; bottom: 17px; right: 13px; color: rgba(202, 167, 118, .06); font-size: 100px; line-height: 1; font-weight: 400; user-select: none; pointer-events: none; }
@media (max-width: 1100px) {
  .hero--with-courses .hero-grid { grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 35px; }
  .hero--with-courses .hero-course-promo { padding: 17px 20px 16px; }
  .hero--with-courses .hero-course-promo > strong { font-size: 21px; }
}
@media (max-width: 860px) {
  .hero--with-courses .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 33px; }
  .hero--with-courses .hero-copy { max-width: 640px; }
  .hero--with-courses .hero-course-promo { justify-self: start; max-width: 640px; min-height: 0; margin-top: 0; padding: 16px 22px; }
  .hero--with-courses .oc-promo-kicker { margin-bottom: 7px; }
  .hero--with-courses .hero-course-promo > strong { max-width: 21em; }
  .hero--with-courses .oc-promo-link { padding-top: 9px; margin-top: 10px; }
  .hero--with-courses .oc-promo-mark { font-size: 92px; }
}
@media (max-width: 480px) {
  .hero--with-courses .hero-grid { gap: 28px; }
  .hero--with-courses .hero-course-promo { padding: 9px 20px 8px; }
  .hero--with-courses .oc-promo-kicker { font-size: 9px; margin-bottom: 4px; }
  .hero--with-courses .hero-course-promo > strong { font-size: 19px; line-height: 1.25; }
  .hero--with-courses .oc-promo-link { font-size: 11px; padding-top: 5px; margin-top: 6px; }
  .hero--with-courses .oc-promo-link svg { width: 19px; height: 19px; flex-basis: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--with-courses :is(.hero-course-promo, .oc-promo-link svg) { transition: none; }
  .hero--with-courses .hero-course-promo:hover,
  .hero--with-courses .hero-course-promo:hover .oc-promo-link svg { transform: none; }
}
@media print {
  .hero--with-courses .hero-grid { display: block; }
  .hero--with-courses .hero-course-promo { display: none; }
}