@use "../abstracts" as *;

.blog-standard {
  padding: rem(100) 0;

  @media (max-width: 1399px) {
    padding: rem(90) 0;
  }

  @media (max-width: 1199px) {
    padding: rem(80) 0;
  }

  @media (max-width: 991px) {
    padding: rem(70) 0;
  }

  @media (max-width: 767px) {
    padding: rem(60) 0;
  }

  @media (max-width: 575px) {
    padding: rem(50) 0;
  }

  &__post {
    margin-bottom: rem(50);

    @media (max-width: 991px) {
      margin-bottom: rem(40);
    }

    @media (max-width: 767px) {
      margin-bottom: rem(30);
    }
  }

  &__img-wrapper {
    position: relative;
    border-radius: rem(20);
    overflow: hidden;
    margin-bottom: rem(25);

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  &__date {
    position: absolute;
    bottom: rem(0);
    left: rem(0);
    width: rem(70);
    height: rem(100);
    background: #fff;
    color: $color-primary;
    border: rem(2) solid $color-primary;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;

    @media (max-width: 1199px) {
      width: rem(65);
      height: rem(90);
    }

    @media (max-width: 767px) {
      width: rem(60);
      height: rem(85);
    }

    span {
      font-family: $font-family-base;
      font-weight: 700;
      font-size: 40px;
      line-height: 24px;
      letter-spacing: -2%;
      text-align: center;
      margin-bottom: 10px;

      @media (max-width: 1199px) {
        font-size: 36px;
      }

      @media (max-width: 767px) {
        font-size: 32px;
        margin-bottom: 5px;
      }
    }

    small {
      font-family: $font-family-base;
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -2%;
      text-align: center;
      text-transform: uppercase;
      color: #191825;

      @media (max-width: 1199px) {
        font-size: 15px;
      }

      @media (max-width: 767px) {
        font-size: 14px;
      }
    }
  }

  &__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 rem(15) 0;
    display: flex;
    gap: rem(25);
    flex-wrap: wrap;

    @media (max-width: 1199px) {
      gap: rem(20);
    }

    @media (max-width: 767px) {
      gap: rem(15);
    }

    li {
      font-size: rem(14);
      color: $color-text2;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: rem(8);

      @media (max-width: 575px) {
        font-size: rem(13);
      }

      i {
        color: $color-primary;
        font-size: rem(16);
      }
    }
  }

  &__title {
    font-size: rem(28);
    font-weight: 700;
    color: $color-heading;
    margin-bottom: rem(15);
    transition: color 0.3s ease;

    a {
      transition: inherit;
      color: $color-heading;
      font-family: $font-family-base;
      font-weight: 700;
      font-style: Bold;
      font-size: 30px;
      line-height: 100%;
      letter-spacing: -2%;

      @media (max-width: 1399px) {
        font-size: 28px;
      }

      @media (max-width: 1199px) {
        font-size: 26px;
      }

      @media (max-width: 991px) {
        font-size: 24px;
      }

      @media (max-width: 767px) {
        font-size: 22px;
      }

      @media (max-width: 575px) {
        font-size: 20px;
      }
    }
  }

  &__excerpt {
    font-size: rem(16);
    line-height: $line-height-base;
    color: $color-text2;
    margin-bottom: rem(25);

    @media (max-width: 767px) {
      font-size: rem(15);
      line-height: 1.6;
    }

    @media (max-width: 575px) {
      font-size: rem(14);
      margin-bottom: rem(20);
    }
  }

  // --- Organic Button ---
  &__btn {
    display: inline-flex;
    align-items: center;
    background: $color-primary;
    color: #fff;
    font-size: rem(13);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: rem(1);
    border-radius: rem(30);
    height: rem(50);
    padding: 0 rem(5) 0 rem(25);
    text-decoration: none;
    transition: all 0.3s ease;

    @media (max-width: 575px) {
      height: rem(45);
      padding: 0 rem(5) 0 rem(20);
      font-size: rem(12);
    }

    .btn-icon {
      background: #000;
      width: rem(55);
      height: rem(40);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 40% 60% 40% 60% / 50%;
      margin-left: rem(15);
      transition: all 0.3s ease;

      @media (max-width: 575px) {
        width: rem(45);
        height: rem(35);
        margin-left: rem(10);
      }
    }

    &:hover {
      background: $color-heading;
      color: #fff;

      .btn-icon {
        background: $color-primary;
      }
    }
  }

  // --- Sidebar Widgets ---
  &__widget {
    background: #EFF3FA;
    padding: rem(40);
    border-radius: rem(8);
    margin-bottom: rem(30);

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

    @media (max-width: 1399px) {
      padding: rem(35);
    }

    @media (max-width: 1199px) {
      padding: rem(30);
    }

    @media (max-width: 767px) {
      padding: rem(25);
    }

    @media (max-width: 575px) {
      padding: rem(20);
    }

    &-title {
      font-family: $font-family-base;
      font-weight: 700;
      font-size: 24px;
      line-height: 101%;
      letter-spacing: -2%;
      color: $color-heading;
      margin-bottom: rem(25);
      position: relative;

      @media (max-width: 1199px) {
        font-size: rem(20);
        margin-bottom: rem(20);
      }

      @media (max-width: 575px) {
        font-size: rem(18);
      }
    }
  }

  &__search {
    position: relative;

    input {
      width: 100%;
      height: rem(60);
      border: none;
      background: #fff;
      padding: 0 rem(60) 0 rem(25);
      border-radius: rem(10);
      font-size: rem(14);

      @media (max-width: 575px) {
        height: rem(50);
        padding: 0 rem(50) 0 rem(15);
      }

      &::placeholder {
        color: $color-text2;
      }
    }

    button {
      position: absolute;
      top: 50%;
      right: rem(10);
      transform: translateY(-50%);
      width: rem(40);
      height: rem(40);
      background: $color-primary;
      color: #fff;
      border: none;
      border-radius: rem(8);
      font-size: rem(16);
      transition: all 0.3s ease;

      @media (max-width: 575px) {
        width: rem(35);
        height: rem(35);
        font-size: rem(14);
      }

      &:hover {
        background: $color-heading;
      }
    }
  }

  &__latest-posts {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      display: flex;
      align-items: center;
      gap: rem(20);
      margin-bottom: rem(25);

      @media (max-width: 575px) {
        gap: rem(15);
      }

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

    .thumb {
      width: rem(100);
      height: rem(100);
      border-radius: rem(8);
      overflow: hidden;
      flex-shrink: 0;

      @media (max-width: 575px) {
        width: rem(90);
        height: rem(90);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .info {
      .date {
        font-size: rem(13);
        color: $color-text2;
        margin-bottom: rem(10);
        display: flex;
        align-items: center;
        gap: rem(5);

        @media (max-width: 575px) {
          font-size: rem(12);
        }

        i {
          color: #7D8978;
        }
      }

      h4 {
        font-family: $font-family-base;
        font-weight: 700;
        font-size: 16px;
        line-height: 28px;
        letter-spacing: -2%;
        color: $color-heading;
        margin: 0;

        @media (max-width: 575px) {
          font-size: rem(15);
        }

        a {
          color: #191825;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }

  &__cat-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin-bottom: rem(15);

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

      a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: rem(7.5) rem(7.5) rem(7.5) rem(22);
        border-radius: rem(8);
        color: #878C8F;
        font-family: $font-family-base;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: -2%;
        transition: all 0.3s ease;

        @media (max-width: 1199px) {
          font-size: 16px;
          padding: rem(6) rem(6) rem(6) rem(20);
        }

        @media (max-width: 575px) {
          font-size: 15px;
          padding: rem(5) rem(5) rem(5) rem(15);
        }

        .count {
          background: #f1f3f9;
          color: $color-heading;
          font-size: rem(12);
          font-weight: 700;
          width: 45px;
          height: 45px;
          border-radius: rem(8);
          transition: inherit;
          display: flex;
          align-items: center;
          justify-content: center;

          @media (max-width: 1199px) {
            width: 40px;
            height: 40px;
          }

          @media (max-width: 575px) {
            width: 35px;
            height: 35px;
          }
        }

        &:hover,
        &.active {
          color: $color-heading;

          .count {
            background: $color-primary;
            color: #fff;
          }
        }
      }
    }
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    gap: rem(10);

    a {
      background: #fff;
      padding: rem(12.5) rem(21.5);
      border-radius: rem(8);
      font-family: $font-family-base;
      font-weight: 600;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0%;
      text-transform: capitalize;
      color: $color-heading;
      transition: all 0.3s ease;

      @media (max-width: 575px) {
        padding: rem(8) rem(15);
        font-size: rem(13);
      }

      &:hover {
        background: $color-primary;
        color: #fff;
      }
    }
  }

  // --- Pagination ---
  &__pagination {
    display: flex;
    gap: rem(10);
    margin-top: rem(20);

    @media (max-width: 767px) {
      margin-top: rem(10);
      gap: rem(8);
    }

    .page-link {
      width: rem(60);
      height: rem(60);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #EFF3FA;
      color: $color-heading;
      font-weight: 700;
      border-radius: rem(8);
      border: none;
      transition: all 0.3s ease;

      @media (max-width: 1199px) {
        width: rem(55);
        height: rem(55);
      }

      @media (max-width: 767px) {
        width: rem(50);
        height: rem(50);
        font-size: rem(15);
      }

      @media (max-width: 480px) {
        width: rem(45);
        height: rem(45);
        font-size: rem(14);
      }

      &:hover,
      &.active {
        background: $color-primary;
        color: #fff;
      }
    }
  }
}