@layer components {
  .data-table {
    inline-size: 100%;
    margin-block: var(--space-4);
    border: 1px solid var(--color-border);

    @media (min-width: 48rem) {
      margin-block: var(--space-6);
    }
  }

  .data-table__head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
    background: var(--color-bg-subtle);
    border-block-end: 1px solid var(--color-accent);
    font-size: var(--text-sm);
    font-weight: bold;
    color: var(--color-text-muted);

    @media (min-width: 48rem) {
      grid-template-columns: 150px 1fr 100px;
    }

    .data-table__link-col {
      text-align: end;
      display: none;

      @media (min-width: 48rem) {
        display: block;
      }
    }
  }

  .data-table__row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    padding: var(--space-2);
    border-block-end: 1px solid var(--color-border);
    align-items: start;
    font-size: var(--text-sm);
    color: var(--color-text-muted);

    @media (min-width: 48rem) {
      grid-template-columns: 150px 1fr 100px;
      padding-block: var(--space-1);
      padding-inline: var(--space-2);
    }

    &:last-child {
      border-block-end: none;
    }

    .data-table__link-col {
      text-align: end;
      display: none;

      @media (min-width: 48rem) {
        display: block;
      }
    }

    ul {
      list-style: disc;
      list-style-position: inside;
      margin-block: var(--space-1) var(--space-3);
    }
  }

  .data-table__row--link {
    text-decoration: none;
    color: inherit;
    transition: background 200ms;

    &:hover {
      background: var(--color-bg-subtle);
    }
  }

  /* Modifier: always 2-col, no link column (careers) */
  .data-table--two-col {
    .data-table__head,
    .data-table__row {
      grid-template-columns: 1fr 2fr;
    }
  }

  /* Modifier: equal 2-col (engineering stack) */
  .data-table--equal {
    .data-table__row {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
  }
}