/* Project index pages: /featured-work and /featured-personal.
 *
 * These pages also load home.css, because the section shell, the card
 * internals and the grid are the same objects that the home page already
 * defines. Only the card frame is lighter here. On the home page a reader is
 * still being convinced, so a card is three labelled blocks. By the time
 * someone opens an index page they are measuring the size of the body of
 * work, so a card is one arc of prose and the result. */

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A card is always one surface step above the section it sits in, which is
   how a filled card separates itself in Material 3: tonal elevation, not an
   outline. Without the tinted rule below, a card in a tinted section is
   exactly the colour of that section and only appears on hover. */
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-container);
  border-radius: var(--shape-2xl);
  overflow: hidden;
  transition: transform var(--motion-spring), background-color var(--motion-standard);
}

.project-card:hover { transform: translateY(-4px); background: var(--surface-container-high); }

.section--tinted .project-card { background: var(--surface-container-high); }
.section--tinted .project-card:hover { background: var(--surface-container-highest); }

.project-card__media { aspect-ratio: 16 / 9; }

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  flex: 1;
}

.project-card__title { margin: 0; }
.project-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-surface-variant);
}

/* The page head carries the jump row, so it needs a little more room under it
   than a plain section head does. */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* A section head inside an index page sits above a grid rather than above the
   whole page, so it is tighter than the one on the home page. */
.projects-section__head { margin-bottom: 32px; max-width: 68ch; }
.projects-section__head .headline-m { margin-top: 12px; }
.projects-section__head .section__lead { margin-top: 12px; }