/* ==========================================================================
   Program register / course-detail page
   A Udemy-style read: a dark banner carrying the course intro on the left, a
   floating "cart" card overlapping it on the right, then the full curriculum
   in a wide reading column with the card staying in view beside it. One grid
   spans banner + body so the card can bridge the dark band and the white page
   below it — no fragile negative-margin hacks.
   ========================================================================== */

/* The global rule reserves the floating header's height as top padding on
   main's first child, which would show white above the banner. Drop it so the
   dark band runs to the very top; the intro's own top padding clears the pill. */
main > [data-page="programs-register"] {
  padding-block-start: 0;
}

/* ---- Section shell ---- */
.section.prx {
  padding-block: 0;
  /* `clip` contains the full-bleed band's overflow like `hidden` would, but
     without creating a scroll container — so the sticky register card keeps
     holding as the page scrolls (overflow:hidden here breaks sticky). */
  overflow: clip;
}

/* ---- Layout: mobile-first single column (intro → card → curriculum) ---- */
.prx__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  /* How far the white trust card drops below the blue band — roughly half the
     card's height, so it reads as half in the band, half on the page. */
  --prx-trust-drop: clamp(2.5rem, 5vw, 3.25rem);
}
/* prx__main is transparent to the layout so intro, card and content order
   freely around each other at every width. */
.prx__main {
  display: contents;
}
.prx__band {
  display: none;
}

.prx__intro {
  order: 1;
  position: relative;
  padding-top: calc(var(--nav-block) + var(--space-8));
  padding-bottom: var(--space-6);
  color: var(--fg-on-brand);
}
/* On mobile the intro spans the full container, so a viewport-centred
   full-bleed reads correctly here. On desktop the shared .prx__band handles
   the band instead (see the min-width block). */
.prx__intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  background:
    radial-gradient(38rem 22rem at 12% 8%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(34rem 24rem at 92% 0%, rgba(75, 140, 224, 0.35), transparent 62%),
    linear-gradient(118deg, var(--ls-navy-950) 0%, var(--ls-navy-800) 58%, var(--ls-navy-700) 100%);
}
.prx__intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, black, transparent 75%);
}

.prx__aside {
  order: 2;
  /* Clear the trust card where it overhangs the band bottom (mobile stack;
     the desktop block overrides this margin). */
  margin-top: var(--prx-trust-drop);
}

.prx__content {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: clamp(var(--space-12), 7vw, var(--space-20));
}

/* ---- Intro copy ---- */
.prx__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.prx__crumbs a {
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--duration, 200ms) var(--ease, ease);
}
.prx__crumbs a:hover {
  color: #fff;
}
.prx__crumbs svg {
  width: 0.9rem;
  height: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}
.prx__crumbs [data-hero-grade] {
  color: #fff;
}

.prx__title {
  margin-top: var(--space-4);
  font-size: clamp(2.25rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: #fff;
}
.prx__lead {
  margin-top: var(--space-5);
  max-width: 40rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed, 1.6);
  color: rgba(255, 255, 255, 0.88);
}

.prx__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.prx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.prx-badge--accent {
  background: var(--accent);
  border-color: transparent;
}

.prx__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
  padding: 0;
  margin-top: var(--space-6);
}
.prx__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
}
.prx__meta-item strong {
  color: #fff;
  font-weight: 700;
}
.prx__meta-item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: #fff;
}
.prx__meta-sub {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 400;
}

.prx__by {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}
.prx__by strong {
  color: #fff;
  font-weight: 700;
}

/* A white stats card sitting on the banner — the trust read before the fold. */
.prx__trust {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  /* Drop the card below the band so its lower half sits on the white page. */
  margin-bottom: calc(var(--prx-trust-drop) * -1);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.prx__trust-item {
  text-align: center;
  position: relative;
}
.prx__trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--space-2) * -1);
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--border);
}
.prx__trust-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
}
.prx__trust-label {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.3;
}

/* ---- Floating cart card ---- */
/* A shorter thumbnail keeps the slimmer card compact and lets more of the
   price / register controls sit above the fold. */
.prx__aside .course-card__thumb {
  aspect-ratio: 16 / 5;
}
.prx__aside .course-card {
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration, 220ms) var(--ease, ease),
    box-shadow var(--duration, 220ms) var(--ease, ease);
}
.prx__aside .course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(16, 25, 43, 0.22);
}
.course-card__price-note {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-muted);
}
.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: calc(var(--space-2) * -1);
}
.course-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.course-card__meta-item svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--accent);
}

/* ---- Desktop: two-column grid, card bridges the band ---- */
@media (min-width: 981px) {
  .prx__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--prx-card-w, 20rem);
    grid-template-rows: auto 1fr;
    column-gap: clamp(var(--space-8), 4vw, var(--space-12));
    align-items: start;
  }

  /* Full-width dark band, occupying the first row across both columns so its
     height auto-matches the intro; the card in column 2 overlaps it. */
  .prx__band {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    position: relative;
    z-index: 0;
    align-self: stretch;
  }
  .prx__band::before {
    content: "";
    position: absolute;
    inset: 0;
    left: calc(-50vw + 50%);
    width: 100vw;
    background:
      radial-gradient(46rem 26rem at 10% 6%, rgba(255, 255, 255, 0.10), transparent 58%),
      radial-gradient(40rem 28rem at 96% -8%, rgba(75, 140, 224, 0.38), transparent 60%),
      linear-gradient(118deg, var(--ls-navy-950) 0%, var(--ls-navy-800) 58%, var(--ls-navy-700) 100%);
  }
  .prx__band::after {
    content: "";
    position: absolute;
    inset: 0;
    left: calc(-50vw + 50%);
    width: 100vw;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 62% 20%, black, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 90% at 62% 20%, black, transparent 72%);
  }

  .prx__intro {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    padding-bottom: var(--space-6);
  }
  /* The band handles the dark on desktop. */
  .prx__intro::before,
  .prx__intro::after {
    display: none;
  }
  /* Cap the intro so the title, lead, meta and trust stats sit in one tight
     left-aligned block instead of spreading across the full wide column. */
  .prx__intro > * {
    max-width: min(44rem, 100%);
  }
  .prx__intro .prx__lead {
    max-width: min(40rem, 100%);
  }

  .prx__content {
    grid-column: 1;
    grid-row: 2;
    /* Clear the trust card's overhang from the band above. */
    padding-top: calc(var(--prx-trust-drop) + clamp(var(--space-6), 3vw, var(--space-10)));
  }

  .prx__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    z-index: 2;
    position: sticky;
    top: calc(var(--nav-block) + var(--space-4));
    align-self: start;
    /* Drop the card top down so it lines up with the meta / "1,000+ families
       guided" line beside the title, then it sticks to the header on scroll. */
    margin-top: calc(var(--nav-block) + clamp(12rem, 14vw, 16rem));
  }
}

@media (min-width: 1180px) {
  .prx__layout {
    --prx-card-w: 21rem;
  }
}

/* ==========================================================================
   Reading-column spacing — "What you'll get" and "Program details"
   Even rhythm between headings and their content, a touch more air between
   the outcome points and the curriculum rows than the shared course layout.
   ========================================================================== */
[data-page="programs-register"] .course__block > .h3 {
  margin-bottom: var(--space-5);
}
[data-page="programs-register"] .course__block .dot-list {
  gap: var(--space-4);
}
[data-page="programs-register"] .course__block .dot-list li {
  line-height: var(--leading-normal);
}
[data-page="programs-register"] .course__block .curric {
  gap: var(--space-2);
}
[data-page="programs-register"] .course__block .curric__row {
  padding-block: var(--space-3);
}

/* ==========================================================================
   Two-column register modal
   Left: "Share Your Details" capture fields.
   Right: "Program & Payment Details" summary + discount + amount + submit.
   Sized so the whole thing clears a laptop viewport without scrolling.
   ========================================================================== */
.reg-modal-dialog {
  max-width: min(60rem, 95vw);
}
.reg-modal {
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.reg-modal__head {
  padding-right: 2.5rem; /* clears the close button */
}
.reg-modal__head .h3 {
  margin: 0;
}
.reg-modal__sub {
  margin: var(--space-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.reg-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: start;
}

.reg-col__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);
}

.reg-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.reg-fields .reg-field--full {
  grid-column: 1 / -1;
}

/* Compact controls keep the seven fields + summary within one screen. */
.reg-modal .field-group {
  gap: 0.375rem;
}
.reg-modal .field__label {
  font-size: var(--text-xs);
}
.reg-modal .input {
  padding: 0.625rem var(--space-4);
  font-size: var(--text-sm);
}
.reg-modal .select {
  padding: 0.625rem var(--space-10) 0.625rem var(--space-4);
  font-size: var(--text-sm);
}

/* Right column — a tinted panel grouping the money side of the form. */
.reg-col--pay .reg-pay {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-tint);
}
.reg-col--pay .pay__rows {
  gap: var(--space-3);
}
.reg-col--pay .btn {
  width: 100%;
}

@media (max-width: 720px) {
  .reg-modal__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .reg-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Header over the dark banner
   Before the reader scrolls, the pill is transparent and its dark text would
   sit on the dark banner. Light it up until the pill turns solid on scroll
   (data-scrolled='true'), when the default dark text is correct again.
   ========================================================================== */
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__link,
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__login,
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__menu-btn {
  color: rgba(255, 255, 255, 0.85);
}
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__link:hover,
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__nav:not(:hover) .header__link[aria-current="page"] {
  color: #fff;
}
body[data-page="programs-register"] .header:not([data-scrolled="true"]) .header__login {
  border-color: rgba(255, 255, 255, 0.5);
}