/* Page: Level landing (Level I-IV share this file) — Figma node 549:2511 */

/* Breadcrumb styles moved to css/components/breadcrumb.css so the legal
   policy pages can share them too. */

/* ---------- Module details ---------- */
.module-details {
  position: relative;
  width: 100%;
  margin-top: var(--header-height);
  padding-block: 80px;
  overflow: hidden;
  background: var(--dark);
  border-top: 0.4px solid rgba(255, 255, 255, 0.32);
}

/* Decorative line-art, sits low behind the price box — same treatment as
   .split-section__decor on the Home page (hidden on tablet/mobile). */
.module-details__decor {
  position: absolute;
  right: 40px;
  bottom: -120px;
  width: 614px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.module-details__inner {
  position: relative;
  z-index: 1;
  display: flex;
  /* stretch (desktop only, see media query below) makes .module-details__media
     match .module-details__content's height, so the price-box's flex-grow
     sibling (the image) can push it down flush with the last line of text. */
  align-items: stretch;
  gap: 64px;
}

.module-details__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1 1 0;
  min-width: 0;
}

.module-details__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--white);
}

.module-details__texts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--white);
}

.module-details__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-details__checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-details__checklist-item img {
  flex-shrink: 0;
}

/* margin-top nudges these blocks (Live Mentorship, Level N Outcome,
   Downloadable Assets) a little further from whatever comes before them,
   on top of .module-details__texts' own 16px gap — a few extra px of
   breathing room Rodrigo asked for, not a full gap-size gap. */
.module-details__note {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

/* Wraps a note's text together with its CTA (currently just Live
   Mentorship's "Apply for private mentorship" button) — the button needs
   room to breathe below the text, unlike plain notes which stay flush. */
.module-details__note-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}

/* Downloadable Assets is a .module-details__note whose body is a bulleted
   list instead of a paragraph — base.css resets all lists to no bullets,
   so they're restored here. */
.module-details__assets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: disc;
  padding-left: 20px;
}

.module-details__media {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 0 0 auto;
  width: 670px;
  max-width: 100%;
}

.module-details__image {
  width: 100%;
  /* Grows/shrinks to whatever space is left above the price-box (desktop
     only, see media query below) so the price-box's bottom edge lands
     flush with the content column's last line, keeping the same 32px gap
     to the price-box either way. min-height:0 lets it shrink below its
     intrinsic size, which flex items don't do by default. */
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
}

/* No photo yet (Level II-IV before content lands) — flat fill instead of a
   stock placeholder image, matching the price box's surface tint. */
.module-details__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242424;
}

.module-details__image--placeholder span {
  font-family: var(--font-gotham);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--fog-white);
}

/* ---------- Price box (Figma "box" node 549:2571) ---------- */
.price-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: #242424;
}

.price-box__eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.68px;
}

.price-box__divider {
  width: 100%;
  border-top: 0.5px solid rgba(255, 255, 255, 0.32);
}

.price-box__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.price-box__info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.price-box__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--white);
}

.price-box__perks {
  display: flex;
  gap: 24px;
}

.price-box__perk {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--white);
  white-space: nowrap;
}

.price-box__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 226px;
}

.price-box__cta .btn {
  width: 100%;
}

.price-box__cta p {
  color: var(--white);
  text-align: center;
}

/* ---------- Sticky enrollment bar (UX addition — no Figma frame) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: 100%;
  background: var(--dark);
  border-top: 0.4px solid rgba(255, 255, 255, 0.32);
  transform: translateY(100%);
  /* visibility, not transform alone: a translated element is still focusable,
     so the bar's "Start Level I" link would sit in the tab order permanently
     as an invisible, unannounced focus stop. Toggled at the end of the
     transition so the slide-out still animates. This is the one intentional
     deviation from design/css/page-level.css. It changes no pixels. */
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.sticky-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s ease, visibility 0s;
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.sticky-cta__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sticky-cta__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--white);
}

.sticky-cta__note {
  color: var(--fog-white);
}

.sticky-cta .btn {
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .sticky-cta__note {
    display: none;
  }
}

/* ---------- Masterclasses included ---------- */
.masterclasses-included {
  width: 100%;
  padding-block: 80px;
  overflow: hidden;
  background: var(--dark);
}

.masterclasses-included__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.masterclasses-included__title {
  max-width: 889px;
  text-align: center;
  color: var(--white);
}

/* Prev/Next between levels — UX addition, no Figma reference. Bottom-right,
   below the masterclass cards, same secondary-button style as the rest of
   the site. Level I has no prev button, Level IV has no next button. */
.level-nav {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .module-details__inner {
    flex-direction: column;
  }

  .module-details__media {
    width: 100%;
  }

  /* Undo the desktop-only stretch-to-bottom-align behavior — mobile keeps
     its original fixed-ratio photo, unchanged. */
  .module-details__image {
    flex: 0 0 auto;
    aspect-ratio: 670 / 702;
  }

  .module-details__decor {
    display: none;
  }

  .price-box__main {
    flex-direction: column;
    align-items: stretch;
  }

  .price-box__cta {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .price-box {
    padding: 24px;
  }

  .price-box__perks {
    flex-direction: column;
    gap: 8px;
  }
}