/* Industry Partners — a furniture partner's graded-textile browse. The page
   borrows the catalog's grid, cards and facet tray wholesale. */

.mts {

  .partner-header {
    max-width: 46rem;

    .eyebrow {
      font-family: var(--font-stack);
      font-size: var(--font-size-3);
      font-weight: 700;
      margin-bottom: var(--space-2);

      a {
        color: var(--color-black);
        text-decoration: none;
        transition: color var(--transition-fast);
        &:hover {
          color: var(--color-text-primary-hover);
        }
      }
    }

    .title {
      font-family: var(--font-stack);
      font-size: var(--font-size-9);
      font-weight: 400;
      line-height: var(--line-height-body-tight);
      margin-bottom: var(--space-4);
    }
  }

  .tabs {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-2);

    a {
      font-family: var(--font-stack);
      font-size: var(--font-size-3);
      font-weight: 700;
      color: var(--color-black);
      text-decoration: none;
      transition: color var(--transition-fast);

      &:hover,
      &.active {
        color: var(--color-text-primary-hover);
      }
    }
  }

  .empty {
    padding: var(--space-8) 0;
    max-width: 32rem;

    .title {
      font-size: var(--font-size-5);
      margin-bottom: var(--space-2);
    }
  }

  .program-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);

    @media (min-width: 48rem) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .program {
    display: block;
    text-decoration: none;
    color: inherit;

    /* Cards are stored at 634x476; reserving that ratio keeps the grid from
       shifting as covers load, or collapsing if one is missing. */
    img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 634 / 476;
      object-fit: cover;
      background-color: var(--color-gray-1);
      margin-bottom: var(--space-3);
    }

    .label {
      font-weight: 700;
    }

    &:hover .label {
      text-decoration: underline;
    }
  }

}

.grade-note {
  display: block;
  font-size: var(--font-size-3);
}