Refactors UI components with new card header structure

Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title`

Improves component consistency across multiple features:
- Adds structured card headers
- Introduces more semantic HTML elements
- Enhances layout and readability of card components

Updates CSS and component styles to support new structure

PlanTempus.Application/wwwroot/css/components.css

@@ -570,6 +570,7 @@ swp-card-title {
   gap: var(--spacing-3);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
   color: var(--color-text);
 
   & i {
@@ -1322,12 +1323,17 @@ swp-back-link {
 swp-detail-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-8);
+  gap: var(--card-gap);
+  align-items: start;
+}
 
-  > div {
-    display: flex;
-    flex-direction: column;
-  }
+/* ===========================================
+   CARD COLUMN (Stacked cards container)
+   =========================================== */
+swp-card-column {
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
 }
 
 @media (max-width: 900px) {
@@ -1582,9 +1588,3 @@ swp-two-column-grid {
   }
 }
 
-/* Stacked cards in a grid column */
-.stacked-cards {
-  display: flex;
-  flex-direction: column;
-  gap: var(--card-gap);
-}