/* Form Grid Component
 *
 * Reusable grid layouts for forms with responsive behavior.
 * Collapses to single column below 980px breakpoint.
 */

/* Two-column grid layout */
.grid-2 {
  column-gap: var(--size-6);  /* 24px */
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--size-4);     /* 16px */
}

/* Three-column grid layout */
.grid-3 {
  column-gap: var(--size-6);  /* 24px */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: var(--size-4);     /* 16px */
}

/* Field wrapper - contains label row and input */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--size-1_5);       /* 6px */
}

/* Label row - contains label and required indicator */
.label-row {
  align-items: center;
  display: flex;
  gap: var(--size-1_5);       /* 6px */
}

/* Label styling within field */
.field label {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);  /* 13px */
  font-weight: 600;
  line-height: 1;
}

/* Required indicator */
.req {
  color: var(--color-negative);
  font-weight: 600;
}

/* Hidden required indicator for layout alignment */
.req--hidden {
  visibility: hidden;
}

/* Help text for form fields */
.help-text {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-block-start: var(--size-2);
}

/* Input width constraints */
.input--narrow {
  max-width: 210px;
}

.input--medium {
  max-width: 420px;
}

/* Preserve whitespace for multiline text */
.preserve-whitespace {
  white-space: pre-wrap;
}

/* Prevent text wrapping in table cells or other elements */
.text-nowrap {
  white-space: nowrap;
}

/* Styled list for error messages and content */
.list-disc {
  list-style: disc;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 980px) {
  .grid-2,
  .grid-3 {
    column-gap: 0;
    grid-template-columns: 1fr;
  }
}