@use './detail';

:host {
  display: block;
}

.project-gallery {
  display: grid;
  gap: 1rem;

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.project-gallery__item {
  margin: 0;

  figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, currentColor 68%, transparent);
  }
}

// The `<img>` belongs to `app-api-image`, so a scoped rule cannot reach it.
.project-gallery__item ::ng-deep img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pi-border-radius-medium, 0.75rem);
}

.project-team,
.project-repos {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-team__member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;

  > span {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
  }

  &:hover .project-team__name {
    text-decoration: underline;
  }
}

.project-team__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.project-repos li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;

  a {
    color: var(--pi-color-primary);
    font-weight: 600;
    word-break: break-word;
  }
}

.project-repos__stats {
  font-size: 0.8125rem;
}

// `@pi/ui`'s reset spaces every `li + li`; these lists are spaced by `gap`.
.project-team,
.project-repos {
  > li {
    margin: 0;
  }
}