/* =============================================================
   pages/projects.css — Projects / Case Studies page
   ============================================================= */

.projects-page {
  padding: 64px 235px 80px;
}

.projects-page__header {
  margin-bottom: 48px;
}

.projects-page__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-48);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height:    56px;
  color:          var(--white);
  margin-bottom:  12px;
}

.projects-page__sub {
  font-family:    var(--font-mono);
  font-size:      var(--fs-16);
  /* mono tokens: 16px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:          var(--gray-900);
}

/* Project grid */
.projects-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap:                   24px;
}

/* Project card */
.project-card {
  background:    var(--purple-card);
  border:        1px solid var(--purple-card-border);
  border-radius: 16px;
  overflow:      hidden;
  transition:    border-color 0.2s, transform 0.2s;
  cursor:        pointer;
  text-decoration: none;
  display:       block;
}
.project-card:hover {
  border-color: var(--purple-border);
  transform:    translateY(-2px);
}

.project-card__cover {
  width:            100%;
  aspect-ratio:     16/9;
  background:       rgba(143, 0, 216, 0.08);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border-bottom:    1px solid var(--purple-card-border);
  overflow:         hidden;
}

.project-card__cover img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0.85;
  transition: opacity 0.2s;
}
.project-card:hover .project-card__cover img { opacity: 1; }

.project-card__cover-placeholder {
  font-family:    var(--font-mono);
  font-size:      var(--fs-12);
  /* mono tokens: 12px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:          var(--gray-900);
  text-align:     center;
  padding:        20px;
}

.project-card__body {
  padding: 24px;
}

.project-card__tags {
  display:  flex;
  flex-wrap: wrap;
  gap:      8px;
  margin-bottom: 12px;
}

.project-tag {
  display:        inline-flex;
  align-items:    center;
  height:         24px;
  padding:        0 8px;
  background:     rgba(143, 0, 216, 0.12);
  border:         1px solid var(--purple-border);
  border-radius:  4px;
  font-family:    var(--font-mono);
  font-size:      var(--fs-11);
  /* mono tokens: 11px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:          var(--purple-900);
  text-transform: uppercase;
}

.project-card__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-20);
  font-weight:    var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color:          var(--white);
  margin-bottom:  8px;
  line-height:    1.3;
}

.project-card__desc {
  font-family:    var(--font-text);
  font-size:      var(--fs-14);
  font-weight:    var(--fw-body);
  letter-spacing: var(--ls-body);
  line-height:    22px;
  color:          var(--gray-900);
}

/* "Coming soon" state */
.project-card--wip {
  opacity: 0.6;
  pointer-events: none;
}

.project-card--wip .project-card__cover-placeholder::after {
  content:      ' — Coming Soon';
  color:        var(--purple-900);
  font-weight:  500;
}

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 1200px) {
  .projects-page { padding-left: 100px; }
}

@media (max-width: 900px) {
  .projects-page  { padding: 40px; }
  .projects-grid  { grid-template-columns: 1fr; }
  .projects-page__title { font-size: var(--fs-36); }
}

@media (max-width: 640px) {
  .projects-page  { padding: 24px 20px; }
}