// Component: Hero with Background Image

@use '00-config' as *;

$hero-bg-image-bp: gesso-breakpoint(desktop) !default;

.c-hero-bg-image {
  color: gesso-color(text, on-dark);
  overflow: hidden;
  padding: rem(gesso-spacing(12)) 15%;
  position: relative;
  text-align: center;

  > figure,
  > figure img,
  > img {
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
  }

  &.has-content-left {
    text-align: start;

    @include breakpoint($hero-bg-image-bp) {
      padding-inline: 10% 35%;
    }
  }

  &.has-content-right {
    text-align: start;

    @include breakpoint($hero-bg-image-bp) {
      padding-inline: 35% 10%;
    }
  }

  &.has-overlay {
    &::after {
      background: rgba(0, 0, 0, 0.5);
      content: '';
      inset-block: 0;
      inset-inline: 0;
      position: absolute;
      z-index: 1;
    }
  }
}

.c-hero-bg-image__content {
  position: relative;
  z-index: 2;
}

.c-hero-bg-image__title {
  @include display-text-style(display);
  color: gesso-color(text, on-dark);
  margin-block-end: rem(gesso-spacing(5));

  @include breakpoint-max($hero-bg-image-bp, true) {
    font-size: rem(gesso-font-size(12));
    margin-block-end: rem(gesso-spacing(3));
  }
}

.c-hero-bg-image__summary {
  @include display-text-style(body-large);
  color: gesso-color(text, on-dark);
  margin-block-end: rem(gesso-spacing(5));

  @include breakpoint-max($hero-bg-image-bp, true) {
    font-size: rem(gesso-font-size(3));
    margin-block-end: rem(gesso-spacing(3));
  }
}
