/* Propriétés — les paires libellé / valeur d'une fiche :
   `<dl class="props"><dt>Libellé</dt><dd>Valeur</dd></dl>`. Référence : docs/design-system.md § Composants. */

.props {
  display: grid;
  grid-template-columns: minmax(min(120px, 40%), max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-13);
}

.props :where(dt) {
  color: var(--color-text-secondary);
}

.props :where(dd) {
  min-width: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Une ligne par paire, la valeur à droite. */
.props--split {
  grid-template-columns: 1fr auto;
}

.props--split :where(dd) {
  text-align: right;
}

/* Un filet entre les paires. */
.props--divided {
  row-gap: 0;
}

.props--divided :where(dt, dd) {
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.props--divided > :where(dt:first-of-type, dd:first-of-type) {
  border-top: 0;
}

/* En tuiles : chaque paire (`props__item`) en colonne, libellé au-dessus. */
.props--stacked {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4) var(--space-6);
}

.props__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.props__item--full {
  grid-column: 1 / -1;
}

@media (width <= 480px) {
  .props:not(.props--split, .props--stacked) {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .props:not(.props--split, .props--stacked, .props--divided) :where(dd) {
    margin-bottom: var(--space-2);
  }

  /* Sur une colonne, le filet sépare les paires, pas le libellé de sa valeur. */
  .props--divided:not(.props--split) :where(dd) {
    padding-top: 0;
    border-top: 0;
  }
}