/* Shared form building blocks: sections, fields, field grid. Used by the deal
   posting form and the my/* settings forms. BEM-lite; layer order in _global.css. */

@layer components {
  /* Spacing hierarchy: tight inside a field (label/input/hint), roomier within
     a section, roomiest between sections (which a divider line separates). */
  .form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &.form-section--divided {
      border-block-start: 1px solid var(--color-border);
      padding-block-start: 1.5rem;
    }
  }

  .form-section__head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .form-section__title {
    font-size: var(--text-medium);
    font-weight: 700;
    text-wrap: balance;
  }

  .form-section__desc {
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  .form-section__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    label {
      font-size: var(--text-small);
      font-weight: 600;
    }
  }

  /* Related fields pair into two columns; everything else is a full-width row. */
  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem var(--inline-space);
    align-items: start;
  }

  /* Collapse to one column when the content container is narrow, not the
     viewport, so it adapts to its column (e.g. a future sidebar layout). */
  @container app (max-width: 540px) {
    .field-grid {
      grid-template-columns: 1fr;
    }
  }

  .field__hint {
    font-size: var(--text-x-small);
    color: var(--color-text-muted);
  }
}