/* Projects grid + detail view (JS/modules/projectsGrid.js, JS/modules/projectDetail.js) */

.projects-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 80px; align-items: start; }
@media (min-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 28px; }
}

.project-item { width: 100%; max-width: 520px; margin: 8px 0; text-align: left; display: grid; gap: 6px; }
.placeholder-box { width: 100%; height: 200px; background-color: var(--color-background); border: 2px dashed #cccccc; margin-bottom: 8px; }

.project-detail { padding: 16px; display: none; }
.project-detail .detail-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.project-detail .detail-title { font-size: 1.4rem; font-weight: 600; }
/* Hint compositor for smoother fixed header animation */
#project-detail .detail-header { will-change: left, top, opacity, transform; transition: left var(--transition-medium) ease, top var(--transition-medium) ease, transform var(--transition-medium) ease, opacity var(--transition-medium) ease; }