/* ==========================================================================
   Section 5 — Mentorship
   Source of truth: design_handoff_sections/README.md ("Section 5").
   ========================================================================== */

.mentorship {
  --rd: 1.1s;

  position: relative;
  background: var(--black-deep);
  padding: var(--space-132) var(--gutter) var(--space-120, 120px);
  overflow: hidden;
}

/* --- Photo band ----------------------------------------------------------
   Occupies only the top 560px; the copy sits over its lower half. */

.mentorship__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 560px;
  overflow: hidden;
  pointer-events: none;
}

.mentorship__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 52%;
  /* Flipped so the subject faces the copy rather than away from it. */
  transform: scaleX(-1);
  filter: saturate(.9) brightness(.86) contrast(1.06);
}

.mentorship__band::before,
.mentorship__band::after {
  content: '';
  position: absolute;
  inset: 0;
}

.mentorship__band::before {
  background: linear-gradient(90deg,
    rgba(6, 5, 4, .96) 0%,
    rgba(6, 5, 4, .86) 22%,
    rgba(6, 5, 4, .5) 44%,
    rgba(6, 5, 4, .12) 66%,
    rgba(6, 5, 4, 0) 100%);
}

.mentorship__band::after {
  background: linear-gradient(to bottom,
    rgba(6, 5, 4, .55) 0%,
    rgba(6, 5, 4, 0) 22%,
    rgba(6, 5, 4, .1) 58%,
    rgba(6, 5, 4, .86) 86%,
    rgba(6, 5, 4, 1) 100%);
}

/* --- Intro ---------------------------------------------------------------- */

.mentorship__intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-26);
  max-width: 660px;
}

/* Same problem as Ready To Win, and worse: under the right-hand half of the
   lede sit the car's chrome and the lit building behind it. A scrim that
   travels with the copy, so the G-Wagon keeps its lit front end. */
.mentorship__intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* See the note in ready.css: this reaches the top of the band, not the top
     of the copy, so no lit strip survives above the eyebrow. */
  inset: calc(var(--space-132) * -1) -42% -46px calc(var(--gutter) * -1);
  pointer-events: none;
  background: radial-gradient(108% 96% at 6% 58%,
    rgba(6, 5, 4, .95) 0%,
    rgba(6, 5, 4, .9) 42%,
    rgba(6, 5, 4, .6) 70%,
    rgba(6, 5, 4, 0) 100%);
}

.mentorship__intro .section-h2 { font-size: 78px; }
.mentorship__lede { max-width: 56ch; }

/* --- Three-step row ------------------------------------------------------- */

.mentorship__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 72px;
  border-top: 1px solid rgba(217, 169, 58, .22);
}

.mentorship__step {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 30px 0;
}

.mentorship__step:first-child { padding-left: 0; }

.mentorship__step + .mentorship__step {
  border-left: 1px solid rgba(217, 169, 58, .18);
}

.mentorship__index {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(217, 169, 58, .7);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
}

.mentorship__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--bone);
  text-wrap: pretty;
}

.mentorship__step-body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 241, 230, .58);
  text-wrap: pretty;
}

/* --- Elite Mentorship card ------------------------------------------------ */

.mentorship__card {
  position: relative;
  z-index: 1;
  margin-top: 100px;
  background: var(--black-card-2);
  border: 1px solid rgba(217, 169, 58, .3);
  box-shadow: var(--shadow-mentor);
  overflow: hidden;
}

.mentorship__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-metal);
}

.mentorship__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(48% 66% at 15% 24%,
    rgba(168, 112, 28, .22) 0%, rgba(12, 10, 7, 0) 72%);
}

.mentorship__card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 392px 1fr;
  column-gap: var(--space-24);
  align-items: start;
  padding: 58px 48px 54px;
}

.mentorship__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-figure);
}

/* Was 13px Karla 300 — fainter and smaller than the pitch paragraph below it,
   which left the card with no heading at all between its eyebrow and its 82px
   price. This is the offer's name. */
