// FeatureTwoColumn Pattern Styles
// =============================================================================
// A feature section pattern with two-column layout for content and media.
// Supports color themes (neutral, lilac, yellow, green) and arrangement variants.

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

// Color variants map - centralizes all variant configurations
// Structure: variant-name: (light-bg, dark-bg)
$bds-feature-variants: (
  'neutral': (
    light-bg: $gray-100,   // #F0F3F7 (Neutral-100)
    dark-bg: $gray-200     // #E6EAF0 (Neutral-200)
  ),
  'lilac': (
    light-bg: $lilac-200,  // #D9CAFF (Primary-Lilac-200)
    dark-bg: $lilac-200    // #D9CAFF (Primary-Lilac-200)
  ),
  'yellow': (
    light-bg: $yellow-100, // #F3F1EB (Secondary-Yellow-100)
    dark-bg: $yellow-100   // #F3F1EB (Secondary-Yellow-100)
  ),
  'green': (
    light-bg: $green-300,  // #21E46B (Primary-Green-300default)
    dark-bg: $green-300    // #21E46B (Primary-Green-300default)
  )
);

// Text colors - same for light and dark modes
// From styles/_colors.scss: $black = #141414 (Neutral-black)
$bds-feature-title-color: $black; // #141414 (Neutral-black)
$bds-feature-title-color-dark: $black; // #141414 (same in dark mode)
$bds-feature-description-color: $black; // #141414 (Neutral-black)
$bds-feature-description-color-dark: $black; // #141414 (same in dark mode)

// Spacing - Desktop (≥992px) - based on Figma 1280px design
// Note: Uses centralized spacing tokens from _spacing.scss.
// $bds-grid-gutter is defined in _spacing.scss (8px).
$bds-feature-desktop-py: 96px; // Non-standard value, kept as-is
$bds-feature-desktop-text-gap: $bds-space-lg; // 16px - spacing('lg')
$bds-feature-desktop-content-gap: 0; // Gap between text-group and cta (space-between handles this)

// Spacing - Tablet (576px - 991px) - based on Figma 768px design
$bds-feature-tablet-py: $bds-space-8xl; // 80px - spacing('8xl')
$bds-feature-tablet-text-gap: $bds-space-sm; // 8px - spacing('sm')
$bds-feature-tablet-content-gap: $bds-space-3xl; // 32px - spacing('3xl')

// Spacing - Mobile (<576px) - based on Figma 375px design
$bds-feature-mobile-py: $bds-space-6xl; // 64px - spacing('6xl')
$bds-feature-mobile-text-gap: $bds-space-sm; // 8px - spacing('sm')
$bds-feature-mobile-content-gap: $bds-space-2xl; // 24px - spacing('2xl')

