/* v87.4 – stage/program card hover + image fit fix
   Goal:
   1) keep the image visible on hover/focus instead of losing it to generic button background rules
   2) make the athlete fit better inside the card by using contain-style placement instead of aggressive cover cropping
*/

/* Program cards should behave like visual cards, not generic buttons */
.stage-choice,
.onboarding-program{
  background-color:#07101d !important;
  background-repeat:no-repeat !important;
  background-size:auto 92% !important;
  background-position:right 10px bottom 0 !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

/* Preserve image on hover/focus by explicitly restating the image layers */
.stage-choice[data-stage="Stage 1"], .onboarding-program[data-stage="Stage 1"]{background-image:var(--v87-stage1) !important;}
.stage-choice[data-stage="Stage 2"], .onboarding-program[data-stage="Stage 2"]{background-image:var(--v87-stage2) !important;}
.stage-choice[data-stage="Stage 3"], .onboarding-program[data-stage="Stage 3"]{background-image:var(--v87-stage3) !important;}

.stage-choice::before,
.onboarding-program::before{
  background:
    linear-gradient(90deg, rgba(4,7,14,.94) 0%, rgba(4,7,14,.90) 34%, rgba(4,7,14,.66) 58%, rgba(4,7,14,.34) 78%, rgba(4,7,14,.18) 100%),
    linear-gradient(180deg, rgba(4,7,14,.12) 0%, rgba(4,7,14,.24) 40%, rgba(4,7,14,.84) 100%) !important;
}
.stage-choice::after,
.onboarding-program::after{
  background:
    linear-gradient(135deg, rgba(34,230,255,.12) 0%, rgba(34,230,255,0) 44%),
    linear-gradient(315deg, rgba(214,255,0,.10) 0%, rgba(214,255,0,0) 28%) !important;
}

/* Hover/focus/active: tone the card, but keep the art */
.stage-choice:hover,
.stage-choice:focus-visible,
.onboarding-program:hover,
.onboarding-program:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(34,230,255,.42) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28), 0 0 28px rgba(34,230,255,.10) !important;
  filter:brightness(1.04) saturate(1.03);
}
.stage-choice:hover::before,
.stage-choice:focus-visible::before,
.onboarding-program:hover::before,
.onboarding-program:focus-visible::before{
  background:
    linear-gradient(90deg, rgba(4,7,14,.88) 0%, rgba(4,7,14,.82) 34%, rgba(4,7,14,.56) 58%, rgba(4,7,14,.28) 78%, rgba(4,7,14,.12) 100%),
    linear-gradient(180deg, rgba(34,230,255,.04) 0%, rgba(4,7,14,.12) 40%, rgba(4,7,14,.78) 100%) !important;
}
.stage-choice:hover::after,
.stage-choice:focus-visible::after,
.onboarding-program:hover::after,
.onboarding-program:focus-visible::after{
  opacity:.92;
}

/* Active card stays stronger but still image-first */
.stage-choice.active,
.onboarding-program.active{
  filter:none;
}
.stage-choice.active::before,
.onboarding-program.active::before{
  background:
    linear-gradient(90deg, rgba(4,7,14,.86) 0%, rgba(4,7,14,.78) 34%, rgba(4,7,14,.50) 58%, rgba(4,7,14,.24) 78%, rgba(4,7,14,.08) 100%),
    linear-gradient(180deg, rgba(34,230,255,.05) 0%, rgba(4,7,14,.12) 42%, rgba(4,7,14,.72) 100%) !important;
}

/* Text area should sit more clearly on the left */
.stage-choice,
.onboarding-program{
  align-content:end !important;
  justify-items:start !important;
  text-align:left !important;
}
.stage-choice b,
.onboarding-program b,
.onboarding-program strong,
.stage-choice span,
.onboarding-program span{
  max-width:min(56%, 250px) !important;
}
.stage-choice b,
.onboarding-program b{
  text-shadow:0 4px 18px rgba(0,0,0,.28);
}

/* Fine-tune each card art placement */
.stage-choice[data-stage="Stage 1"],
.onboarding-program[data-stage="Stage 1"]{
  background-position:right 6px bottom 0 !important;
  background-size:auto 96% !important;
}
.stage-choice[data-stage="Stage 2"],
.onboarding-program[data-stage="Stage 2"]{
  background-position:right 4px bottom 0 !important;
  background-size:auto 98% !important;
}
.stage-choice[data-stage="Stage 3"],
.onboarding-program[data-stage="Stage 3"]{
  background-position:right 2px bottom 2px !important;
  background-size:auto 92% !important;
}

/* Height adjustments for better composition */
.stage-choice,
.onboarding-program{
  min-height:236px !important;
}

/* On mobile, still show the athlete properly without weird cuts */
@media(max-width:900px){
  .stage-choice,
  .onboarding-program{
    min-height:198px !important;
    background-size:auto 90% !important;
    background-position:right 8px bottom 0 !important;
  }
  .stage-choice b,
  .onboarding-program b,
  .onboarding-program strong,
  .stage-choice span,
  .onboarding-program span{
    max-width:58% !important;
  }
}

/* Mid-width screens: a touch more image room */
@media(min-width:901px) and (max-width:1180px){
  .stage-choice,
  .onboarding-program{
    min-height:220px !important;
  }
  .stage-choice b,
  .onboarding-program b,
  .onboarding-program strong,
  .stage-choice span,
  .onboarding-program span{
    max-width:52% !important;
  }
}