osi-cards-lib 1.5.36 → 1.5.38

package/index.d.ts

@@ -352,7 +352,6 @@ interface CardSection {
     type: SectionTypeInput;
     description?: string;
     subtitle?: string;
-    columns?: number;
     /**
      * Explicit column span override - how many columns this section should span.
      * Takes precedence over preferredColumns.
@@ -408,28 +407,18 @@ interface CardSection {
      */
     layoutPriority?: LayoutPriority;
     /**
-     * Priority band for layout ordering and condensation
-     * - 'critical': Always visible, never condensed (overview, key contacts)
-     * - 'important': Visible by default, condensed last (analytics, charts)
-     * - 'standard': Normal priority (info, lists)
-     * - 'optional': Can be collapsed first when space is limited
-     */
-    priority?: 'critical' | 'important' | 'standard' | 'optional';
-    /**
-     * Keep this section visible at the top during scroll
+     * Priority for layout ordering and condensation (1-3)
+     * - 1: Highest priority - Always visible, never condensed (overview, key contacts)
+     * - 2: Medium priority - Visible by default, condensed last (analytics, charts)
+     * - 3: Lowest priority - Normal priority, can be collapsed first (info, lists)
      */
-    sticky?: boolean;
-    /**
-     * Group ID to keep related sections together in layout
-     */
-    groupId?: string;
+    priority?: 1 | 2 | 3;
     /**
      * Preferred column position (0-indexed) for column affinity
      */
     columnAffinity?: number;
     width?: number;
     collapsed?: boolean;
-    emoji?: string;
     fields?: CardField[];
     items?: CardItem[];
     chartType?: 'bar' | 'line' | 'pie' | 'doughnut';
@@ -1376,15 +1365,13 @@ interface ISectionBuilder {
     withType(type: SectionTypeInput): ISectionBuilder;
     withDescription(description: string): ISectionBuilder;
     withSubtitle(subtitle: string): ISectionBuilder;
-    withColumns(columns: number): ISectionBuilder;
     withColSpan(span: number): ISectionBuilder;
     withPreferredColumns(columns: 1 | 2 | 3 | 4): ISectionBuilder;
-    withPriority(priority: 'critical' | 'important' | 'standard' | 'optional'): ISectionBuilder;
+    withPriority(priority: 1 | 2 | 3): ISectionBuilder;
     withField(field: CardField): ISectionBuilder;
     withFields(fields: CardField[]): ISectionBuilder;
     withItem(item: CardItem): ISectionBuilder;
     withItems(items: CardItem[]): ISectionBuilder;
-    withEmoji(emoji: string): ISectionBuilder;
     withCollapsed(collapsed: boolean): ISectionBuilder;
     withMeta(key: string, value: unknown): ISectionBuilder;
     build(): CardSection;
@@ -1724,8 +1711,6 @@ interface BaseSectionProps {
     description?: string;
     /** Optional subtitle */
     subtitle?: string;
-    /** Column configuration */
-    columns?: number;
     /** Explicit column span override */
     colSpan?: number;
     /** Preferred column count */
@@ -1744,20 +1729,14 @@ interface BaseSectionProps {
     canGrow?: boolean;
     /** Layout priority (1=highest, 3=lowest) */
     layoutPriority?: 1 | 2 | 3;
-    /** Priority band */
-    priority?: 'critical' | 'important' | 'standard' | 'optional';
-    /** Keep visible during scroll */
-    sticky?: boolean;
-    /** Group ID for related sections */
-    groupId?: string;
+    /** Priority for layout ordering (1-3, where 1 is highest) */
+    priority?: 1 | 2 | 3;
     /** Preferred column position */
     columnAffinity?: number;
     /** Section width */
     width?: number;
     /** Collapsed state */
     collapsed?: boolean;
-    /** Optional emoji */
-    emoji?: string;
     /** Additional metadata */
     meta?: Record<string, unknown>;
 }
@@ -3547,8 +3526,8 @@ interface SectionManifestEntry {
         usesChartData?: boolean;
         defaultColumns: number;
         supportsCollapse: boolean;
-        supportsEmoji: boolean;
         requiresExternalLib?: string;
+        supportsEmoji?: boolean;
     };
     aliases: string[];
     isInternal: boolean;
@@ -5961,6 +5940,10 @@ declare class SectionNormalizationService {
      * Get the priority band for a section type
      */
     getPriorityBandForType(type: string): PriorityBand;
+    /**
+     * Map PriorityBand to numeric priority (1-3)
+     */
+    mapPriorityBandToNumericPriority(priority?: PriorityBand): 1 | 2 | 3;
     /**
      * Maps a priority band string to a numeric layout priority (1-3).
      * Used by the row-first packing algorithm for efficient sorting.
@@ -8690,6 +8673,8 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     private lastSectionHash;
     private itemKeyMap;
     private readonly HEIGHT_THRESHOLD;
+    private initialLayoutPollingTimeout?;
+    private itemElements;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
@@ -8712,10 +8697,12 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
     private computeSectionHash;
     /**
      * Hybrid reordering: keep critical/important sections in order, reorder the rest
+     * Enhanced to better match section heights for gap filling
      */
     private applyHybridReordering;
     /**
-     * Estimate section height for reordering (simple heuristic)
+     * Estimate section height for reordering (enhanced heuristic)
+     * More accurate estimation based on section type and content structure
      */
     private estimateSectionHeight;
     /**
@@ -8732,6 +8719,14 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
      * Cleanup absolute position polyfill observers
      */
     private cleanupAbsolutePositionPolyfill;
+    /**
+     * Cache element references to avoid repeated querySelectorAll calls
+     */
+    private cacheItemElements;
+    /**
+     * Clear cached element references when sections change
+     */
+    private clearItemElementCache;
     /**
      * Observe item resizes for absolute position updates
      */
@@ -8752,6 +8747,11 @@ declare class MasonryGridComponent implements AfterViewInit, OnChanges, OnDestro
      * Calculate actual column heights from transforms and item heights for diagnostics
      */
     private calculateColumnHeights;
+    /**
+     * Ensure initial layout is calculated with retry mechanism if width is invalid
+     * Simplified: Single RAF + one timeout retry
+     */
+    private ensureInitialLayout;
     static ɵfac: i0.ɵɵFactoryDeclaration<MasonryGridComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MasonryGridComponent, "app-masonry-grid", never, { "sections": { "alias": "sections"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; }; "maxColumns": { "alias": "maxColumns"; "required": false; }; "containerWidth": { "alias": "containerWidth"; "required": false; }; "isStreaming": { "alias": "isStreaming"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; }, { "sectionEvent": "sectionEvent"; "layoutChange": "layoutChange"; "layoutCompleted": "layoutCompleted"; "layoutLog": "layoutLog"; }, never, never, true, never>;
 }
@@ -10238,7 +10238,7 @@ declare class ContactCardSectionComponent extends BaseSectionComponent implement
         label: string;
     }>;
     /**
-     * Get primary contact methods (email + phone, max 2)
+     * Get primary contact methods (email + salesforce, max 2)
      * These are shown in collapsed state
      */
     getPrimaryActions(contact: any): Array<{
@@ -11488,11 +11488,11 @@ declare function packWithZeroGapsGuarantee(sections: CardSection[], columns?: nu
  * Do not edit manually - generated by scripts/generate-version.js
  *
  * Source of truth: version.config.json
- * Last synced: 2025-12-12T21:21:07.663Z
+ * Last synced: 2025-12-15T09:21:17.528Z
  */
 declare const VERSION = "1.5.19";
-declare const BUILD_DATE = "2025-12-12T21:21:07.663Z";
-declare const BUILD_HASH = "34c5699";
+declare const BUILD_DATE = "2025-12-15T09:21:17.528Z";
+declare const BUILD_HASH = "9010f4a";
 declare const BUILD_BRANCH = "main";
 interface VersionInfo {
     version: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.5.36",
+  "version": "1.5.38",
   "description": "Standalone OSI Cards library for Angular applications with CSS Layer support for easy style overrides",
   "keywords": [
     "angular",
@@ -95,4 +95,4 @@
     "*.css",
     "*.scss"
   ]
-}
+}

package/scripts/setup-angular-styles.js

@@ -167,3 +167,5 @@ if (require.main === module) {
 }
 
 module.exports = { updateAngularJson, findAngularJson };
+
+

package/styles/_osi-cards-tokens.scss

@@ -212,7 +212,6 @@
 
   // Semantic z-index
   --osi-z-dropdown: 1000;
-  --osi-z-sticky: 1020;
   --osi-z-fixed: 1030;
   --osi-z-modal-backdrop: 1040;
   --osi-z-modal: 1050;

package/styles/_styles-scoped.scss

@@ -60,7 +60,15 @@
     min-height: 0;
 
     // Font family - ensure consistent typography
-    font-family: Helvetica, Helvetica Neue, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif !important;
+    font-family:
+      Helvetica,
+      Helvetica Neue,
+      -apple-system,
+      BlinkMacSystemFont,
+      Segoe UI,
+      Roboto,
+      Arial,
+      sans-serif !important;
 
     // Preserve 3D transforms for tilt effects
     perspective: 1200px;

package/styles/bundles/_ai-card.scss

@@ -181,7 +181,11 @@
 .ai-card-surface:hover {
   border: var(--osi-card-border-hover, 1px solid rgba(255, 121, 0, 0.5)) !important;
   background: var(--osi-card-background-hover, rgba(30, 30, 30, 0.8)) !important;
-  box-shadow: var(--osi-card-shadow-hover, 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 121, 0, 0.2)) !important;
+  box-shadow: var(
+    --osi-card-shadow-hover,
+    0 20px 40px -5px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 121, 0, 0.2)
+  ) !important;
 }
 
 // Section highlight animation for URL fragment scrolling

package/styles/bundles/_card-skeleton.scss

@@ -98,8 +98,8 @@
 }
 
 .skeleton-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: var(--card-header-title-font-size, 1.25rem);
+  font-weight: var(--card-header-title-font-weight, 700);
   color: var(--foreground, #1c1c1f);
   min-height: 2rem;
   display: flex;

package/styles/components/_component-styles.scss

@@ -203,3 +203,7 @@ app-card-streaming-indicator {
   white-space: nowrap;
   border: 0;
 }
+
+
+
+

package/styles/components/cards/_ai-card.scss

@@ -686,7 +686,7 @@
   line-height: 1.2;
 }
 
-/* All sizing is now continuous via clamp() - no discrete breakpoints */
+/* All sizing is now fixed - no responsive behavior */
 
 @media (prefers-reduced-motion: reduce) {
   .ai-card-surface {

package/styles/components/sections/_design-tokens.scss

@@ -232,7 +232,6 @@ $line-heights: (
 :root {
   --z-base: 1;
   --z-dropdown: 100;
-  --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;

package/styles/components/sections/_typography-system.scss

@@ -293,14 +293,8 @@
 // =====================================================================
 
 @mixin fluid-type($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
-  font-size: clamp(
-    #{$min-size},
-    calc(
-      #{$min-size} + (#{strip-unit($max-size)} - #{strip-unit($min-size)}) *
-        ((100vw - #{$min-width}) / (#{strip-unit($max-width)} - #{strip-unit($min-width)}))
-    ),
-    #{$max-size}
-  );
+  // Fixed font size - no responsive behavior
+  font-size: #{$min-size};
 }
 
 @function strip-unit($number) {

package/styles/core/_bootstrap-reset.scss

@@ -305,10 +305,19 @@ article.ai-card-surface {
 
   /* Angular Split variables */
   --_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);
-  --_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));
-  --_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));
-  --_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));
-  --_as-transition-duration: var(--as-transition-duration, .3s);
+  --_as-gutter-icon-horizontal: var(
+    --as-gutter-icon-horizontal,
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)
+  );
+  --_as-gutter-icon-vertical: var(
+    --as-gutter-icon-vertical,
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)
+  );
+  --_as-gutter-icon-disabled: var(
+    --as-gutter-icon-disabled,
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)
+  );
+  --_as-transition-duration: var(--as-transition-duration, 0.3s);
   --_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);
 
   /* Additional spacing variables for integration */
