// BDS LinkSmallGrid Pattern Styles
// Brand Design System - Link grid section pattern with heading and responsive tile grid
//
// Naming Convention: BEM with 'bds' namespace
// .bds-link-small-grid                - Base section container

// =============================================================================
// Design Tokens
// =============================================================================
// Note: Uses centralized spacing tokens from _spacing.scss.

// Spacing tokens
$bds-link-small-grid-spacing-base: $bds-space-2xl;   // 24px - spacing('2xl')
$bds-link-small-grid-spacing-md: $bds-space-3xl;     // 32px - spacing('3xl')
$bds-link-small-grid-spacing-lg: $bds-space-4xl;     // 40px - spacing('4xl')

// Typography tokens (using existing typography classes)
// - Heading: h-md class (handled in component)
// - Description: body-l class (handled in component)

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

.bds-link-small-grid {
  // Section spacing
  padding-top: $bds-link-small-grid-spacing-base;
  padding-bottom: $bds-link-small-grid-spacing-base;

  @include media-breakpoint-up(md) {
    padding-top: $bds-link-small-grid-spacing-md;
    padding-bottom: $bds-link-small-grid-spacing-md;
  }

  @include media-breakpoint-up(lg) {
    padding-top: $bds-link-small-grid-spacing-lg;
    padding-bottom: $bds-link-small-grid-spacing-lg;
  }

  // Background color - default to transparent
  background-color: transparent;
}

// Header section uses SectionHeader component