@use "../../../../styles/abstracts/variables" as *; 

.courses {
  border-radius: 6px;
  // margin-top: 1rem;
  // border: 1px solid $col-border-lining;
  // padding: 0rem 1rem;


  &__header {
    h1 {
      font-weight: 500;
      color: $col-white;
    }

    p {
      font-weight: 500;
      color: $col-white;
      font-size: .78rem;
    }
  }

  // Tab section
  &__tab {
    background: #1a1a1a;
    border: 1px solid $col-border-lining;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    width: 100%;
    padding: .5rem .5rem !important;
    align-items: center;
    font-size: .8rem;
    font-weight: 500;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    // margin-top: 1rem;

    &--item {
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      flex: 0 0 170px;
      color: $col-white;

      @media only screen and (max-width: 1000px) {
        flex: 0 0 150px;
        width: 100%;
        font-size: .85rem;
      }

      &--active {
        background: $col-orange;
        color: $col-dark;
        border-radius: 6px;
        padding: .5rem 1rem;
        cursor: pointer;
        font-size: .85rem;
        font-weight: 500;
        flex: 0 0 170px;
        text-align: center;

        @media only screen and (max-width: 1000px) {
          width: 100%;
          flex: 0 0 180px;
          text-align: center;
          font-size: .9rem;
          font-weight: 600 !important;
        }
      }
    }
  }

  &__courses {
    margin-top: 1rem;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 25px;

    @media only screen and (max-width: 1000px) {
      gap: 10px;
      display: flex;
      flex-direction: column;
    }
  }
}

// Skeleton styles
.course-skeleton {
  flex: 0 0 320px;
  background: #181818;
  border-radius: 6px;
  padding: 1rem 1.6rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  cursor: default;
  height: 18rem;

  @media only screen and (max-width: 1000px) {
    flex: 0 0 auto;
  }

  .skeleton-thumbnail,
  .skeleton-title,
  .skeleton-category,
  .skeleton-info,
  .skeleton-button {
    background: #2a2a2a;
    border-radius: 6px;
    animation: pulse 1.5s infinite ease-in-out;
  }

  .skeleton-thumbnail {
    width: 100%;
    height: 120px;
    border-radius: 6px;
  }

  .skeleton-title {
    width: 90%;
    height: 22px;
    border-radius: 4px;
  }

  .skeleton-category {
    width: 60%;
    height: 16px;
    border-radius: 4px;
  }

  .skeleton-info {
    width: 40%;
    height: 14px;
    border-radius: 4px;
  }

  .skeleton-button {
    width: 100%;
    height: 36px;
    margin-top: 2rem;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
}

// Pulse animation for loading effect
@keyframes pulse {
  0% {
    background-color: #2a2a2a;
  }
  50% {
    background-color: #3b3b3b;
  }
  100% {
    background-color: #2a2a2a;
  }
}