// BDS CardsTextGrid Pattern Styles
// Brand Design System - Section with heading, description, and grid of CardTextIconCard
//
// Naming Convention: BEM with 'bds' namespace
// .bds-cards-text-grid         - Base section container
// .bds-cards-text-grid__list   - Grid list (ul as PageGrid.Row)

// =============================================================================
// Design Tokens (uses BDS spacing from _spacing.scss)
// =============================================================================

$bds-cards-text-grid-padding-base: $bds-space-2xl;
$bds-cards-text-grid-padding-md: $bds-space-3xl;
$bds-cards-text-grid-padding-lg: $bds-space-4xl;

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

.bds-cards-text-grid {
  padding-top: $bds-cards-text-grid-padding-base;

  @include media-breakpoint-up(md) {
    padding-top: $bds-cards-text-grid-padding-md;
  }

  @include media-breakpoint-up(lg) {
    padding-top: $bds-cards-text-grid-padding-lg;
  }

  ul {
    padding-left: 0;
    list-style: none;
  }

  @include bds-theme-mode(dark) {
    color: $white;
  }
}

// =============================================================================
// List Grid - Aspect Ratios
// =============================================================================

.bds-cards-text-grid__list > li {
  aspect-ratio: 16 / 9;
  @include media-breakpoint-up(md) {
    aspect-ratio: 3 / 2;
  }
  @include media-breakpoint-up(lg) {
    aspect-ratio: 3 / 1;
  }
}