/* Projects Dashboard Styles - mirrors blog.css with project-specific adjustments */

.projects-dashboard { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.projects-dashboard-header { text-align: center; margin-bottom: 2rem; }
.projects-dashboard-header h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: #0f172a; margin-bottom: 0.5rem; }
.projects-dashboard-header p { color: #64748b; font-size: 1.1rem; }

.projects-search { margin-bottom: 1.5rem; }
.projects-search input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e2e8f0; border-radius: 0.5rem; font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.projects-search input:focus { border-color: #2563eb; }

.projects-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.category-btn { padding: 0.4rem 1rem; border: 1px solid #e2e8f0; border-radius: 2rem; background: #fff; color: #475569; font-size: 0.875rem; font-family: inherit; cursor: pointer; transition: all 0.2s; }
.category-btn:hover { border-color: #2563eb; color: #2563eb; }
.category-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }

.project-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
.project-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }

.project-card-image { width: 100%; height: 180px; background: #f1f5f9; overflow: hidden; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; }
.project-card-image .placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #eff6ff, #e0e7ff); display: flex; align-items: center; justify-content: center; color: #93c5fd; font-size: 2rem; }

.project-card-body { padding: 1.25rem; }
.project-card-category { display: inline-block; padding: 0.2rem 0.75rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; background: #eff6ff; color: #2563eb; margin-bottom: 0.5rem; }
.project-card-title { font-size: 1.15rem; font-weight: 600; color: #0f172a; margin-bottom: 0.5rem; }
.project-card-excerpt { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.project-card-tag { font-size: 0.7rem; padding: 0.15rem 0.5rem; background: #f8fafc; color: #64748b; border-radius: 0.25rem; border: 1px solid #e2e8f0; }

.projects-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pagination-btn { padding: 0.5rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #475569; font-size: 0.9rem; font-family: inherit; cursor: pointer; }
.pagination-btn:hover:not(:disabled) { border-color: #2563eb; color: #2563eb; }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-info { font-size: 0.9rem; color: #64748b; }

.project-skeleton { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; }
.skeleton-img { height: 180px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.skeleton-body { padding: 1.25rem; }
.skeleton-line { height: 1rem; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.25rem; margin-bottom: 0.75rem; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.short { width: 30%; height: 0.75rem; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long { width: 90%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.projects-empty { text-align: center; padding: 3rem 1rem; }
.projects-empty h3 { font-size: 1.25rem; color: #475569; margin-bottom: 0.5rem; }
.projects-empty p { color: #94a3b8; margin-bottom: 1rem; }
.projects-empty .clear-search { padding: 0.5rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #2563eb; font-size: 0.9rem; cursor: pointer; }
.projects-empty .clear-search:hover { background: #eff6ff; }

.projects-error { text-align: center; padding: 3rem 1rem; color: #ef4444; }
.projects-error button { margin-top: 1rem; padding: 0.5rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 0.5rem; background: #fff; color: #475569; font-size: 0.9rem; cursor: pointer; }

.btn-primary { display: inline-block; padding: 0.6rem 1.5rem; background: #2563eb; color: #fff; border: none; border-radius: 0.5rem; text-decoration: none; font-size: 0.95rem; cursor: pointer; }
.btn-primary:hover { background: #1d4ed8; }

.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 2rem; color: #2563eb; margin-bottom: 1rem; }
.error-page p { color: #64748b; margin-bottom: 2rem; }