/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/utils/hang' as *;
@use '../../internal/content-block';
@use '../link-with-icon';

@mixin content-block-headlines {
  :host(#{$c4d-prefix}-content-block-headlines),
  .#{$prefix}--content-block-headlines {
    .#{$prefix}--content-block {
      @include breakpoint(md) {
        padding-block-start: $spacing-07;
      }

      @include breakpoint(lg) {
        padding-block-start: $spacing-10;
      }
    }

    .#{$prefix}--content-block__heading,
    .#{$prefix}--content-block__copy {
      @include breakpoint(lg) {
        @include make-col-ready;
        @include make-col(8, 12);
        @include hang;
      }
    }

    ::slotted(#{$c4d-prefix}-content-block-copy),
    .#{$prefix}--content-block__copy {
      margin-block-end: $spacing-12;

      p {
        margin-block-end: $spacing-10;

        @include breakpoint(lg) {
          margin-block-end: $spacing-12;
        }
      }
    }
  }

  .#{$prefix}--content-block-headlines__container {
    @include make-row;
  }

  .#{$prefix}--content-block-headlines__row {
    @include make-col-ready;

    &:last-of-type {
      margin-block-end: $spacing-07;

      @include breakpoint(md) {
        margin-block-end: $spacing-07;
      }

      @include breakpoint(lg) {
        margin-block-end: $spacing-12;
      }
    }

    @include breakpoint(md) {
      @include make-col(12, 12);
    }

    @include breakpoint(lg) {
      @include make-col(8, 12);
    }
  }

  .#{$prefix}--content-block-headlines__item-container {
    @include breakpoint(md) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  :host(#{$c4d-prefix}-content-block-headlines-item),
  .#{$prefix}--content-block-headlines__item {
    display: flex;
    flex-direction: column;

    border-block-start: 1px solid $layer-accent-01;
    padding-block: $spacing-05 $spacing-07;

    @include make-col-ready;

    .#{$prefix}--content-block-headlines__heading,
    .#{$prefix}--content-block-headlines__copy {
      color: $text-primary;
      max-inline-size: 90%;
    }

    .#{$prefix}--content-block-headlines__copy {
      @include type-style('body-02', true);

      margin: $spacing-05 0 0;
    }

    :host(#{$c4d-prefix}-content-block-headlines-heading),
    .#{$prefix}--content-block-headlines__heading {
      @include type-style('display-02', true);
    }

    .#{$prefix}--content-block-headlines__cta-container {
      margin-block-start: auto;
    }

    .#{$prefix}--link {
      margin-block-start: $spacing-05;
    }

    @include breakpoint(md) {
      padding-block: $spacing-05 $spacing-10;
    }
  }

  .#{$prefix}--content-layout--with-headlines {
    grid-template:
      'heading' auto
      'body' auto
      'footer' auto / 1fr;

    @include breakpoint(md) {
      grid-template:
        'heading heading' auto
        'body body' auto
        'footer .' auto / 1fr 1fr;
    }

    @include breakpoint(lg) {
      grid-template:
        'heading heading .' auto
        'body body .' auto
        'footer . .' auto / 1fr 1fr 1fr;
    }
  }
}