// vf-hero

@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')}
 */
/* stylelint-disable */
@import 'vf-hero.variables.scss';

.vf-hero {
  background-color: color(green);
  background-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/roundels.png');
  background-image: var(--vf-hero--bg-image, url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/roundels.png'));

  padding: map-get($vf-spacing-map, vf-spacing--800) 0;
  padding: var(--vf-hero--spacing, #{map-get($vf-spacing-map, vf-spacing--1200)}) 0;

  // Hero only has gap when not followed by fullwidth background or navigation
  // The hero bottom margin is created by pushing the next element "down"
  & + :not(.vf-u-fullbleed):not(.vf-navigation) {
    margin-top: map-get($vf-spacing-map, vf-spacing--800);
    --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--800)};
  }
}

.vf-hero.vf-u-fullbleed::before {
  background-size: cover;
  background-size: var(--vf-hero--bg-image-size, cover);
  z-index: 1;
}

.vf-hero__content {
  background-color: ui-color(white);
  color: ui-color(black);
  box-shadow:
    2px 0 3px rgba(0, 0, 0, .1),
    -2px 0 3px rgba(0, 0, 0, .1),
    0 2px 3px rgba(0, 0, 0, .1);
  position: relative;
  z-index: set-layer(vf-z-index--hero);
  max-width: max-content;
  width: auto;
}

.vf-hero__kicker {
  @include set-type(text-body--3, $custom-margin-bottom: 0);
  line-height: 1;

  position: relative;

  a {
    color: currentColor;

    &:hover {
      text-decoration-thickness: 2px !important;
    }
  }
}

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

  line-height: 1.25;
  word-break: break-word;
  max-width: 30ch;
}

.vf-hero__heading_link {
  color: currentColor;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

.vf-hero__subheading {
  @include set-type(text-heading--4, $custom-margin-bottom: 0);
  --vf-stack-margin: 0;
  max-width: 50ch;
}

.vf-hero__text {
  @include set-type(text-body--2, $custom-margin-bottom: 0);

  max-width: 60ch;

  a {
    border-bottom: none;
    color: color(blue);
    text-decoration: none;
  }
  a:visited {
    color: color(blue--dark);
  }
  a:focus,
  a:hover {
    color: color(blue--dark);
    text-decoration: underline;
    text-decoration-thickness: 2px !important;
  }
}

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

  align-items: center;
  border-bottom: none;
  color: color(blue);
  display: inline-flex;
  text-decoration: none;

  svg {
    fill: currentColor;
    flex: 1 0 auto;
    margin-left: map-get($vf-spacing-map, vf-spacing--200);
  }
  &:visited {
    color: color(blue--dark);
  }

  &:focus,
  &:hover {
    color: color(blue--dark);
    text-decoration: underline;
    text-decoration-thickness: 2px !important;
    svg {
      transform: translateX(.25rem);
    }
  }
}

// sizes
// ----------------------------------------------------------------------

.vf-hero--400 {
  --vf-hero--spacing: #{space(400)};
  & > .vf-box {
    --vf-box-padding: var(--vf-hero--spacing);
  }
}

.vf-hero--800 {
  --vf-hero--spacing: #{space(800)};
  & > .vf-box {
    --vf-box-padding: calc(var(--vf-hero--spacing) / 2);
  }
}

.vf-hero--1200 {
  --vf-hero--spacing: #{space(1200)};
  & > .vf-box {
    --vf-box-padding: calc(var(--vf-hero--spacing) / 2);
  }
}

// This variant is supported, but hidden and currently not recommended (subject to change)
.vf-hero--1600 {
  --vf-hero--spacing: #{space(1600)};
  & > .vf-box {
    --vf-box-padding: calc(var(--vf-hero--spacing) / 2);
  }
}