// 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-cta-gap-col: 0; // Gap between button rows
$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-pl: 115px; // Left padding from Figma (non-standard)
$bds-feature-tablet-pr: 107px; // Right padding from Figma (non-standard)
$bds-feature-tablet-text-gap: $bds-space-sm; // 8px - spacing('sm')
$bds-feature-tablet-cta-gap-row: $bds-space-lg; // 16px - spacing('lg')
$bds-feature-tablet-cta-gap-col: 0;
$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-px: $bds-space-lg; // 16px - spacing('lg')
$bds-feature-mobile-text-gap: $bds-space-sm; // 8px - spacing('sm')
$bds-feature-mobile-cta-gap: $bds-space-lg; // 16px - spacing('lg')
$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;
  }

  // Desktop layout - hidden on mobile/tablet, shown on desktop
  &__desktop-layout {
    display: none;

    @include media-breakpoint-up(lg) {
      display: flex;
      width: 100%;
      align-items: stretch; // Both columns match height
    }
  }

  // Mobile layout - shown on mobile/tablet, hidden on desktop
  &__mobile-layout {
    display: block;

    @include media-breakpoint-up(lg) {
      display: none;
    }
  }

  // Container - uses PageGrid with wide variant (for mobile layout)
  // Override all PageGrid padding - content columns have their own padding
  &__container {
    padding: 0 !important; // Override PageGrid default padding at all breakpoints
  }

  // Row - uses PageGrid.Row (for mobile layout)
  &__row {
    gap: 0 !important; // No gap between content and media sections, override PageGrid
  }

  // 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%;
      padding: $bds-feature-desktop-py 0;
      // Match height of media column (which has aspect-ratio 1/1)
      aspect-ratio: 1 / 1;
    }
  }

  // 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 column wrapper - desktop layout (background image)
  &__media-col {
    display: flex;
    flex-direction: column;

    // Desktop: 50% width with background image, square aspect ratio
    @include media-breakpoint-up(lg) {
      width: 50%;
      aspect-ratio: 1 / 1;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  // Mobile media column
  &__media-col--mobile {
    display: flex;
    flex-direction: column;
  }

  // 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(md) {
      gap: 0;
    }

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

    // Secondary button should not stretch - keep intrinsic width
    >.bds-btn--secondary {
      align-self: flex-start;
    }
  }

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

    // Mobile - 1:1 aspect ratio
    aspect-ratio: 1 / 1;

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

    // Desktop - 1:1 aspect ratio (square)
    @include media-breakpoint-up(lg) {
      aspect-ratio: 1 / 1;
    }
  }

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

// =============================================================================
// Layout Modifiers (Arrange)
// =============================================================================

// Right arrangement - content on right, media on left (media first on mobile/tablet)
// Use flex-direction to swap columns on all screen sizes
.bds-feature-two-column--right {

  // Mobile/Tablet layout - reverse the column order to show media first
  .bds-feature-two-column__row {
    flex-direction: column-reverse !important;
  }

  // Desktop layout - reverse the flex direction for side-by-side
  .bds-feature-two-column__desktop-layout {
    @include media-breakpoint-up(lg) {
      flex-direction: row-reverse;
    }
  }

  // Desktop content wrapper - mirror the grid positioning for right layout
  // Content should start from col 2 and span 4 cols (same as left, grid handles positioning)
  .bds-feature-two-column__content-wrapper {
    @include media-breakpoint-up(lg) {
      // Same positioning as left layout - grid alignment handles visual positioning
      grid-column: 2 / span 4;
    }
  }
}