// BDS CardStats Pattern Styles
// Brand Design System - Section with heading, description, and grid of CardStat components
//
// Naming Convention: BEM with 'bds' namespace
// .bds-card-stats                    - Base section container
//
// Design tokens from Figma:
// Light Mode:
// - Background: White (#FFFFFF)
// - Heading: Neutral Black (#141414) → $black
// - Description: Neutral Black (#141414) → $black
//
// Dark Mode:
// - Background: transparent (inherits page background)
// - Heading: Neutral White (#FFFFFF) → $white
// - Description: Neutral White (#FFFFFF) → $white
//
// - Header content max-width: 808px (approximately 8 columns at desktop)
// - Gap between heading and description: 16px
// - Gap between cards: 8px (matches $bds-grid-gutter)


// Spacing - Section padding
$bds-card-stats-padding-y-sm: $bds-space-2xl;     // 24px - spacing('2xl')
$bds-card-stats-padding-y-md: $bds-space-3xl;     // 32px - spacing('3xl')
$bds-card-stats-padding-y-lg: $bds-space-4xl;     // 40px - spacing('4xl')

// =============================================================================
// Base Section Styles
// =============================================================================

.bds-card-stats {  
  // Vertical padding
  padding-top: $bds-card-stats-padding-y-sm;
  padding-bottom: $bds-card-stats-padding-y-sm;
  
  @include media-breakpoint-up(md) {
    padding-top: $bds-card-stats-padding-y-md;
    padding-bottom: $bds-card-stats-padding-y-md;
  }
  
  @include media-breakpoint-up(lg) {
    padding-top: $bds-card-stats-padding-y-lg;
    padding-bottom: $bds-card-stats-padding-y-lg;
  }
}

// Header section uses SectionHeader component