// BDS CardsTwoColumn Pattern Styles
// Brand Design System - Section with header and 2x2 card grid
//
// Naming Convention: BEM with 'bds' namespace
// .bds-cards-two-column                    - Base section container
// .bds-cards-two-column__container         - Inner container with max-width
// .bds-cards-two-column__header            - Header section (title + description)
// .bds-cards-two-column__header-left       - Left side of header (title)
// .bds-cards-two-column__header-right      - Right side of header (description)
// .bds-cards-two-column__title             - Section title (heading-md)
// .bds-cards-two-column__description       - Section description (body-l, muted)
// .bds-cards-two-column__cards             - Cards grid container (2x2 on desktop)
// .bds-text-card                           - Individual text card
// .bds-text-card--green                    - Green variant
// .bds-text-card--neutral-light            - Neutral light variant
// .bds-text-card--neutral-dark             - Neutral dark variant
// .bds-text-card--lilac                    - Lilac variant
// .bds-text-card__header                   - Card header (title)
// .bds-text-card__footer                   - Card footer (description)
// .bds-text-card__title                    - Card title (heading-lg)
// .bds-text-card__description              - Card description (body-l)
//
// Design tokens from Figma (Section Cards - Two Column):
//
// Breakpoints:
// - Mobile: < 576px (min-width: 240px, max-width: 575px)
// - Tablet: 576px - 991px (min-width: 576px, max-width: 991px)
// - Desktop: ≥ 992px (min-width: 992px, max-width: 1280px)

// =============================================================================
// Design Tokens from Figma
// =============================================================================

// Section padding
$bds-section-padding-x-mobile: 16px;
$bds-section-padding-x-tablet: 24px;
$bds-section-padding-x-desktop: 32px;

$bds-section-padding-y-mobile: 24px;
$bds-section-padding-y-tablet: 32px;
$bds-section-padding-y-desktop: 40px;

// Gap between header and cards
$bds-section-gap-mobile: 24px;
$bds-section-gap-tablet: 32px;
$bds-section-gap-desktop: 40px;

// Gap between cards (consistent 8px across all breakpoints)
$bds-cards-gap: 8px;

// Card internal padding
$bds-text-card-padding-mobile: 16px;
$bds-text-card-padding-tablet: 20px;
$bds-text-card-padding-desktop: 24px;

// Card heights (fixed per breakpoint)
$bds-text-card-height-mobile: 274px;
$bds-text-card-height-tablet: 309px;
$bds-text-card-height-desktop: 340px;

// Card description max-width (from Figma)
$bds-text-card-description-max-width: 478px;

// Container max-width
$bds-container-max-width: 1280px;

// Colors - Light Mode (from Figma)
$bds-text-color: $black;           // #141414 - Neutral black
$bds-text-color-muted: $gray-500;  // #72777E - Neutral/500 for description

// Card background colors
$bds-text-card-bg-green: $green-300;        // #21E46B
$bds-text-card-bg-neutral-light: $gray-200; // #E6EAF0
$bds-text-card-bg-neutral-dark: $gray-300;  // #CAD4DF
$bds-text-card-bg-lilac: $lilac-200;        // #D9CAFF

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

.bds-cards-two-column {
  width: 100%;
  background-color: $white;
}

// =============================================================================
// Inner Container
// =============================================================================

.bds-cards-two-column__container {
  display: flex;
  flex-direction: column;
  max-width: $bds-container-max-width;
  margin: 0 auto;

  // Mobile
  padding: $bds-section-padding-y-mobile $bds-section-padding-x-mobile;
  gap: $bds-section-gap-mobile;

  @include media-breakpoint-up(md) {
    // Tablet
    padding: $bds-section-padding-y-tablet $bds-section-padding-x-tablet;
    gap: $bds-section-gap-tablet;
  }

  @include media-breakpoint-up(lg) {
    // Desktop
    padding: $bds-section-padding-y-desktop $bds-section-padding-x-desktop;
    gap: $bds-section-gap-desktop;
  }
}

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

.bds-cards-two-column__header {
  display: flex;
  flex-direction: column;
  gap: 8px;

  // Mobile/Tablet: stacked layout
  @include media-breakpoint-up(lg) {
    // Desktop: side-by-side layout
    flex-direction: row;
    align-items: center;
    gap: $bds-cards-gap;
    height: $bds-text-card-height-desktop;
  }
}

