/* Reusable UI components */

/* Shared tilt-on-hover behavior, driven by initTiltCards() in js/main.js.
   Apply .tilt-wrap to the perspective container and .tilt-image to the
   element that should actually rotate/scale. */
.tilt-wrap {
  perspective: 900px;
}

.tilt-image {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
  transition: transform 80ms var(--ease);
  will-change: transform;
}

/* Project card (used on the home grid) */
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-ink);
}

.project-card__image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-paper);
}

.project-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.5);
}

.project-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.project-card__title {
  font-size: var(--fs-h4);
  font-weight: 400;
}

.project-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  color: rgb(0 0 0 / 65%);
}

/* Software-in-use icon row */
.icon-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-row img {
  height: 1.1rem;
  width: auto;
}

/* Link list (Figma / prototype / etc.) */
.link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.link-list__item {
  font-size: var(--fs-project-text, var(--fs-body));
  font-weight: 400;
}

/* Labeled meta rows in the project sidebar */
.meta-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-project-text, var(--fs-body));
}

.meta-block__label {
  font-size: var(--fs-small);
  opacity: 0.7;
}