// Component: Hero with Inline Image

@use '00-config' as *;

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

.c-hero-inline-image {
  @include breakpoint($hero-inline-image-bp) {
    color: gesso-color(text, on-dark);
    position: relative;
    text-align: center;

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

      .c-hero-inline-image__content {
        z-index: 2;
      }
    }
  }
}

.c-hero-inline-image__media {
  display: block;
  line-height: 0;
  margin-block-end: rem(gesso-spacing(3));

  @include breakpoint($hero-inline-image-bp) {
    margin-block-end: 0;
  }

  img,
  figure,
  picture {
    width: 100%;
  }
}

.c-hero-inline-image__content {
  @include breakpoint($hero-inline-image-bp) {
    display: flex;
    flex-direction: column;
    inset-block: 5%;
    inset-inline: 15%;
    justify-content: center;
    position: absolute;
  }

  .has-content-left > & {
    @include breakpoint($hero-inline-image-bp) {
      align-items: flex-start;
      inset-inline: 10% 35%;
    }
  }

  .has-content-right > & {
    @include breakpoint($hero-inline-image-bp) {
      align-items: flex-start;
      inset-inline: 35% 10%;
    }
  }
}

.c-hero-inline-image__title {
  @include display-text-style(display);
  margin-block-end: rem(gesso-spacing(3));

  @include breakpoint($hero-inline-image-bp) {
    color: gesso-color(text, on-dark);
    margin-block-end: rem(gesso-spacing(5));
  }

  @include breakpoint-max($hero-inline-image-bp, true) {
    font-size: rem(gesso-font-size(12));
  }
}

.c-hero-inline-image__summary {
  @include display-text-style(body-large);
  margin-block-end: rem(gesso-spacing(3));

  @include breakpoint($hero-inline-image-bp) {
    color: gesso-color(text, on-dark);
    margin-block-end: rem(gesso-spacing(5));
  }
}
