/* Projects Section Styles - Featured work showcase with details - Mobile First */
.projects-section {
  background: var(--projects-section-bg);
  position: relative;

  & .projects-grid {
    /* Positioning & Display */
    display: flex;

    /* Other */
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      /* Positioning & Display */
      display: none;

      /* Box Model */
      height: 8px;
    }

    & .project-card {
      /* Positioning & Display */
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
      flex: 1;
      scroll-snap-align: center;

      /* Box Model */
      padding-left: 0px;
      padding-right: 0px;
      min-width: 280px;
      width: 300px;
      max-width: 300px;
      box-sizing: border-box;

      /* Colors & Backgrounds */
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-md);

      /* Effects & Transitions */
      box-shadow: 0 4px 10px var(--card-shadow);
      transition: all 0.3s ease;

      & .project-image {
        /* Positioning & Display */
        position: relative;
        overflow: hidden;

        /* Box Model */
        width: 100%;
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio */

        & img {
          /* Positioning & Display */
          position: absolute;
          top: 0;
          left: 0;

          /* Box Model */
          width: 100%;
          height: 100%;

          /* Effects & Transitions */
          transition: transform 0.5s ease;

          /* Other */
          object-fit: cover;
        }
      }

      & .project-info {
        /* Positioning & Display */
        display: flex;
        flex-direction: column;

        /* Box Model */
        flex: 1;
        width: 100%;
        padding: 1.25rem;

        & h3 {
          /* Box Model */
          margin-bottom: 0.75rem;

          /* Typography */
          font-size: 1.1rem;
        }

        & p {
          /* Box Model */
          margin-bottom: 1rem;
          flex-grow: 1;

          /* Typography */
          font-size: 0.9rem;
        }

        & .project-tech {
          /* Positioning & Display */
          display: flex;
          flex-wrap: wrap;

          /* Box Model */
          gap: 0.4rem;
          margin-top: 0.75rem;

          & span {
            /* Box Model */
            padding: 0.25rem 0.6rem;
            border-radius: var(--border-radius-pill);

            /* Typography */
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--accent-color);

            /* Colors & Backgrounds */
            background-color: var(--background-color);
          }
        }

        & .project-link {
          /* Positioning & Display */
          display: inline-flex;
          align-items: center;
          align-self: flex-end;

          /* Box Model */
          margin-top: auto;

          /* Typography */
          color: var(--accent-color);
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 500;

          /* Effects & Transitions */
          transition: all 0.3s ease;

          & i {
            /* Box Model */
            margin-left: 0.5rem;

            /* Effects & Transitions */
            transition: transform 0.3s ease;
          }
        }
      }
    }
  }

  & .scroll-controls {
    /* Styles for scroll controls if needed */
  }
}

/* Tablet styles */
@media (min-width: 768px) {
  .projects-section {
    & .projects-grid {
      & .project-card {
        min-width: 300px;
        width: 320px;
        max-width: 320px;
        box-shadow: 0 4px 12px var(--card-shadow);

        & .project-info {
          padding: 1.5rem;

          & h3 {
            margin-bottom: 0.9rem;
            font-size: 1.15rem;
          }

          & p {
            margin-bottom: 1.25rem;
            font-size: 0.925rem;
          }

          & .project-tech {
            gap: 0.45rem;
            margin-top: 0.9rem;

            & span {
              padding: 0.275rem 0.7rem;
              font-size: 0.775rem;
            }
          }

          & .project-link {
            font-size: 0.925rem;

            &:hover i {
              /* Positioning & Display */
              transform: translateX(3px);
            }
          }
        }
      }
    }
  }
}

/* Desktop styles */
@media (min-width: 992px) {
  .projects-section {
    & .projects-grid {
      & .project-card {
        min-width: 320px;
        width: 350px;
        max-width: 350px;
        box-shadow: 0 4px 15px var(--card-shadow);

        &:hover {
          /* Positioning & Display */
          transform: translateY(-5px);

          /* Effects & Transitions */
          box-shadow: 0px 0px 10px 0px var(--card-hover-shadow);
        }

        & .project-info {
          padding: 1.75rem;

          & h3 {
            margin-bottom: 1rem;
            font-size: 1.2rem;
          }

          & p {
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
          }

          & .project-tech {
            gap: 0.5rem;
            margin-top: 1rem;

            & span {
              padding: 0.3rem 0.8rem;
              font-size: 0.8rem;
            }
          }
        }
      }
    }
  }
}