// ========================
// PROJECTS SECTION SCSS
// ========================

@use '../variables' as *;
@use '../mixins' as *;

.projects {
  padding: var(--section-padding);
  background: var(--bg-secondary);

  &-grid {
    @include grid-responsive(400px, 40px);
    margin-bottom: 60px;

    @include respond-to(md) {
      grid-template-columns: 1fr;
    }
  }

  .project-card {
    background: var(--bg-primary);
    border-radius: $border-radius-large;
    overflow: hidden;
    @include box-shadow(light);
    @include transition();

    &:hover {
      transform: translateY(-10px) scale(1.02);
      @include box-shadow(large);
    }

    .project-header {
      padding: 24px 24px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .project-icon {
        @include icon-container(60px, $primary-color, $border-radius);
      }

      .project-status {
        display: flex;
        align-items: center;

        .status-badge {
          @include tag(6px 12px);
          font-size: map-get($font-sizes, xs);
          font-weight: 600;
          border-radius: 20px;
        }
      }
    }

    .project-content {
      padding: 24px;

      .project-title {
        font-size: map-get($font-sizes, xl);
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--text-primary);
      }

      .project-description {
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .project-technologies {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;

        .tech-tag {
          @include tag(6px 12px, var(--bg-secondary), var(--text-secondary));
          font-size: map-get($font-sizes, xs);
          font-weight: 500;
          border-radius: 20px;
        }
      }

      .project-features {
        h4 {
          font-size: map-get($font-sizes, base);
          font-weight: 600;
          margin-bottom: 12px;
          color: var(--text-primary);
        }

        ul {
          display: flex;
          flex-direction: column;
          gap: 8px;

          li {
            color: var(--text-secondary);
            position: relative;
            padding-left: 20px;

            &::before {
              content: '•';
              color: $primary-color;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
      }
    }

    .project-footer {
      padding: 0 24px 24px;

      .project-links {
        display: flex;
        gap: 12px;

        .project-link {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 16px;
          border-radius: $border-radius;
          font-weight: 500;
          border: 2px solid var(--border-color);
          color: var(--text-secondary);
          @include transition();

          &:hover {
            border-color: $primary-color;
            color: $primary-color;
            transform: translateY(-2px);
          }

          &.primary {
            background: $primary-color;
            border-color: $primary-color;
            color: white;

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