/* ============================================
   Projects Page Styles
   ============================================ */

/* Page Hero */
.page-hero {
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-12);
  background: linear-gradient(180deg, var(--color-primary-50) 0%, transparent 100%);
}
[data-theme="dark"] .page-hero { background: linear-gradient(180deg, #252839 0%, transparent 100%); }

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}
.page-hero__breadcrumb a { color: var(--color-primary-500); }
.page-hero__breadcrumb a:hover { text-decoration: underline; }

.page-hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}
.page-hero__desc {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}
.page-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.page-hero__stats strong {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-primary-500);
}
.page-hero__stats span { opacity: 0.4; }

/* Filter Section */
.filter-section {
  position: sticky;
  top: var(--nav-height);
  z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--space-4);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.filter-group--tech {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-4);
}

.filter-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out-quart);
  white-space: nowrap;
}
.filter-btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-500);
  border-color: var(--color-primary-200);
}
.filter-btn.active {
  background: var(--color-primary-500);
  color: white;
  border-color: var(--color-primary-500);
}
.filter-btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-tertiary);
  min-width: 200px;
  margin-left: auto;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.search-box:focus-within {
  border-color: var(--color-primary-400);
  box-shadow: var(--shadow-glow);
  color: var(--text-secondary);
}
.search-input {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 100%;
  outline: none;
}
.search-input::placeholder { color: var(--text-tertiary); }

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.proj-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.proj-card__img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  transition: transform var(--dur-normal) var(--ease-out-quart);
}
.proj-card:hover .proj-card__img { transform: scale(1.03); }

.proj-card__img--blue   { background: linear-gradient(135deg, #d7e1fb, #ecf3fb); }
.proj-card__img--green  { background: linear-gradient(135deg, #ceefe0, #e8f7f1); }
.proj-card__img--amber  { background: linear-gradient(135deg, #fcf3cd, #fcf9ee); }
.proj-card__img--purple { background: linear-gradient(135deg, #e9e0f8, #f2ecfa); }
.proj-card__img--teal   { background: linear-gradient(135deg, #d0f4f0, #e6f6f8); }
.proj-card__img--rose   { background: linear-gradient(135deg, #f8e0e0, #faecee); }
.proj-card__img--indigo { background: linear-gradient(135deg, #cbd5fc, #dee6fb); }
.proj-card__img--orange { background: linear-gradient(135deg, #fde8ce, #fcf2e6); }
.proj-card__img--cyan   { background: linear-gradient(135deg, #cff2f0, #e4f4f6); }

[data-theme="dark"] .proj-card__img--blue   { background: linear-gradient(135deg, #2b346e, #252a33); }
[data-theme="dark"] .proj-card__img--green  { background: linear-gradient(135deg, #1a3a2f, #222d28); }
[data-theme="dark"] .proj-card__img--amber  { background: linear-gradient(135deg, #3b341a, #2a261a); }
[data-theme="dark"] .proj-card__img--purple { background: linear-gradient(135deg, #312a45, #26242d); }
[data-theme="dark"] .proj-card__img--teal   { background: linear-gradient(135deg, #1a3a3a, #202c33); }
[data-theme="dark"] .proj-card__img--rose   { background: linear-gradient(135deg, #3b2a2a, #2d2526); }
[data-theme="dark"] .proj-card__img--indigo { background: linear-gradient(135deg, #1e2860, #222640); }
[data-theme="dark"] .proj-card__img--orange { background: linear-gradient(135deg, #3b3014, #2a221c); }
[data-theme="dark"] .proj-card__img--cyan   { background: linear-gradient(135deg, #1a3638, #202c30); }

.proj-card__img-icon { font-size: 3rem; user-select: none; }
.proj-card__status {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.proj-card__body {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.proj-card__title { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug); }
.proj-card__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); flex: 1; max-height: 4.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-word; }
.proj-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proj-card__actions { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-24) var(--space-8);
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.empty-state__icon { font-size: 3rem; margin-bottom: var(--space-2); }
.empty-state__title { font-size: var(--text-2xl); font-weight: 700; }
.empty-state__desc { font-size: var(--text-base); color: var(--text-secondary); }

/* Load More */
.load-more { text-align: center; }
.load-more__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); }

/* Responsive */
@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-group--tech { border-left: none; padding-left: 0; border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); width: 100%; }
  .search-box { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .projects-grid { grid-template-columns: 1fr; }
  .page-hero__title { font-size: var(--text-4xl); }
}