/* ==========================================================================
   Portfolio — Grid, Detail
   ========================================================================== */

.portfolio .portfolio-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}
.portfolio .portfolio-item:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.portfolio .portfolio-item img {
  transition: transform var(--transition-slow);
}
.portfolio .portfolio-item:hover img {
  transform: scale(1.05);
}
.portfolio .portfolio-item .portfolio-info {
  padding: 1.25rem;
  background: var(--bg-card);
}
.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.portfolio .portfolio-item .portfolio-info p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

/* Portfolio detail page */
.portfolio-details {
  background: var(--bg-body);
}
.portfolio-details .portfolio-details-slider {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.portfolio-details .portfolio-description {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.portfolio-details .portfolio-description h2 {
  color: var(--text-primary);
  font-weight: 800;
  margin-bottom: 16px;
}
.portfolio-details .portfolio-info {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.portfolio-details .portfolio-info h3 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
}
.portfolio-details .portfolio-info ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.portfolio-details .portfolio-info ul li:last-child {
  border-bottom: none;
}
.portfolio-details .portfolio-info ul li strong {
  color: var(--text-primary);
}