/* Maharam Collaborators: the large-type name index, and each collaborator's
   show page (their product grid, grouped by category, plus bio + images).
   Mirrors legacy's dedicated collaborator.scss, translated to this app's
   token system and plain-CSS grid utilities instead of Bootstrap. */

.collaborators.listing {

  .collaborator-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .collaborator-list li {
    font-size: var(--font-size-9);
    line-height: 1.25;
  }

  .collaborator-list a:hover {
    color: var(--color-primary);
  }

  @media (max-width: 768px) {
    .collaborator-list li {
      font-size: var(--font-size-8);
    }
  }

  @media (max-width: 480px) {
    .collaborator-list li {
      font-size: var(--font-size-7);
    }
  }

}

.collaborators.show {

  .designer-name {
    font-size: var(--font-size-9);
    font-weight: 700;
    margin-bottom: var(--space-6);
  }

  .category-section {
    margin-bottom: var(--space-7);

    h2 {
      font-size: var(--font-size-5);
      font-weight: 700;
      margin-bottom: var(--space-4);
    }
  }

  .product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 16px;
  }

  #about-designer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-3);
  }

  .designer-bio {
    font-size: var(--font-size-5);
    font-weight: 700;
    margin-bottom: var(--space-4);
  }

  .designer-image {
    margin-bottom: var(--space-4);
  }

  .image-credit {
    display: block;
    color: var(--color-gray-20);
    font-size: var(--font-size-2);
    margin-top: var(--space-1);
  }

  @media (max-width: 768px) {
    .product-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 480px) {
    .product-list {
      grid-template-columns: 1fr;
    }
  }

}