/*
 * Detail list — label / value pairs for show pages (a contact's
 * address, a document's metadata). A two-column grid on wide screens,
 * stacked on narrow ones.
 */

@layer components {
  .detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2-5) var(--space-6);
    margin: 0;
  }

  .detail-list dt {
    font-size: var(--text-13);
    font-weight: 500;
    color: var(--color-text-body);
  }

  .detail-list dd {
    margin: 0;
    color: var(--color-text-heading);
  }

  @media (max-width: 600px) {
    .detail-list {
      grid-template-columns: 1fr;
      gap: var(--space-1) 0;
    }

    .detail-list dd {
      margin-bottom: var(--space-3);
    }
  }
}