.mentorship__sub {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.14;
  letter-spacing: -.014em;
  color: var(--bone);
  text-wrap: pretty;
}

.mentorship__price {
  display: block;
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 82px;
  line-height: .86;
  letter-spacing: -.032em;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
}

/* Clears the price above it. At 82px on a .86 line-height the digits overflow
   their own line box by ~13px, so the handoff's implied zero gap puts the label
   on top of them. The 82px and the .86 are the spec's; this is the clearance
   they need. */
.mentorship__once {
  display: block;
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .74);
}

/* Matches .pkg__price-mark: the symbol sits smaller and on the cap line. */
.mentorship__price-mark {
  font-size: .52em;
  vertical-align: .38em;
  margin-right: .03em;
  letter-spacing: 0;
}

.mentorship__pitch {
  margin: 30px 0 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(246, 241, 230, .66);
  text-wrap: pretty;
}

.mentorship__cta { margin-top: 34px; }

.mentorship__included {
  border-left: 1px solid rgba(217, 169, 58, .16);
  padding-left: 52px;
}

.mentorship__included-title {
  margin-bottom: 26px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(217, 169, 58, .86);
}

.mentorship__included .bullets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-44);
  row-gap: 14px;
  font-size: 14px;
}

/* Twenty lines of it — the markers were competing with the words. */
.mentorship__included .bullets li::before { background: rgba(217, 169, 58, .5); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .mentorship__intro .section-h2 { font-size: clamp(38px, 7vw, 78px); }
  .mentorship__card-inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-44);
    padding: 44px 34px 40px;
  }
  /* Single column: "What's included" moves below the price, so the rule that
     separated the two columns becomes a rule above the list. */
  .mentorship__included {
    border-left: none;
    border-top: 1px solid rgba(217, 169, 58, .16);
    padding-left: 0;
    padding-top: var(--space-34);
  }
}

@media (max-width: 900px) {
  .mentorship__steps {
    grid-template-columns: 1fr;
    row-gap: var(--space-30);
  }
  .mentorship__step {
    padding: var(--space-26) 0 0;
    border-left: none;
  }
  .mentorship__step + .mentorship__step {
    border-left: none;
    border-top: 1px solid rgba(217, 169, 58, .18);
  }
  .mentorship__band { height: 420px; }
}

@media (max-width: 768px) {
  /* Starts the copy near the foot of the band rather than at its top. The
     eyebrow and headline still sit on the photograph — which is the point —
     but the body below them lands on flat black instead of on the car. */
  .mentorship { padding: 196px var(--gutter) var(--space-72); }
  /* See the note in ready.css: the mobile band's own scrim already does this. */
  .mentorship__intro::before { display: none; }

  .mentorship__card-inner { padding: 34px 22px 32px; }
  .mentorship__steps { margin-top: var(--space-44); }
  .mentorship__step-title { font-size: 22px; }
  .mentorship__included .bullets { row-gap: 12px; }
  .mentorship__pitch { font-size: 14.5px; }

  /* Same as Ready To Win: full-width copy gets no cover from a horizontal
     scrim, so the band shortens and darkens vertically instead. */
  .mentorship__band { height: 330px; }

  .mentorship__band::before {
    background: linear-gradient(90deg,
      rgba(6, 5, 4, .84) 0%, rgba(6, 5, 4, .72) 100%);
  }

  .mentorship__band::after {
    background: linear-gradient(to bottom,
      rgba(6, 5, 4, .5) 0%,
      rgba(6, 5, 4, .3) 26%,
      rgba(6, 5, 4, .74) 60%,
      rgba(6, 5, 4, .97) 85%,
      rgba(6, 5, 4, 1) 100%);
  }
  .mentorship__price { font-size: 64px; }
  .mentorship__included .bullets { grid-template-columns: 1fr; }
  .mentorship__card { margin-top: var(--space-56); }
}