/* =====================================================
   Project Cards UX/UI Optimization
   - Prevents stretching and maintains good proportions
   - Ensures consistent card heights on same row
   - Improves readability and visual hierarchy
   - Better responsive behavior
===================================================== */

/* Improve card content spacing and consistency */
.project-content h3 {
  font-size: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important; /* Consistent title height */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.project-content > p {
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.5rem !important;
  min-height: 5em !important; /* Consistent description height */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Optimize stats section for better readability */
.project-stats {
  padding: 1.5rem !important;
  gap: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

.stat-number {
  font-size: 1.3rem !important;
  margin-bottom: 0.4rem !important;
}

.stat-label {
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
}

/* Improve project meta badges spacing */
.project-meta {
  margin-bottom: 0.75rem !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.project-category,
.project-status {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.7rem !important;
}

/* Better CTA button positioning */
.project-link {
  padding: 0.75rem 1.25rem !important;
  font-size: 0.8rem !important;
  margin-top: 0.25rem !important;
}

/* Improve overlay hover state readability */
.project-overlay-content h3 {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
  padding: 0 1rem !important;
  max-width: 90% !important;
  margin: 0 auto 0.75rem !important;
}

/* Ensure consistent card heights on same row */
.projects-grid {
  align-items: stretch !important;
}

.project-card {
  display: flex !important;
  flex-direction: column !important;
}

.project-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.project-content > p {
  flex-grow: 0 !important;
}

.project-stats {
  margin-top: auto !important;
}

/* Mobile refinements */
@media (max-width: 768px) {
  .project-content h3 {
    font-size: 1.15rem !important;
    min-height: auto !important;
  }
  
  .project-content > p {
    min-height: auto !important;
    -webkit-line-clamp: 4 !important;
  }
  
  .project-stats {
    padding: 1.25rem !important;
  }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
  .project-content h3 {
    font-size: 1.2rem !important;
  }
  
  .project-content > p {
    font-size: 0.92rem !important;
  }
}