/* ============================================================
   HELIOCASTLE — PROJECTS
   The featured card grid and the card chrome. The artwork inside a
   card is one file per mockup in css/mockups/.
   ============================================================ */

/* ============================================================
   FEATURED PROJECTS
   ============================================================ */

.projects {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(70px, 8vw, 120px) var(--pad-x) clamp(80px, 9vw, 140px);
}

.projects-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 4vw, 60px);
}

.projects-grid {
  display: grid;
  /* Follows the number of cards. It was repeat(4, 1fr), which assumed
     exactly four and left dead columns the moment one was removed. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.project {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
}
.project:hover {
  transform: translateY(-8px);
  border-color: rgb(var(--accent-rgb) / 0.35);
  box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / calc(0.55 * var(--shadow-a))), 0 0 40px rgb(var(--accent-rgb) / 0.07);
}

.project-media {
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  background: #0a0a0a;
}
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(var(--bg-rgb) / 0.9));
  z-index: 3;
}

/* uploaded photo fills a card the same way a mockup does */
.project-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cards arrive one after another, not all at once.

   This used to be a hand-written style="--d:.08s" on the second card,
   which only works while somebody remembers to add one to the third.
   [data-stagger] numbers the children into --i and the delay is worked
   out from it, so it keeps being right however many projects there
   are. */
.projects-grid .project { --d: calc(var(--i, 0) * 0.08s); }