@import '~styles/imports/index';

.title {
  margin-bottom: $title-bottom-padding;

  @media (--smartphone) {
    margin-bottom: 20px;
  }
}

.headerCentered {
  text-align: center;

  .title {
    margin-left: auto;
    margin-right: auto;
    width: grid(13);

    @media (--smartphone) {
      width: gridValueMobile(13);
    }
  }
}

.wrapper {
  .eyebrow {
    opacity: 0;
    transform: translateX($translateAppear);
    transition: $transiOpacityTransfAppear;
  }

  .mediaWrapper {
    opacity: 0;
    transform: translateX($translateAppearBig);
    transition: $transiOpacityTransfAppear;
  }

  &.narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 920px;
  }

  &.isHeaderCentered:not(.transitionInverted) {
    @include stagger-specific-children-from(
      .title,
      .contentWrapper,
      .mediaWrapper,
      $delayAppearSlow,
      $translateAppear,
      0,
      $delayAppear
    );

    .eyebrow {
      transition-delay: $delayAppear;
    }
  }

  &.isHeaderCentered.transitionInverted {
    @include stagger-specific-children-from(
      .title,
      .mediaWrapper,
      .contentWrapper,
      $delayAppearSlow,
      $translateAppear,
      0,
      $delayAppear
    );

    .eyebrow {
      transition-delay: $delayAppear;
    }
  }

  &:not(.isHeaderCentered).transitionInverted {
    @include stagger-specific-children-from(
      .title,
      .description,
      .buttonWrapper,
      $delayAppearSlow,
      $translateAppear,
      0,
      .5s
    );

    .eyebrow {
      transition-delay: .5s;
    }

    .mediaWrapper {
      transition-delay: $delayAppear;
    }
  }

  &:not(.isHeaderCentered):not(.transitionInverted) {
    @include stagger-specific-children-from(
      .title,
      .description,
      .buttonWrapper,
      $delayAppearSlow,
      $translateAppear,
      0,
      $delayAppear
    );

    .eyebrow {
      transition-delay: $delayAppear;
    }

    .mediaWrapper {
      transition-delay: .5s;
    }
  }

  &:global(.enteredOnce) {
    .title,
    .eyebrow,
    .mediaWrapper {
      opacity: 1;
      transform: none;
    }
  }

  &:global(.noAppear) {
    .title,
    .eyebrow,
    .mediaWrapper {
      transition: none;
    }
  }
}

.flexWrapper {
  align-items: center;
  display: flex;

  @media (--smartphone) {
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }

  &.narrow,
  &.narrow.inverted {
    .mediaWrapper {
      width: grid(12, 24);

      @media (--smartphone) {
        width: gridValueMobile(10);
      }
    }

    .contentWrapper {
      margin: 0;
      padding: 0 grid(1, 16) 0 0;
      width: grid(12, 24);

      @media (--smartphone) {
        margin: 24px gridValueMobile(1) 0;
        padding: 0;
        width: gridValueMobile(12);
      }
    }
  }

  &.narrow.inverted {
    .contentWrapper {
      margin: 0;
      padding: 0 0 0 grid(1, 16);
      width: grid(12, 24);

      @media (--smartphone) {
        margin: 24px gridValueMobile(1) 0;
        padding: 0;
        width: gridValueMobile(12);
      }
    }
  }

  &.offset {
    .mediaWrapper {
      width: grid(13, 23);

      @media (--smartphone) {
        width: gridValueMobile(13);
      }
    }

    .contentWrapper {
      margin: 0 grid(2, 23) 0 0;

      @media (--smartphone) {
        margin: 24px gridValueMobile(1) 0;
        width: gridValueMobile(13);
      }
    }
  }

  &.inverted.offset {
    .mediaWrapper {
      width: grid(13, 23);

      @media (--smartphone) {
        width: gridValueMobile(13);
      }
    }
  }

  &.inverted {
    @media (--smartphone) {
      flex-direction: column;
    }

    .contentWrapper {
      margin: 0 grid(3, 23) 0 grid(1, 23);

      @media (--smartphone) {
        margin: 24px gridValueMobile(1) 0;
      }
    }

    .mediaWrapper {
      width: grid(11, 23);

      @media (--smartphone) {
        width: gridValueMobile(13);
      }
    }
  }

  &.leftAlignedOnMobile {
    .contentWrapper {
      @media (--smartphone) {
        text-align: left;
      }
    }

    .buttonWrapper {
      @media (--smartphone) {
        align-items: flex-start;
      }
    }
  }
}

.contentHeading {
  margin-bottom: 6px;
}

.contentParagraph:not(:last-child) {
  margin-bottom: 24px;
}

.buttonWrapper {
  align-items: center;
  display: flex;
  margin-top: 32px;

  @media (--smartphone) {
    flex-direction: column;
  }
}

.primaryButton {
  flex-shrink: 0;
  margin-right: 32px;

  @media (--smartphone) {
    margin-right: 0;

    &:not:(:last-child) {
      margin-bottom: 24px;
    }
  }
}

.secondaryButton {
  flex-shrink: 0;
}

.contentWrapper {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0 grid(1, 23) 0 grid(3, 23);
  width: grid(8, 23);

  .longContent & {
    width: grid(11, 23);
  }

  @media (--smartphone) {
    margin: 24px gridValueMobile(1) 0;
    text-align: center;
    width: gridValueMobile(13);

    .longContent & {
      width: gridValueMobile(13);
    }
  }
}

.mediaWrapper {
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  width: grid(11, 23);

  @media (--smartphone) {
    margin: 0 gridValueMobile(1);
    width: gridValueMobile(13);
  }

  img {
    width: 100%;
  }

  .media:nth-child(1) {
    display: block;
    width: 100%;
  }

  .media:nth-child(2) {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

.mediaWrapper.hasWideImage .media:nth-child(1) img {
  transform: translate3d(24px, -24px, 0);

  @media (--above-smartphone) {
    transform: translate3d(40px, -40px, 0);
  }
}

.inverted .mediaWrapper.hasWideImage .media:nth-child(1) img {
  transform: translate3d(-24px, 24px, 0);

  @media (--above-smartphone) {
    transform: translate3d(-40px, 40px, 0);
  }
}

.accentImage {
  margin-bottom: 16px;
  width: 100%;

  @media (--smartphone) {
    display: none;
  }
}