// ========================
// EDUCATION SECTION SCSS
// ========================

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

.education {
  padding: var(--section-padding);

  &-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }

  &-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  &-card {
    display: flex;
    gap: 32px;
    @include card(32px, $border-radius-large, light);

    @include respond-to(md) {
      flex-direction: column;
      text-align: center;
    }

    &.main-education {
      .education-timeline {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;

        @include respond-to(md) {
          flex-direction: row;
          justify-content: center;
          margin-bottom: 20px;
        }

        .timeline-dot {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          @include flex-center();
          color: white;
          margin-bottom: 16px;

          @include respond-to(md) {
            margin-bottom: 0;
            margin-right: 16px;
          }
        }

        .timeline-line {
          width: 2px;
          height: 100px;
          background: var(--border-color);
          border-radius: 1px;

          @include respond-to(md) {
            display: none;
          }
        }
      }

      .education-content-card {
        flex: 1;
      }

      .education-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        @include respond-to(md) {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

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

          .education-meta {
            display: flex;
            flex-direction: column;
            gap: 8px;

            span {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: map-get($font-sizes, sm);
              color: var(--text-secondary);

              @include respond-to(md) {
                justify-content: center;
              }
            }

            .school-name {
              font-weight: 600;
            }
          }
        }

        .education-status {
          text-align: right;

          @include respond-to(md) {
            text-align: center;
            margin-top: 16px;
          }

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

          .current-year {
            display: block;
            font-size: map-get($font-sizes, sm);
            color: var(--text-muted);
            margin-top: 8px;
          }
        }
      }

      .education-description {
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: 24px;
      }

      .education-highlights {
        h4 {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: map-get($font-sizes, base);
          font-weight: 600;
          margin-bottom: 16px;
          color: var(--text-primary);

          @include respond-to(md) {
            justify-content: center;
          }
        }

        .highlights-grid {
          @include grid-responsive(200px, 12px);

          .highlight-tag {
            @include tag(8px 12px, var(--bg-secondary), var(--text-secondary));
            font-size: map-get($font-sizes, sm);
            text-align: center;
            border-radius: $border-radius;

            &:hover {
              background: $primary-color;
              color: white;
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  .certifications {
    text-align: center;

    &-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: map-get($font-sizes, xl);
      font-weight: 700;
      margin-bottom: 32px;
      color: var(--text-primary);
    }

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

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

      .certification-card {
        @include card(24px, $border-radius, light);

        .cert-header {
          h4 {
            font-size: map-get($font-sizes, lg);
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--text-primary);
          }

          .cert-provider {
            display: block;
            font-size: map-get($font-sizes, sm);
            color: var(--text-secondary);
            margin-bottom: 4px;
          }

          .cert-date {
            display: block;
            font-size: map-get($font-sizes, xs);
            color: var(--text-muted);
            margin-bottom: 16px;
          }
        }

        .cert-skills {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          .cert-skill-tag {
            @include tag(4px 8px);
            font-size: map-get($font-sizes, xs);
            font-weight: 500;
            border-radius: 12px;
          }
        }
      }
    }
  }

  .learning-goals {
    h3 {
      font-size: map-get($font-sizes, xl);
      font-weight: 700;
      margin-bottom: 32px;
      color: var(--text-primary);
      text-align: center;
    }

    .goals-grid {
      @include grid-responsive(300px, 20px);

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

      .goal-item {
        @include card(20px, $border-radius, light);

        .goal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .goal-text {
            font-weight: 500;
            color: var(--text-primary);
          }

          .goal-percentage {
            font-size: map-get($font-sizes, sm);
            color: $primary-color;
            font-weight: 600;
          }
        }

        .goal-progress {
          @include progress-bar(6px);

          .goal-progress-bar {
            height: 100%;
            background: $primary-color;
            border-radius: 3px;
            @include transition(width, $transition-slow);
          }
        }
      }
    }
  }
}