@@ -336,7 +345,7 @@ article.ai-card-surface {
   --section-card-padding: var(--spacing-md);
 
   /* Additional typography variables */
-  --text-md: .875rem;
+  --text-md: 0.875rem;
   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
@@ -351,28 +360,29 @@ article.ai-card-surface {
 
   /* Additional shadow variables */
   --radius-none: 0;
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .05);
-  --glow-sm: 0 0 10px rgba(var(--accent-rgb), .15);
-  --glow-md: 0 0 20px rgba(var(--accent-rgb), .2);
-  --glow-lg: 0 0 30px rgba(var(--accent-rgb), .25);
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .2);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  --glow-sm: 0 0 10px rgba(var(--accent-rgb), 0.15);
+  --glow-md: 0 0 20px rgba(var(--accent-rgb), 0.2);
+  --glow-lg: 0 0 30px rgba(var(--accent-rgb), 0.25);
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 
   /* Additional transition variables */
-  --duration-base: .2s;
-  --ease-in: cubic-bezier(.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, .2, 1);
-  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
-  --ease-smooth: cubic-bezier(.4, 0, .6, 1);
+  --duration-base: 0.2s;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.6, 1);
   --transition-base: all var(--duration-base) var(--ease-out);
   --transition-fast: all var(--duration-fast) var(--ease-out);
   --transition-slow: all var(--duration-slow) var(--ease-out);
