feat(course-overview): add collapsible stage list cards

Make stage list cards collapsible with a default collapsed state for
extensions. This introduces an expand button overlay to reveal full
content when collapsed, preventing excessive initial content height.

Update titles to conditionally show "Base Stages" only if extensions
are present, otherwise show "Stages". This improves clarity and UI
consistency for courses with and without extensions.

Author: rohitpaulk

app/components/course-overview-page/stage-list-card-list.hbs

@@ -1,11 +1,16 @@
 <div class="space-y-4 w-full" ...attributes>
-  <CourseOverviewPage::StageListCard @title="Base Stages" @descriptionMarkdown={{@course.descriptionMarkdown}} @stages={{@course.sortedBaseStages}} />
+  <CourseOverviewPage::StageListCard
+    @title={{if (gt @course.extensions.length 0) "Base Stages" "Stages"}}
+    @descriptionMarkdown={{@course.descriptionMarkdown}}
+    @stages={{@course.sortedBaseStages}}
+  />
 
   {{#each @course.sortedExtensions as |extension|}}
     <CourseOverviewPage::StageListCard
       @title={{extension.name}}
       @descriptionMarkdown={{extension.descriptionMarkdown}}
       @stages={{extension.sortedStages}}
+      @isCollapsedByDefault={{true}}
     />
   {{/each}}
 </div>

app/components/course-overview-page/stage-list-card.hbs

@@ -1,5 +1,6 @@
 <div
-  class="grid grid-cols-1 md:grid-cols-[2fr_3fr] p-4 md:p-6 gap-4 md:gap-6 bg-white dark:bg-gray-850 rounded-md shadow-xs border border-gray-200 dark:border-white/5"
+  class="grid grid-cols-1 md:grid-cols-[2fr_3fr] p-4 md:p-6 gap-4 md:gap-6 bg-white dark:bg-gray-850 rounded-md shadow-xs border border-gray-200 dark:border-white/5 group relative
+    {{unless this.isExpanded 'h-48 overflow-hidden'}}"
   ...attributes
 >
   <div>
@@ -15,4 +16,14 @@
   <div class="min-w-0">
     <CourseOverviewPage::StageListCard::List @stages={{@stages}} />
   </div>
+
+  {{#unless this.isExpanded}}
+    <div
+      class="absolute z-20 bottom-0 left-0 right-0 h-32 vertical-mask dark:vertical-mask-gray-850 p-4 flex items-end justify-center pointer-events-none group-hover:pointer-events-auto"
+    >
+      <TertiaryButton class="opacity-0 group-hover:opacity-100 transition-opacity duration-200" {{on "click" this.handleExpandClick}}>
+        Click to expand
+      </TertiaryButton>
+    </div>
+  {{/unless}}
 </div>

app/components/course-overview-page/stage-list-card.ts

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -8,10 +10,18 @@ interface Signature {
     title: string;
     descriptionMarkdown: string;
     stages: CourseStageModel[];
+    isCollapsedByDefault?: boolean;
   };
 }
 
-export default class CourseOverviewPageStageListCard extends Component<Signature> {}
+export default class CourseOverviewPageStageListCard extends Component<Signature> {
+  @tracked isExpanded = !this.args.isCollapsedByDefault;
+
+  @action
+  handleExpandClick() {
+    this.isExpanded = true;
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {