@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.BlogBannerWrapper {
  background-color: $secondaryColor;
  .BannerHeader {
    border-top: 1px solid #ffffff50;
    border-bottom: 1px solid #ffffff50;
    h1 {
      font-weight: $fw500;
      text-transform: uppercase;
      color: $whiteColor;
      font-size: $fs34;
      line-height: 45px;
      @media (min-width: $sm) {
        font-size: $fs60;
        line-height: 70px;
      }
      @media (min-width: $md) {
        font-size: $fs74;
        line-height: 85px;
      }
      @media (min-width: $lg) {
        font-size: $fs86;
        line-height: 100px;
      }
      @media (min-width: $xl) {
        font-size: $fs110;
        line-height: 120px;
      }
      @media (min-width: $xxl) {
        font-size: $fs130;
        line-height: 140px;
      }
    }
    .BannerHeaderLink {
      transition: 0.3s all;
      .RoundSpan {
        border: 1px solid $whiteColor;
        .RightArrowIcon {
          background-color: $whiteColor;
          mask-image: url("../../../../../public/images/rounded-btn-arrow.svg");
          -webkit-mask-image: url("../../../../../public/images/rounded-btn-arrow.svg");
          rotate: -45deg;
          transition: 0.3s all;
        }
      }
      &:hover {
        .RoundSpan {
          .RightArrowIcon {
            rotate: 0deg;
            transition: 0.3s all;
          }
        }
      }
      .BtnText {
        @media (min-width: $sm) {
          color: $whiteColor;
          background-color: $secondaryColor;
          font-weight: $fw400;
          font-size: $fs18;
          line-height: 22px;
        }
        @media (min-width: $md) {
          font-size: $fs18;
          line-height: 22px;
        }
        @media (min-width: $lg) {
          font-size: $fs22;
          line-height: 24.5px;
        }
      }
    }
  }
  .BlogPostsWrap {
    .BlogPostItemsWrap {
      display: flex;
      flex-direction: column;
      gap: 20px;
      @media (min-width: $md) {
        gap: 25px;
      }
      @media (min-width: $xl) {
        gap: 30px;
      }
      .BlogPostItem {
        &:hover {
          .LinkArrow {
            transform: rotate(45deg);
            background-color: $whiteColor;
            &::before{
              background-color: $primaryColor;
            }
          }
        }
        .LinkArrow {
          background-color: $primaryColor;
          transition: 0.3s all;
          &::before {
            mask-size: contain;
            mask-image: url("../../../../../public/images/icon-right-arrow.svg");
            -webkit-mask-image: url("../../../../../public/images/icon-right-arrow.svg");
            -webkit-mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            transition: all 0.3s ease-in-out;
            background-color: $whiteColor;
          }
        }
        .BlogPostItemContnet {
          background-color: $whiteColor;
          --r: 19px; /* the radius */
          --s: 45px; /* size of inner curve */
          --x: -7px; /* horizontal offset (no percentage) */
          --y: -7px; /* vertical offset (no percentage) */
          border-radius: var(--r);
          --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
          --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
          --_d:(var(--s) + var(--r));
          mask:
            calc(100% - var(--_d) - var(--x)) 0 var(--_m),
            100% calc(var(--_d) + var(--y)) var(--_m),
            radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px)) 
             calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
            var(--_g) calc(-1*var(--_d) - var(--x)) 0,
            var(--_g) 0 calc(var(--_d) + var(--y));
          mask-repeat: no-repeat;
          height: 100%;
          @media (min-width: $xl) {
            --r: 30px;
            --s: 45px;
            --x: -8px;
            --y: -8px;
          }
          @media (min-width: $xxl) {
            --r: 35px;
            --s: 45px;
            --x: -10px;
            --y: -10px;
          }
          @media (min-width: $xxxl) {
            --r: 40px;
            --s: 50px;
            --x: -10px;
            --y: -10px;
          }
          h3 {
            color: $blackColor;
            font-weight: $fw600;
            font-size: $fs18;
            line-height: 28px;
            @media (min-width: $sm) {
              font-size: $fs20;
              line-height: 30px;
            }
            @media (min-width: $xxxl) {
              font-size: $fs22;
              line-height: 32px;
            }
          }
          .ReadTime {
            display: inline-flex;
            padding: 8px 16px 8px 28px;
            background-color: $secondaryColor;
            color: $whiteColor;
            font-weight: $fw500;
            font-size: $fs14;
            line-height: 14px;
            @media (min-width: $xxl) {
              font-size: $fs16;
            }
          }
          .ShortDescription {
            color: $grey344Color;
            line-height: 24px;
            font-size: $fs14;
            font-weight: $fw500;
            @media (min-width: $xxl) {
              font-size: $fs16;
            }
          }
          .AuthorName {
            color: $grey475Color;
            line-height: 24px;
            font-weight: $fw500;
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}