-  --transition-colors: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
+  --transition-colors:
+    background-color var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
   --transition-shadow: box-shadow var(--duration-base) var(--ease-out);
   --transition-transform: transform var(--duration-base) var(--ease-out);
 
   /* Additional z-index variables */
-  --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
 
@@ -383,21 +393,21 @@ article.ai-card-surface {
   --blur-lg: 16px;
   --blur-xl: 24px;
   --glass-blur: var(--blur-md);
-  --glass-bg: rgba(0, 0, 0, .4);
-  --glass-border: rgba(255, 255, 255, .1);
+  --glass-bg: rgba(0, 0, 0, 0.4);
+  --glass-border: rgba(255, 255, 255, 0.1);
 
   /* Opacity scale */
   --opacity-0: 0;
-  --opacity-5: .05;
-  --opacity-10: .1;
-  --opacity-20: .2;
-  --opacity-30: .3;
-  --opacity-40: .4;
-  --opacity-50: .5;
-  --opacity-60: .6;
-  --opacity-70: .7;
-  --opacity-80: .8;
-  --opacity-90: .9;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
   --opacity-100: 1;
 
   /* Surface variables */
@@ -406,15 +416,15 @@ article.ai-card-surface {
   --surface-overlay: var(--glass-bg);
 
   /* Border variables */
-  --border-light: rgba(var(--foreground-rgb), .08);
+  --border-light: rgba(var(--foreground-rgb), 0.08);
   --border-base: var(--border);
-  --border-strong: rgba(var(--foreground-rgb), .2);
+  --border-strong: rgba(var(--foreground-rgb), 0.2);
 
   /* State opacity variables */
-  --state-hover-opacity: .08;
-  --state-active-opacity: .12;
-  --state-focus-opacity: .16;
-  --state-disabled-opacity: .5;
+  --state-hover-opacity: 0.08;
+  --state-active-opacity: 0.12;
+  --state-focus-opacity: 0.16;
+  --state-disabled-opacity: 0.5;
 
   /* OSI Card foreground */
   --osi-card-foreground: #1a1a2e;
@@ -447,7 +457,7 @@ article.ai-card-surface {
   --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / .5);
+  --tw-ring-color: rgb(59 130 246 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;

package/styles/design-system/_tokens.scss

@@ -142,7 +142,6 @@
   --osi-z-base: 0;
   --osi-z-raised: 10;
   --osi-z-dropdown: 100;
-  --osi-z-sticky: 200;
   --osi-z-fixed: 300;
   --osi-z-modal: 400;
   --osi-z-popover: 500;

package/styles/layout/_masonry.scss

@@ -270,8 +270,8 @@
 }
 
 /* Priority-based visual indicators */
-.masonry-item--priority-critical {
-  /* Critical sections get subtle emphasis */
+.masonry-item[data-priority="1"] {
+  /* Priority 1 (highest) sections get subtle emphasis */
   &::before {
     content: "";
     position: absolute;
@@ -284,18 +284,12 @@
   }
 }
 
-.masonry-item--priority-important {
-  /* Important sections - no special border, use unified styling */
+.masonry-item[data-priority="2"],
+.masonry-item[data-priority="3"] {
+  /* Priority 2 and 3 sections - no special border, use unified styling */
   /* Left accent border removed for consistency */
 }
 
-/* Sticky sections */
-.masonry-item--sticky {
-  position: sticky !important;
-  top: 0 !important;
-  z-index: 10 !important;
-  background: var(--card-background) !important;
-}
 
 /* Flex grow sections - expand to fill space */
 .masonry-item--flex-grow {

package/styles/reset/_shadow-reset.scss

@@ -29,9 +29,9 @@
   visibility: visible !important;
   opacity: 1 !important;
 
-  // Transparent container with 8px padding (library default)
+  // Transparent container with fixed padding (library default)
   // Must be set here immediately after all:initial to ensure application
-  padding: 8px;
+  padding: 0;
   background: transparent !important;
   background-color: transparent !important;
 
@@ -60,11 +60,6 @@
 
   // Contain styles within shadow boundary
   contain: layout style;
-
-  // Responsive: reduce padding on mobile
-  @media (max-width: 480px) {
-    padding: 4px;
-  }
 }
 
 // Host context variations

package/styles/responsive.scss

@@ -1,6 +1,6 @@
 /**
  * OSI Cards - Responsive Design System
- * 
+ *
  * Breakpoints and responsive utilities for cards and sections.
  */
 
@@ -89,32 +89,13 @@ $breakpoints: (
 .osi-card-container {
   @include container(card);
 
-  // Base mobile styles
-  --card-padding: 0.75rem;
+  // Fixed styles - no responsive behavior
+  --card-padding: 4px;
   --card-gap: 0.5rem;
   --card-title-size: 1rem;
   --section-title-size: 0.875rem;
   --field-label-size: 0.75rem;
   --field-value-size: 0.875rem;
-
-  @include responsive("sm") {
-    --card-padding: 1rem;
-    --card-gap: 0.75rem;
-    --card-title-size: 1.125rem;
-  }
-
-  @include responsive("md") {
-    --card-padding: 1.25rem;
-    --card-gap: 1rem;
-    --card-title-size: 1.25rem;
-    --section-title-size: 1rem;
-  }
-
-  @include responsive("lg") {
-    --card-padding: 1.5rem;
-    --card-gap: 1.25rem;
-    --card-title-size: 1.375rem;
-  }
 }
 
 // ============================================
@@ -189,10 +170,6 @@ $breakpoints: (
 
     .metric-value {
       font-size: 1.5rem;
-
-      @include responsive("md") {
-        font-size: 2rem;
-      }
     }
   }
 
@@ -227,29 +204,29 @@ $breakpoints: (
 }
 
 // ============================================
-// Typography Responsive Utilities
+// Typography Responsive Utilities (fixed)
 // ============================================
 
 .text-responsive {
-  font-size: clamp(0.875rem, 2vw, 1rem);
+  font-size: 0.875rem;
   line-height: 1.5;
 }
 
 .heading-responsive {
-  font-size: clamp(1.25rem, 4vw, 2rem);
+  font-size: 1.25rem;
   line-height: 1.2;
 }
 
 // ============================================
-// Spacing Responsive Utilities
+// Spacing Responsive Utilities (fixed)
 // ============================================
 
 .space-responsive {
-  padding: clamp(0.5rem, 2vw, 1.5rem);
+  padding: 0.5rem;
 }
 
 .gap-responsive {
-  gap: clamp(0.5rem, 2vw, 1rem);
+  gap: 0.5rem;
 }
 
 // ============================================