/**
 * Portfolio Section Styles
 * Using CSS custom properties for maintainability
 */

/* Portfolio Card Container */
.portfolio-card {
  background: var(--color-bg-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
}

.portfolio-card:hover {
  transform: translateY(var(--portfolio-hover-translate));
  box-shadow: var(--shadow-xl);
}

/* Portfolio Image Container */
.portfolio-image-container {
  position: relative;
  width: 100%;
  height: var(--portfolio-image-height);
  overflow: hidden;
  background: var(--color-bg-lighter);
}

.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.portfolio-card:hover .portfolio-image {
  transform: scale(var(--portfolio-image-scale));
}

/* Portfolio Overlay */
.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-base);
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-links {
  display: flex;
  gap: var(--spacing-lg);
}

.portfolio-link {
  width: var(--portfolio-link-size);
  height: var(--portfolio-link-size);
  border-radius: var(--radius-circle);
  background: var(--color-bg-white);
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--portfolio-link-font-size);
  transition: var(--transition-base);
  transform: translateY(var(--portfolio-link-translate-initial));
}

.portfolio-card:hover .portfolio-link {
  transform: translateY(0);
}

.portfolio-link:hover {
  background: var(--color-primary-gold);
  color: var(--color-bg-white);
  transform: scale(var(--portfolio-link-hover-scale)) rotate(var(--portfolio-link-hover-rotate));
}

/* Portfolio Content */
.portfolio-content {
  padding: var(--card-padding);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-tight);
  min-height: var(--portfolio-title-min-height);
}

.portfolio-description {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-lg);
  flex: 1;
}

/* Tech Stack Badges */
.portfolio-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border-lighter);
}

.tech-badge {
  background: var(--gradient-purple);
  color: var(--color-bg-white);
  padding: var(--portfolio-badge-padding-y) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
  cursor: default;
}

.tech-badge:hover {
  transform: translateY(var(--portfolio-badge-hover-translate));
  box-shadow: 0 var(--portfolio-badge-padding-y) 8px rgba(102, 126, 234, var(--portfolio-badge-shadow-opacity));
}

/* Alternate badge colors for variety */
.portfolio-card:nth-child(1) .tech-badge {
  background: var(--gradient-purple);
}

.portfolio-card:nth-child(2) .tech-badge {
  background: var(--gradient-pink);
}

.portfolio-card:nth-child(3) .tech-badge {
  background: var(--gradient-blue);
}

.portfolio-card:nth-child(4) .tech-badge {
  background: var(--gradient-green);
}

.portfolio-card:nth-child(5) .tech-badge {
  background: var(--gradient-yellow);
}

.portfolio-card:nth-child(6) .tech-badge {
  background: var(--gradient-dark);
}

/* Portfolio Stats */
.portfolio-stats {
  display: flex;
  justify-content: space-around;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-lighter);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.stat-item i {
  font-size: var(--portfolio-stat-icon-size);
}

/* Animation delays for staggered effect */
.portfolio-card {
  animation: fadeInUp var(--portfolio-animation-duration) ease forwards;
  opacity: 0;
}

.col-md-6:nth-child(1) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-1);
}

.col-md-6:nth-child(2) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-2);
}

.col-md-6:nth-child(3) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-3);
}

.col-md-6:nth-child(4) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-4);
}

.col-md-6:nth-child(5) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-5);
}

.col-md-6:nth-child(6) .portfolio-card {
  animation-delay: var(--portfolio-animation-delay-6);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(var(--portfolio-fadeup-translate));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* View More Button Enhancement */
#portfolio .btn-primary {
  padding: var(--portfolio-btn-padding-y) var(--spacing-3xl);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  box-shadow: var(--shadow-primary);
}

#portfolio .btn-primary:hover {
  transform: translateY(var(--portfolio-btn-hover-translate));
  box-shadow: var(--shadow-primary-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
  .portfolio-title {
    font-size: var(--font-size-2xl);
    min-height: auto;
  }

  .portfolio-description {
    font-size: var(--font-size-base);
  }

  .tech-badge {
    font-size: var(--font-size-xs);
    padding: var(--portfolio-badge-padding-y-mobile) var(--portfolio-badge-padding-x-mobile);
  }

  .stat-item {
    font-size: var(--font-size-sm);
  }

  .portfolio-link {
    width: var(--portfolio-link-size-mobile);
    height: var(--portfolio-link-size-mobile);
    font-size: var(--portfolio-link-font-size-mobile);
  }
}

/* Accessibility: Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-image,
  .portfolio-link,
  .tech-badge,
  #portfolio .btn-primary {
    transition: none;
    animation: none;
  }

  .portfolio-card:hover {
    transform: none;
  }

  .portfolio-card:hover .portfolio-image {
    transform: none;
  }
}