@type: 'extra';
@element: 'hero';

@import (multiple) '../../theme.config';

/*-------------------
      Hero
--------------------*/

.block.hero .ui.delete-button {
  color: @heroDeleteButtonColor !important;
}

.eea.hero-block {
  position: @heroBlockPosition;
}

.eea.hero-block.spaced {
  margin: @heroBlockSpacedMargin;
}

.hero-block-inner-wrapper {
  height: 100%;
  padding-block: @heroBlockWrapperPadding;
  position: relative;
}

.hero-block-body {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: @mobileHeroBlockBodyGap;
}

.hero-block-image {
  background-color: inherit;
  background-repeat: @heroBlockImageBackgroundRepeat;
  background-size: @heroBlockImageBackgroundSize;
  background-position: @heroBlockImageBackgroundPosition;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

.hero-block-image-wrapper {
  position: absolute;
  min-height: @heroBlockImageWrapperMinHeight;
  width: 100%;
  height: 100%;
}

.hero-block-body .eea.copyright {
  position: absolute;
  bottom: @mobileCopyrightBottom;
}

.hero-block-text .quoted > * {
  display: inline-block;
}

.hero-block[class*='color-bg']:not(.full-width) {
  padding: @heroBlockHomePagePadding;
}

.eea.hero-block.full-height,
.eea.hero-block.full-height .hero-block-image-wrapper,
.eea.hero-block.full-height .hero-block-inner-wrapper {
  min-height: @mobileHeroBlockMinHeight;
}

@media only screen and (min-width: @tabletBreakpoint) {
  .eea.hero-block.full-height,
  .eea.hero-block.full-height .hero-block-image-wrapper,
  .eea.hero-block.full-height .hero-block-inner-wrapper {
    min-height: @tabletHeroBlockMinHeight;
  }
  .hero-block-body {
    gap: @tabletHeroBlockBodyGap;
  }
  .hero-block-inner-wrapper {
    padding-block: @tableHeroBlockWrapperPadding;
  }
  .homepage #page-document > .eea.hero-block:first-of-type .hero-block-body {
    margin: @heroBlockHomePageBodyMargin;
  }
}

@media only screen and (min-width: @computerBreakpoint) {
  .eea.hero-block.full-height,
  .eea.hero-block.full-height .hero-block-image-wrapper,
  .eea.hero-block.full-height .hero-block-inner-wrapper {
    min-height: @desktopHeroBlockMinHeight;
  }

  .hero-block-inner-wrapper {
    padding-block: @desktopHeroBlockWrapperPadding;
  }
  .hero-block-body {
    gap: @desktopHeroBlockBodyGap;
  }
  .hero-block-body .eea.copyright {
    bottom: @desktopCopyrightBottom;
  }
}

@media print {
  .homepage.homepage-inverse {
    .hero-block-inner-wrapper {
      padding: @printInverseHeroBlockPrintPadding;
    }
  }

  .hero-block-inner-wrapper {
    padding: @printHeroBlockPrintPadding;
  }

  .eea.hero-block.full-height,
  .eea.hero-block.full-height .hero-block-image-wrapper,
  .eea.hero-block.full-height .hero-block-inner-wrapper {
    min-height: unset;
  }

  .hero-block-image-wrapper {
    left: 0 !important;
    right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0% !important;
    width: 100% !important;
    break-inside: avoid-page;
  }

  .hero-block {
    break-inside: avoid-page;
  }

  .hero-block-body .eea.copyright {
    position: relative;
    bottom: 0;
  }
}

.loadUIOverrides();
