// BDS LinkTextDirectory Pattern Styles
// Brand Design System - Section with heading and list of numbered cards
//
// Naming Convention: BEM with 'bds' namespace
// .bds-link-text-directory         - Base section container
// .bds-link-text-directory__header - Header section (heading + description)

// =============================================================================
// Design Tokens
// =============================================================================

// Section padding
$bds-link-text-directory-padding-base: 24px;
$bds-link-text-directory-padding-md: 32px;
$bds-link-text-directory-padding-lg: 40px;

// Header gap (between heading and description)
$bds-link-text-directory-header-gap-base: 8px;
$bds-link-text-directory-header-gap-md: 8px;
$bds-link-text-directory-header-gap-lg: 16px;

// Header margin-bottom (space before cards list)
$bds-link-text-directory-header-margin-base: 24px;
$bds-link-text-directory-header-margin-md: 32px;
$bds-link-text-directory-header-margin-lg: 40px;

// =============================================================================
// Section Container
// =============================================================================

.bds-link-text-directory {
  padding-top: $bds-link-text-directory-padding-base;
  padding-bottom: $bds-link-text-directory-padding-base;

  @include media-breakpoint-up(md) {
    padding-top: $bds-link-text-directory-padding-md;
    padding-bottom: $bds-link-text-directory-padding-md;
  }

  @include media-breakpoint-up(lg) {
    padding-top: $bds-link-text-directory-padding-lg;
    padding-bottom: $bds-link-text-directory-padding-lg;
  }

  ul {
    padding-left: 0;
    list-style: none;
  }
  @include bds-theme-mode(dark) {
    color: $white;
  }
}

// =============================================================================
// Header Section
// =============================================================================

.bds-link-text-directory__header {
  display: flex;
  flex-direction: column;
  gap: $bds-link-text-directory-header-gap-base;
  margin-bottom: $bds-link-text-directory-header-margin-base;

  @include media-breakpoint-up(md) {
    gap: $bds-link-text-directory-header-gap-md;
    margin-bottom: $bds-link-text-directory-header-margin-md;
  }

  @include media-breakpoint-up(lg) {
    gap: $bds-link-text-directory-header-gap-lg;
    margin-bottom: $bds-link-text-directory-header-margin-lg;
  }
  h2, p {
    margin-bottom: 0;
  }
}