/* project.css — Individual project detail page */

@layer components {
  @scope (.project) {
    .project-cover {
      margin-block-end: 2.5rem;

      .project-cover__img {
        object-fit: cover;
        inline-size: 100%;

        @media (min-width: 768px) {
          border-radius: 0.125rem;
        }
      }
    }

    .project-info {
      padding-inline: var(--page-padding);
      margin-block-start: 5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      @media (min-width: 1280px) {
        padding-inline: 0;
      }
    }

    .project-title {
      font-weight: bold;
    }

    .project-logo {
      inline-size: auto;
      flex-grow: 0;
      flex-shrink: 0;
      block-size: 5rem;
      border-radius: 0.125rem;
      object-fit: contain;
      object-position: left;
    }

    .project-meta {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;

      @media (min-width: 1024px) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .project-meta__details {
      font-size: var(--text-base);
      line-height: 30px;
    }

    .project-summary {
      inline-size: 100%;

      @media (min-width: 1024px) {
        max-inline-size: 470px;
        justify-self: center;
      }
    }

    /* Comma-separated collaborator / tag lists */
    .list-item::after {
      content: ",";
    }

    .list-item:last-child::after {
      content: "";
    }
  }

  /* Project gallery — uses container queries for column spans */
  .project-gallery {
    container-type: inline-size;
    margin-inline: auto;
    margin-block-start: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-inline-size: var(--max-width);
  }

  .project-gallery__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    @container (min-width: 640px) {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  .project-gallery__col {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    gap: 1rem;
    grid-column: span 12;

    @container (min-width: 640px) {
      grid-column: var(--col-span, span 12);
    }
  }
}