// ============================================================================
// :: Intro
// ============================================================================
/**
 * Intro can only be used once on a page and most of the time on top of a page.
 * It contains a title, very small intro text or description and a couple
 * or card-items to summarize certain features.
 */

// ============================================================================
// :: Settings
// ============================================================================
$card-spacing: 2rem;
$card-spacing-sides: $card-spacing * 2;

$card-spacing-tablet: 1rem;
$card-spacing-tablet-sides: $card-spacing-tablet * 2;

// ============================================================================
// :: Root
// ============================================================================
.bp-intro {
  padding: 5rem 0;

  @include respond-at($bp-breakpoint-tablet-base) {
    padding: 9rem 0;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-intro__header {
  margin-bottom: 2.5rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin-bottom: 4.5rem;
  }
}

.bp-intro__title,
.bp-intro__title-link {
  font-size: $bp-font-size-2x-large;
  line-height: $bp-line-height-1x-large;

  @include respond-at($bp-breakpoint-mobile-base) {
    font-size: $bp-font-size-3x-large;
    line-height: $bp-line-height-2x-large;
  }

  @include respond-at($bp-breakpoint-tablet-base) {
    font-size: $bp-font-size-4x-large;
    line-height: $bp-line-height-2x-large;
  }
}

.bp-intro__title-link {
  position: relative;
  overflow: hidden;

  // no text decoration is applied because we need to animatie the line
  // beneath the text. :after is used to render the line underneath.
  text-decoration: none;

  color: $bp-text-color-dark;

  transition: color 0.15s ease-in-out;

  // use the :after to create a line under the link
  &::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 0.2rem;

    background-color: $bp-primary-color;
  }

  &:hover {
    color: $bp-primary-color;
  }
}

.bp-intro__cards-container {
  margin-top: 4rem;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin-top: 8rem;
  }
}

.bp-intro__cards {
  width: 100%;

  @include respond-at($bp-breakpoint-tablet-base) {
    display: flex;
    flex-direction: row;
    margin: -$card-spacing-tablet;
    width: calc(100% + #{$card-spacing-tablet-sides});
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    margin: -$card-spacing;
    width: calc(100% + #{$card-spacing-sides});
  }
}

.bp-intro__card {
  width: 100%;
  margin-bottom: $card-spacing;

  @include respond-at($bp-breakpoint-tablet-base) {
    width: calc((100% / 3) - #{$card-spacing-tablet-sides});
    margin: $card-spacing-tablet;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    width: calc((100% / 3) - #{$card-spacing-sides});
    margin: $card-spacing;
  }
}