// 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__header - Header section (heading + description)
// .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;

$bds-cards-text-grid-header-gap-base: $bds-gap-header-sm;
$bds-cards-text-grid-header-gap-md: $bds-gap-header-md;
$bds-cards-text-grid-header-gap-lg: $bds-gap-header-lg;

$bds-cards-text-grid-header-margin-base: $bds-gap-section-sm;
$bds-cards-text-grid-header-margin-md: $bds-gap-section-md;
$bds-cards-text-grid-header-margin-lg: $bds-gap-section-lg;

// =============================================================================
// 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;
  }
}

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

.bds-cards-text-grid__header {
  display: flex;
  flex-direction: column;
  gap: $bds-cards-text-grid-header-gap-base;
  margin-bottom: $bds-cards-text-grid-header-margin-base;

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

  @include media-breakpoint-up(lg) {
    gap: $bds-cards-text-grid-header-gap-lg;
    margin-bottom: $bds-cards-text-grid-header-margin-lg;
  }

  h2, p {
    margin-bottom: 0;
  }
}

// =============================================================================
// 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;
  }
}