@use '@inside-library/styles/mixins/partials/common-mixin' as *;
@use 'sass:math';

$percentageRight: math.percentage(math.div(70, 570));
$percentageTop: math.percentage(math.div(60, 370));
$percentageBottom: math.percentage(math.div(80, 370));
$percentageLeft: math.percentage(math.div(50, 570));

.homepage-main-content  {
  h3 {
    position: relative;
    font-family: var(--font-primary);
    font-weight: bold;
    letter-spacing: 1.03px;
    line-height: 36px;
    text-transform: uppercase;

    @include fontSize(20);

    &::before,
    &::after {
      position: relative;
      top: -5px;
      display: inline-block;
      width: 26px;
      height: 4px;
      background: var(--color-secondary);
      content: '';
    }

    &::before {
      margin-right: 8px;
    }

    &::after {
      margin-left: 8px;
    }
  }

  .slider-container.has-border {
    border-color: var(--color-secondary);

    .capsule-news-lib-container .category {
      color: var(--color-secondary);
      text-transform: uppercase;
    }
  }

  .homepage-banner .column{
    display: flex;

     > .tools-weather-container {
      overflow: hidden;
    }
  }

  .tools-weather-container {
    width: 100%;
    display: flex;
    justify-content: space-between;

    @include mobile {
      flex-direction: column;
      gap: var(--spacing-xl);
    }

    > div {
      width: 48%;

      @include mobile {
        width: 100%;
      }
    }

    .weather {
      height: 100%;
      max-width: 200px;
      background: var(--color-secondary);

      @include tablet {
        margin-left: var(--spacing-s);
      }

      @include mobile {
        margin-left: 0;
      }

      .title {
        text-align: center;
        text-transform: uppercase;
      }

      .item {
        position: relative;
        text-align: center;

        .temperature {
          font-weight: lighter;
          sup {
            @include fontSize(20);
          }
        }

        .content__edit {
          position: absolute;
          top: 0;
          right: var(--spacing-m);
        }

        svg {
          width: 70%;
          max-height: 100px;
        }
      }

      .swiper-pagination {
        margin-top: var(--spacing-l);
        bottom: 0;
        z-index: 30;

        .swiper-pagination-bullet {
          margin: 0 var(--spacing-xs) !important;
          background: transparent;
          border: solid 1px var(--color-light);
          opacity: 1;

          @include size(7px);

          &-active {
            background: var(--color-light);
          }
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        top: 40%;
        width: 20px;
        height: 20px;
        filter: #{'brightness(0) invert(1)'};
        opacity: 0.5;
        outline: none;
      }

      .swiper-button-prev {
        left: var(--spacing-m);
      }

      .swiper-button-next {
        right: var(--spacing-m);
      }
    }
  }

  .experience-resume-container {
    height: 100%;
    width: 100%;
    position: relative;

    min-height: 200px;

    .image {
      position: absolute;
      left: 0;
      width: 90%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .card {
      position: absolute;
      right: 0%;
      bottom: 50%;
      padding: 4% 6%;
      max-width: 70%;
      z-index: 1;
      background: var(--color-light);
      transform: translateY(50%);
      box-shadow: var(--shadow-default);
      opacity: 0.75;
    }
  }

  .homepage-experiences {
    & > .layout-builder__col-container {
      align-items: stretch;

      & > .layout-builder__col {
        &:last-of-type {
          & > .block-builder {
            height: 80%;

            & > div:first-of-type {
              height: 100%;

              & > .block-builder__content {
                height: 100%;

                & > div {
                  height: 100%;
                }
              }

              & > .block-builder__footer {
                position: relative;
                z-index: 2;
              }
            }
          }
        }
      }
    }
  }

  .communication-block {
    position: relative;
    height: 444px;

    @include tablet {
      margin-top: var(--spacing-xxl);
    }

    .content__edit {
      position: absolute;
      top: 20px;
      left: 20px;
    }

    &__bg,
    &__text {
      position: absolute;
    }

    &__bg {
      background-color: var(--color-light);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;

      top: $percentageTop;
      right: 0;
      bottom: 0;
      left: $percentageLeft;
    }

    &__text {
      position: relative;
      top: 0;
      right: $percentageRight;
      bottom: $percentageBottom;
      left: 0;
      display: flex;
      width: calc(100% - #{$percentageRight});
      min-height: calc(100% - #{$percentageBottom});
      padding: 9%;
      background: rgba(var(--color-secondary-rgb), 0.8);
      flex-direction: column;
      text-align: center;

      &__title {
        text-transform: uppercase;

        @include fontSize(21);

        @include mobile {
          @include fontSize(15);
        }
      }

      &__content {
        flex: 1;

        @include fontSize(16);

        &,
        p {
          color: var(--color-light);
        }
      }
    }
  }

  @media only screen and (max-width: 1000px) {
    .layout-builder > .layout-builder-1 > .layout-builder__col {
      width: 100%;
    }
  }


}
