/*
 * Project grid: calm, neal.fun-like cards.
 * Desktop: the list lives inside the landscape world, each card at a spot in
 * the picture (--x and --y are fractions, set by grid.js).
 * Phones: a plain column below the sea line.
 */

.grid--world {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  pointer-events: none;   /* the list spans the picture; only the cards take clicks */
}
.grid--world .card {
  pointer-events: auto;
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  transform: translate(-50%, -50%);
  width: clamp(220px, 20vw, 320px);
}
/* The heading and spacer are only for the stacked phone layout. */
body.cards-in-world .projects,
body.cards-in-world .hero-space {
  display: none;
}

.projects {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.projects-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 12px;
  color: var(--cream);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 8px 24px rgba(10, 40, 50, 0.22);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.card-link:hover,
.card-link:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(10, 40, 50, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .card-link {
    transition: none;
  }
  .card-link:hover {
    transform: none;
  }
}

.card-tile {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Only work in progress gets a badge; live is the normal state. */
.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--rock-grey);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.card[data-status="live"] .card-badge {
  display: none;
}