/* Shared styling for the /projects/ hub and the project page shell.
   Scoped to .project-* only; inherits the site's own custom properties, fonts
   and theming. Nothing global is overridden. */

/* ---------- full-width shell for interactive project pages ---------- */

.project-app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--global-text-color);
}

.project-app__head {
  padding-top: 1rem;
}

.project-app__subtitle {
  margin: -0.4em 0 0;
  color: var(--global-text-color-light);
  font-size: 1em;
}

/* ---------- project hub cards ---------- */

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

/* `.page__content a` underlines links; match its specificity so a card reads as
   a card rather than a block of underlined text. */
a.project-card,
a.project-card:hover,
a.project-card:focus,
a.project-card:visited {
  text-decoration: none;
}

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--global-border-color);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--global-text-color);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.project-card:hover,
.project-card:focus-visible {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
  text-decoration: none;
}

.project-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--global-border-color);
}

.project-card__body {
  display: block;
  padding: 0.85rem 1rem 1rem;
}

.project-card__title {
  display: block;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--global-link-color);
}

.project-card__subtitle {
  display: block;
  margin-top: 0.25em;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--global-text-color);
}

.project-card__venue {
  display: block;
  margin-top: 0.45em;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--global-text-color-light);
}

@media (max-width: 640px) {
  /* room for the sticky control bar an interactive project may add */
  .project-app { padding: 0 0.75rem 6rem; }
}

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