// vf-intro

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-intro {
  margin-bottom: 1rem;
  margin-bottom: var(--vf-intro-spacing, 1rem);

  & > * {
    grid-column: 2 / span 1;
  }
  .vf-lede {
    margin-bottom: #{space(800)};
  }
}

.vf-intro {
  --vf-intro-spacing: 3rem;
}

@media (min-width: $vf-breakpoint--lg) {
  .vf-intro {
    display: grid;
    grid-column: 1 / -1 !important;
    grid-column-gap: var(--page-grid-gap, 1em);
    grid-template-areas: '... header header' '... ...    links';
    grid-template-columns: var(--embl-grid-module--prime) auto var(--embl-grid-module--prime);
  }

  .vf-intro__heading { grid-area: header; }
  .vf-intro .vf-links { grid-area: links; grid-row-end: -1; }
}

.vf-intro__heading {
  @include set-type(text-heading--1, $custom-margin-bottom: 0);

  line-height: 1.25;

  + .vf-lede {
    --vf-stack-margin: #{space(800)};
  }
  + .vf-intro__subheading {
    --vf-stack-margin: 0;
  }
}

.vf-intro__subheading {
  @include set-type(text-heading--3, $custom-margin-bottom: 0);
  + * {
    --vf-stack-margin: #{space(800)};
  }
}

.vf-intro__heading--has-tag {
  display: flex;

  .vf-badge {
    margin-top: map-get($vf-spacing-map, vf-spacing--200); // compensate for the ascender height
  }

  @media (min-width: $vf-breakpoint--lg) {
    position: relative;

    .vf-badge {
      margin-right: map-get($vf-spacing-map, vf-spacing--400);
      position: absolute;
      right: 100%;
    }
  }
}

.vf-intro__text {
  @include set-type(text-body--2);
  @include margin--block(bottom, 24px);

  &:last-of-type {
    margin-bottom: 0;
  }

  & > a:not([class*='vf-']) {
    @include inline-link;
  }
}