.bds-cards-two-column__header-left {
  flex: 1 0 0;
  min-width: 0;

  @include media-breakpoint-up(lg) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.bds-cards-two-column__header-right {
  flex: 1 0 0;
  min-width: 0;

  @include media-breakpoint-up(lg) {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.bds-cards-two-column__title {
  margin: 0;
  color: $bds-text-color;
  // Typography handled by .h-md class from _font.scss
}

.bds-cards-two-column__description {
  color: $bds-text-color-muted;
  // Typography handled by .body-l class from _font.scss

  p {
    margin: 0;

    & + p {
      margin-top: 16px; // Paragraph spacing from Figma
    }
  }
}

// =============================================================================
// Cards Grid
// =============================================================================

.bds-cards-two-column__cards {
  display: flex;
  flex-direction: column;
  gap: $bds-cards-gap;
  width: 100%;

  @include media-breakpoint-up(lg) {
    // Desktop: 2x2 grid with flex-wrap
    flex-direction: row;
    flex-wrap: wrap;
  }

  // Cards fill available width
  .bds-text-card {
    width: 100%;

    @include media-breakpoint-up(lg) {
      // Desktop: 2 cards per row (50% - gap adjustment)
      width: calc(50% - #{$bds-cards-gap / 2});
    }
  }
}

// =============================================================================
// TextCard Component
// =============================================================================

.bds-text-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-decoration: none;
  box-sizing: border-box;

  // Mobile dimensions and padding
  height: $bds-text-card-height-mobile;
  padding: $bds-text-card-padding-mobile;

  @include media-breakpoint-up(md) {
    height: $bds-text-card-height-tablet;
    padding: $bds-text-card-padding-tablet;
  }

  @include media-breakpoint-up(lg) {
    height: $bds-text-card-height-desktop;
    padding: $bds-text-card-padding-desktop;
  }

  // Hover state for linked cards
  &:hover {
    text-decoration: none;
  }
}

// =============================================================================
// Color Variants
// =============================================================================

.bds-text-card--green {
  background-color: $bds-text-card-bg-green;
}

.bds-text-card--neutral-light {
  background-color: $bds-text-card-bg-neutral-light;
}

.bds-text-card--neutral-dark {
  background-color: $bds-text-card-bg-neutral-dark;
}

.bds-text-card--lilac {
  background-color: $bds-text-card-bg-lilac;
}

// =============================================================================
// Card Header (Title)
// =============================================================================

.bds-text-card__header {
  width: 100%;
}

.bds-text-card__title {
  margin: 0;
  color: $bds-text-color;
  // Typography handled by .h-lg class from _font.scss
}

// =============================================================================
// Card Footer (Description)
// =============================================================================

.bds-text-card__footer {
  width: 100%;
}

.bds-text-card__description {
  margin: 0;
  color: $bds-text-color;
  max-width: $bds-text-card-description-max-width;
  // Typography handled by .body-l class from _font.scss
}

// =============================================================================
// Light Mode Styles
// =============================================================================

html.light {
  .bds-cards-two-column {
    background-color: $white;
  }

  .bds-cards-two-column__title {
    color: $bds-text-color;
  }

  .bds-cards-two-column__description {
    color: $bds-text-color-muted;
  }

  .bds-text-card__title,
  .bds-text-card__description {
    color: $bds-text-color;
  }
}

// =============================================================================
// Dark Mode Styles
// =============================================================================
// Dark mode color mappings from Figma (node 33054:969):
// - Section background: Neutral/black (#141414) → $black
// - Section title: Neutral/white (#FFFFFF) → $white
// - Section description: Neutral/white (#FFFFFF) → $white
// - Card text: Neutral/black (#141414) → $black (unchanged - cards have colored backgrounds)
// - Green card: Primary/Green/300default (#21E46B) → $green-300 (unchanged)
// - Neutral Light card: Neutral/300default (#CAD4DF) → $gray-300 (unchanged)
// - Neutral Dark card: Neutral/400 (#8A919A) → $gray-400 (darker in dark mode)
// - Lilac card: Primary/Lilac/200 (#D9CAFF) → $lilac-200 (unchanged)

html.dark {
  .bds-cards-two-column {
    background-color: $black;
  }

  // Section header text colors inverted for dark mode
  .bds-cards-two-column__title {
    color: $white;
  }

  .bds-cards-two-column__description {
    color: $white;
  }

  // Card text stays dark (cards have light colored backgrounds)
  .bds-text-card__title,
  .bds-text-card__description {
    color: $bds-text-color;
  }

  // Card background colors for dark mode
  // Green, Neutral Light, and Lilac remain the same
  // Neutral Dark uses a darker shade ($gray-400) in dark mode
  .bds-text-card--green {
    background-color: $green-300;
  }

  .bds-text-card--neutral-light {
    background-color: $gray-300;
  }

  .bds-text-card--neutral-dark {
    background-color: $gray-400;
  }

  .bds-text-card--lilac {
    background-color: $lilac-200;
  }
}