// ==============================================
// 💪 JOB INTERVIEW SCOPE SCSS
// ==============================================

.sec-blog{
  padding: 214px 0 100px;
  @media screen and (max-width: $screen-xs) {
    padding: 136px 0 60px;
  }
  .blog-wrapper{
    .filter-header{
      ul.filter-list{
        display: flex;
        align-items: center;
        justify-content: right;
        gap: 64px;
        @media screen and (max-width: $screen-xs) {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: $white;
          justify-content: center;
          z-index: 2;
        }
        li{
          display: inline-flex;
          align-items: center;
          gap: 10px;
          position: relative;
          &:not(:last-of-type){
            &:before{
              content: "";
              background-color: $cool-gray-03;
              width: 1px;
              height: 100%;
              position: absolute;
              right: -32px;
              top: 0;
            }
          }
          .filter-icon{
            width: 60px;
            height: 60px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            @media screen and (max-width: 991px) and (min-width: 768px) {
              width: 40px;
              height: 40px;
            }
            a{
              &.active{
                img{
                  filter: brightness(0) saturate(100%) invert(36%) sepia(92%) saturate(2100%) hue-rotate(330deg) brightness(103%) contrast(101%);
                }
              }
              img{
                max-width: 24px;
                filter: brightness(0) saturate(100%) invert(11%) sepia(7%) saturate(19%) hue-rotate(333deg) brightness(93%) contrast(96%);
              }
            }
          }
        }
      }
    }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      @media screen and (min-width: 992px) {
        align-items: self-end;
      }
      @media screen and (max-width: 991px) and (min-width: 768px) {
        grid-template-columns: repeat(2, calc(50% - 12px));
      }
      @media screen and (max-width: $screen-xs) {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .candidate-card-03 {
        width: 100%;
        height: auto;
        @media screen and (min-width: 992px) {
          grid-column: span 4;
        }
        &:nth-of-type(1){
          @media screen and (min-width: 992px) {
            min-height: 869px;
            grid-column: span 8;
          }
          .img-wrapper {
            img {
              @media screen and (min-width: 992px) {
                min-height: 480px;
              }
            }
          }
          .content-wrapper {
            @media screen and (min-width: 992px) {
              padding: 42px 42px 104px;
            }
            .date-wrapper {
              a {
                @media screen and (min-width: 992px) {
                  @include font-size(14);
                }
              }
            }
            h4 {
              @media screen and (min-width: 992px) {
                @include font-size(32);
              }
            }
            p {
              @media screen and (min-width: 992px) {
                @include font-size(20);
              }
            }
          }
        }
      }

      &:has(.candidate-card-03) {
        .candidate-card-03:nth-of-type(1) {
          @media screen and (min-width: 992px) {
            grid-column: span 8;
          }
        }
      }
    }
    .btn-wrapper{
      .btn-style{
        @media screen and (max-width: $screen-xs) {
          min-width: 100%;
        }
      }
    }
  }
}

.sec-blog-single{
  padding: 180px 0 60px;
  @media screen and (max-width: $screen-xs) {
    padding: 72px 0 35px;
  }
  .container{
    max-width: 1290px;
  }
  > .author-img{
    img{
      @media screen and (max-width: $screen-xs) {
        width: 100%;
        height: 320px;
        object-fit: cover;
        object-position: top;
      }
    }
  }
  .article-content{
    .tag-interview{
      text-transform: uppercase;
      color: $primary-01;
      letter-spacing: 1.4px;
    }
    .blog-card{
      &:not(:last-of-type){
        margin-bottom: 80px;
        @media screen and (max-width: $screen-xs) {
          margin-bottom: 60px;
        }
      }
      .blog-content{
        &:not(:last-of-type){
          margin-bottom: 44px;
          @media screen and (max-width: $screen-xs) {
            margin-bottom: 32px;
          }
        }
        .author-img{
          img{
            width: 100%;
          }
        }
        ol{
          padding-left: 16px;
          position: relative;
          li{
            list-style: decimal;
            display: list-item;
            &:not(:last-of-type){
              margin: 0 0 2px 0;
            }
          }
        }
        .top-separator{
          padding-top: 32px;
          margin-top: 32px;
          border-top: 1px solid $cool-gray-03;
          @media screen and (max-width: $screen-xs) {
            padding-top: 24px;
            margin-top: 24px;
          }
        }
      }
    }
  }
}