@import "../mixins/all";

.info__section {
  width: 100%;
  background-size: cover;
  background-position: center;
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);
  @include prefix-prop(justify-content, center);

  @include dimensions__section--paddings;
}

.info__section--background {
  @extend .info__section;

  color: #FFFFFF;
  @include viewport-unit(min-height, 80vh);
}

.info__section--background-image--light {
  @extend .info__section--background;
  box-shadow: inset 0 0 0 999999px rgba(0, 0, 0, 0.3); /* is there any cleaner way? */
}

.info__section--background-image--dark {
  @extend .info__section--background;
  box-shadow: inset 0 0 0 999999px rgba(0, 0, 0, 0.5); /* is there any cleaner way? */
}

.info__section--background-color {
  @extend .info__section;
  color: #FFFFFF;
}

.info__section--blank {
  @extend .info__section;
  color: $typography__main-color;
}

.info__section--zebra {
  @extend .info__section--blank;
  background-color: #F6F6F6;
}

.info__content {
  width: 100%;
  text-align: center;

  @media #{$mobile-landscape}, #{$tablet} {
    @include viewport-unit(margin-top, -4.44vh); /* -50px, when content height is 900px, 80vh */
  }

  @media #{$desktop} {
    @include viewport-unit(margin-top, -4.44vh); /* -50px, when content height is 900px, 80vh */
  }
}

.info__content--single-column {
  @extend .info__content;

  // mobile
  margin: 0;

  @media #{$mobile-landscape}, #{$tablet} {
    max-width: 561px;
  }

  @media #{$desktop} {
    max-width: 808px;
  }
}

$content-padding: 36px;

.info__content--multi-column {
  @extend .info__content;

  @media #{$mobile-landscape}, #{$tablet} {
    margin-top: 0;
    max-width: $content-padding + 1120px + $content-padding;
  }

  @media #{$desktop} {
    margin-top: 0;
    max-width: $content-padding + 1120px + $content-padding;
  }
}

.info__title {
  @include typography__section-title;
  @include dimensions__section-title;
}

.info__title--single-column {
  @extend .info__title;
  // mobile
  margin-bottom: 18px;

  @media #{$mobile-landscape}, #{$tablet} {
    margin-bottom: 24px;
  }

  @media #{$desktop} {
    margin-bottom: 24px;
  }
}

.info__title--multi-column {
  @include typography__section-title;
  @include dimensions__section-title--limited-width;

  // Override default margin
  margin: 0px $dimension-mobile-margin-big 36px $dimension-mobile-margin-big;

  // mobile
  margin-bottom: 36px;

  @media #{$mobile-landscape}, #{$tablet} {
    margin-bottom: 36px;
  }

  @media #{$desktop} {
    margin-bottom: 48px;
  }
}

.info__paragraph {
  @include typography__section-paragraph;
  @include dimensions__section-paragraph;
}

.info__button {
  color: inherit;
  @include landing-page__button;
}

.info__column-button--ghost {
  color: inherit;
  @include landing-page__button;
  margin-top: 36px;
}

.info__button--ghost {
  @extend .info__button;
}

.info__button--inverted {
  @extend .info__button;
  background-color: #FFF;
}

.info__columns {
  @include prefix-val(display, flex);
  @include prefix-prop(flex-direction, column);

  @media #{$mobile-landscape}, #{$tablet} {
    @include prefix-prop(flex-direction, row);
  }

  @media #{$desktop} {
    @include prefix-prop(flex-direction, row);
  }
}

.info__columns {
  @extend .info__columns;

  padding: 0px;

  @media #{$mobile-landscape}, #{$tablet} {
    padding: 0px 36px;
  }

  @media #{$desktop} {
    padding: 0px 36px;
  }
}

.info__column {
  @include prefix-val(display, flex);
  @include prefix-prop(flex-direction, column);
  @include prefix-prop(align-items, center);
  @include prefix-prop(justify-content, space-between);

  width: 100%;

  // Mobile
  margin: 0px 0px 72px 0px;

  &:last-child {
    margin: 0px;
  }

  @media #{$mobile-landscape}, #{$tablet} {
    margin: 0px;
  }

  @media #{$desktop} {
    margin: 0px;
  }
}

.info__column--three-columns {
  @extend .info__column;

  @media #{$mobile-landscape} {
    max-width: 310px;
    margin-right: 24px;
    &:last-child {
      margin-right: 0px;
    }
  }

  @media #{$tablet} {
    max-width: 340px;
    margin-right: 36px;
    &:last-child {
      margin-right: 0px;
    }
  }

  @media #{$desktop} {
    max-width: 340px;
    margin-right: 50px;
    &:last-child {
      margin-right: 0px;
    }
  }
}

.info__column--two-columns {
  @extend .info__column;
  width: 100%;

  @media #{$mobile-landscape}, #{$tablet} {
    width: 50%;
    padding-right: 14px;

    &:last-child {
      padding-left: 14px;
      padding-right: 0px;
    }
  }

  @media #{$desktop} {
    padding-right: 39px;

    &:last-child {
      padding-left: 39px;
      padding-right: 0;
    }
  }
}

.info__column-icon {
  /* The SVG icon height may vary. This container is always 60x60 to make things aligned */

  display: inline-block;
  margin-bottom: 24px;

  // mobile
  & > svg {
    height: 48px;

    @media #{$mobile-landscape}, #{$tablet} {
      height: 48px;
    }

    @media #{$desktop} {
      height: 60px;
    }
  }
}

.info__column-title {
  color: #525961;
  @include typography__medium;

  // mobile
  margin: 0px $dimension-mobile-margin-big 14px $dimension-mobile-margin-big;

  @media #{$mobile-landscape} {
    margin: 0px 0px 14px 0px;
  }

  @media #{$tablet} {
    font-size: 24px;
    letter-spacing: -0.46px;
    line-height: 28px;

    margin: 0px 0px 14px 0px;
  }

  @media #{$desktop} {
    font-size: 28px;
    letter-spacing: -0.54px;
    line-height: 28px;

    margin: 0px 0px 28px 0px;
  }
}

.info__column-paragraph {
  @include typography__regular;
  color: #525961;

  // mobile
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 22px;

  margin: 0px $dimension-mobile-margin-big 8px $dimension-mobile-margin-big;

  @media #{$mobile-landscape} {
    margin: 0px 0px 8px 0px;
  }

  @media #{$tablet} {
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 22px;

    margin: 0px 0px 8px 0px;
  }

  @media #{$desktop} {
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 26px;

    margin: 0px 0px 8px 0px;
  }
}

.info__column-text-content {
  width: 100%;
}