/*
 * Field list — label/value rows inside a card: read-only values (pets/show)
 * or form inputs (stores/_form, customers/_form…)
 * <dl class="field-list">
 *   <div class="field-row">
 *     <dt class="field-row__label">Name</dt>
 *     <dd class="field-row__value"><div class="field-row__display"><span>Titan</span></div></dd>
 *   </div>
 * </dl>
 */

.field-list {
  padding: var(--space-1) var(--space-5);
}

.field-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: var(--border);

  &:last-child {
    border-bottom: 0;
  }

  /* [hidden] must win over display rules like .field-row__display's flex */
  [hidden] {
    display: none;
  }
}

.field-row__label {
  /* line up with the 32px-tall value row */
  padding-top: var(--space-1-5);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.field-row__value {
  min-width: 0;
}

.field-row__display {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);

  > span {
    padding-top: var(--space-1-5);
    word-break: break-word;
  }
}

/*
 * Narrower label column, for a one-column card under a field-list--columns card
 * (pets notes): 9rem lines its labels up with the two-column card's above it.
 * The phone layout (label above value) still applies below 640px.
 */
@media (min-width: 641px) {
  .field-list--narrow-label .field-row {
    grid-template-columns: 9rem minmax(0, 1fr);
  }
}

/*
 * Two columns of rows: <dl class="field-list field-list--columns"> (pets#show, pets#edit).
 * Fills row by row: 1 2 / 3 4 / … The card is the size container, so the list
 * drops back to one column whenever the card itself gets narrow.
 */
.card:has(> .field-list--columns) {
  container-type: inline-size;
}

.field-list--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);

  .field-row {
    grid-template-columns: 9rem minmax(0, 1fr);
  }

  /* The last row is the bottom of both columns: with an even number of rows,
     the one before it has no border either */
  .field-row:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

@container (max-width: 44rem) {
  .field-list--columns {
    grid-template-columns: 1fr;

    .field-row:nth-last-child(2):nth-child(odd) {
      border-bottom: var(--border);
    }
  }
}

/* Phone-sized card: label above value, like the plain .field-list below 640px */
@container (max-width: 28rem) {
  .field-list--columns .field-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}