/*
 * projects.css: the project cards: "selected work" on the home page and the
 * "next case study" link on the case-study pages.
 * Tokens come from base.css.
 */

.project-card {
  border: var(--hairline) solid var(--line);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-11) var(--space-12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
  color: inherit;
  transition: border-color var(--transition-hover), box-shadow var(--transition-hover), transform var(--transition-hover);
  --lift: 2px; /* how far a card rises on hover/focus */
}
/* Hover = subtle accent ring + lift; keyboard focus = a stronger ring so
   it's an unmistakable focus indicator. Both use the theme's --acc/--glow,
   so they read correctly in light and dark. */
.project-card:hover {
  opacity: 1; /* cancel the global a:hover dim; the glow is the feedback */
  border-color: var(--acc);
  box-shadow: 0 0 0 var(--hairline) var(--acc), var(--glow);
  transform: translateY(calc(-1 * var(--lift)));
}
.project-card:focus-visible {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 var(--focus-width) var(--acc), var(--glow);
  transform: translateY(calc(-1 * var(--lift)));
}

.project-card + .project-card { margin-top: var(--space-4); }

.project-title-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* h3 on the home page, h2 in a case study's "next" link */
.project-card :is(h2, h3) { margin: 0; font: 700 var(--fs-card-title) var(--font-sans); }

.badge {
  font: 500 var(--fs-micro) var(--font-mono);
  color: var(--acc);
  border: var(--hairline) solid var(--acc);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2_5);
  white-space: nowrap;
}

.project-card p {
  font: 400 var(--fs-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--mut);
  max-width: var(--measure);
  margin: var(--space-3_5) 0 0;
}

.project-link { font: 500 var(--fs-ui) var(--font-mono); color: var(--acc); }

.project-placeholder {
  border: var(--hairline) dashed var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-12);
  margin-top: var(--space-4);
  font: 400 var(--fs-ui) var(--font-mono);
  color: var(--mut);
}

@media (max-width: 600px) {
  .project-card { grid-template-columns: 1fr; padding: var(--space-7) var(--space-6); }
  .project-placeholder { padding: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .project-card { transition: none; }
  .project-card:hover, .project-card:focus-visible { transform: none; }
}