// =============================================================================
// Base Styles
// =============================================================================
.bds-feature-two-column {
  width: 100%;

  // Extra large screens (>1280px): constrain component width and center
  // Background color stays within 1280px, parent section background shows beyond
  @include media-breakpoint-up(lg) {
    max-width: 1280px;
    margin: 0 auto;
  }

  // Single flex layout. DOM order is content then media; below lg we use column-reverse so
  // media always appears on top (same stacking for layered sections). At lg+, row places
  // content left / media right; --right only swaps the desktop row.
  &__layout {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    align-items: stretch;

    @include media-breakpoint-up(lg) {
      flex-direction: row;
    }
  }

  // Desktop only: content on the right, media on the left (mobile/tablet unchanged)
  &--right {
    .bds-feature-two-column__layout {
      @include media-breakpoint-up(lg) {
        flex-direction: row-reverse;
      }
    }
  }

  // Content column wrapper
  &__content-col {
    display: flex;
    flex-direction: column;

    // Mobile: vertical padding, no horizontal padding (grid handles positioning)
    padding: $bds-feature-mobile-py 0;

    // Tablet: vertical padding, no horizontal padding (grid handles positioning)
    @include media-breakpoint-up(md) {
      padding: $bds-feature-tablet-py 0;
    }

    // Desktop: 50% width, vertical padding (grid handles horizontal positioning)
    @include media-breakpoint-up(lg) {
      width: 50%;
      min-width: 0;
      padding: $bds-feature-desktop-py 0;
    }
  }

  // Content grid - positions content within column using grid system
  // Desktop: 6-column grid within the content half, content spans cols 2-5 (offset-1, span-4)
  // Tablet: 8-column grid, content spans cols 2-7 (offset-1, span-6)
  // Mobile: 4-column grid, content spans cols 1-4 (no offset, span-4)
  &__content-grid {
    display: grid;
    width: 100%;
    height: 100%;

    // Mobile: 4 columns, content full width
    grid-template-columns: repeat(4, 1fr);
    gap: $bds-grid-gutter;
    padding: 0 $bds-space-lg; // 16px - spacing('lg')

    // Tablet: 8 columns
    @include media-breakpoint-up(md) {
      grid-template-columns: repeat(8, 1fr);
      padding: 0 $bds-space-2xl; // 24px - spacing('2xl')
    }

    // Desktop: 6 columns (within the 50% content half)
    @include media-breakpoint-up(lg) {
      grid-template-columns: repeat(6, 1fr);
      padding: 0 $bds-space-3xl; // 32px - spacing('3xl')
    }
  }

  // Content wrapper - positioned within the grid
  &__content-wrapper {
    // Mobile: span all 4 columns (cols 1-4)
    grid-column: 1 / -1;

    // Tablet: start at col 2, span 6 columns (cols 2-7)
    @include media-breakpoint-up(md) {
      grid-column: 2 / span 6;
    }

    // Desktop: start at col 2, span 4 columns (cols 2-5)
    @include media-breakpoint-up(lg) {
      grid-column: 2 / span 4;
    }
  }

  &__media-col {
    display: flex;
    flex-direction: column;
    min-width: 0;

    @include media-breakpoint-up(lg) {
      width: 50%;
      aspect-ratio: 1 / 1;
      min-height: 0;
    }
  }

  // Content
  &__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    gap: $bds-feature-mobile-content-gap;

    @include media-breakpoint-up(md) {
      gap: $bds-feature-tablet-content-gap;
    }

    @include media-breakpoint-up(lg) {
      gap: $bds-feature-desktop-content-gap;
    }
  }

  // Content with multiple links
  // Mobile: 24px gap between text-group and button-group
  // Tablet: 32px gap between text-group and button-group
  // Desktop: space-between with no gap (auto distribution between text-group and button-group)
  &__content--multiple {
    // Mobile: no gap since we only have 2 items (text-group and button-group)
    // The 24px gap is handled via button-group margin or flex gap
    gap: $bds-space-2xl; // 24px - spacing('2xl')
    justify-content: flex-start;


    @include media-breakpoint-up(lg) {
      justify-content: space-between;
    }
  }

  // Text group - title + description
  &__text-group {
    display: flex;
    flex-direction: column;
    gap: $bds-feature-mobile-text-gap;

    @include media-breakpoint-up(md) {
      gap: $bds-feature-tablet-text-gap;
    }

    @include media-breakpoint-up(lg) {
      gap: $bds-feature-desktop-text-gap;
    }
  }

  // Title - Heading MD from styles/_font.scss
  // Font: Tobias (secondary), Size: 40px, Weight: 300, Line-height: 46px, Letter-spacing: -1px
  &__title {
    @include type(heading-md);
    color: $bds-feature-title-color; // #141414 (Neutral-black) - same in light/dark
    margin: 0;
  }

  // Description - Body L from styles/_font.scss
  // Font: Booton (primary), Size: 18px, Weight: 300, Line-height: 26.1px, Letter-spacing: -0.5px
  &__description {
    @include type(body-l);
    color: $bds-feature-description-color; // #141414 (Neutral-black) - same in light/dark
    margin: 0;
  }



  // Media container
  &__media {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1 / 1;

    @include media-breakpoint-up(md) {
      aspect-ratio: 16 / 9;
    }

    @include media-breakpoint-up(lg) {
      flex: 1;
      min-height: 0;
      height: 100%;
      aspect-ratio: unset;
    }
  }

  // Media image
  &__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

// =============================================================================
// Color Theme Modifiers
// =============================================================================
// Generated from $bds-feature-variants map

@each $variant-name, $variant-colors in $bds-feature-variants {
  .bds-feature-two-column--#{$variant-name} {
    background-color: map-get($variant-colors, light-bg);
  }
}

// =============================================================================
// Dark Mode Theme Overrides
// =============================================================================

html.dark {
  .bds-feature-two-column {
    &__title {
      color: $bds-feature-title-color-dark;
    }

    &__description {
      color: $bds-feature-description-color-dark;
    }
  }

  // Generate dark mode styles for each variant
  @each $variant-name, $variant-colors in $bds-feature-variants {
    .bds-feature-two-column--#{$variant-name} {
      background-color: map-get($variant-colors, dark-bg);
    }
  }
}