/* ============================================================
   URBINO · FORM FIELD (extensions)
   Molecule. Composes label + control + hint/error + counter.

   The base classes (.u-field, .u-field__label, .u-field__hint,
   .u-field__error, .u-field__counter, .u-field__row,
   .u-field__required) live in components/input.css. This file
   ADDS the higher-order compositions:

     .u-field--inline       — label and control side-by-side
     .u-field__control      — explicit slot for non-input controls
     .u-field__label-hint   — secondary text next to label
     .u-form-section        — vertical group of fields with heading
     .u-form-grid           — 2-column form layout
     .u-form-footer         — submit / cancel row

   Form field also relies on .u-fieldset / .u-fieldset__legend
   from components/choice.css when wrapping radio/checkbox groups.
   ============================================================ */


/* ============================================================
   INLINE LAYOUT — label left, control right
   Manager edit-forms where vertical space is precious.
   ============================================================ */

.u-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--u-space-4);
}
.u-field--inline > .u-field__label {
  flex-shrink: 0;
  width: 160px;                 /* default; override per-form with --label-w */
  width: var(--label-w, 160px);
  margin-top: 0;
}
.u-field--inline > .u-input,
.u-field--inline > .u-field__control,
.u-field--inline > input,
.u-field--inline > select,
.u-field--inline > textarea {
  flex: 1;
  min-width: 0;
}
.u-field--inline > .u-input-wrap {
  flex: 1;
  min-width: 0;
}

/* Hints/errors align with the control, not below the label */
.u-field--inline > .u-field__hint,
.u-field--inline > .u-field__error,
.u-field--inline > .u-field__row {
  margin-left: calc(var(--label-w, 160px) + var(--u-space-4));
}


/* ============================================================
   EXPLICIT CONTROL SLOT
   For non-input controls (radio group, checkbox group, uploader).
   ============================================================ */

.u-field__control {
  display: block;
  width: 100%;
}


/* ============================================================
   LABEL HINT
   Secondary text right of the label. E.g. "nem kötelező".
   ============================================================ */

.u-field__label-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--u-fg-3);
  margin-left: var(--u-space-1);
}
.u-field--cit .u-field__label-hint { font-size: 13px; }


/* ============================================================
   FORM SECTION
   A heading + vertical stack of fields.
   ============================================================ */

.u-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-4);          /* 16 — field gap, manager default */
}
.u-form-section + .u-form-section { margin-top: var(--u-space-6); }   /* 24 — section gap */

.u-form-section__heading {
  font-family: var(--u-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  padding: 0 0 var(--u-space-2);
  margin: 0;
  border-bottom: 1px solid var(--u-border);
}
.u-form-section__desc {
  font-size: 13px;
  color: var(--u-fg-3);
  margin: 0 0 var(--u-space-1);
  line-height: 1.5;
}

/* Citizen — more generous */
.u-form-section--cit { gap: var(--u-space-5); }
.u-form-section--cit + .u-form-section--cit { margin-top: var(--u-space-8); }
.urbino-cit .u-form-section { gap: var(--u-space-5); }
.urbino-cit .u-form-section + .u-form-section { margin-top: var(--u-space-8); }


/* ============================================================
   FORM GRID
   2-column layout. Single column under 640px.
   ============================================================ */

.u-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u-space-4);                                /* 16 */
}
.u-form-grid--cit { gap: var(--u-space-5); }            /* 20 */
.urbino-cit .u-form-grid { gap: var(--u-space-5); }

.u-form-grid > .u-field--span-2,
.u-form-grid > .u-field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .u-form-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   FORM FOOTER
   CTA row at the bottom of a form. Right-aligned;
   destructive on the far left.
   ============================================================ */

.u-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-space-2);
  margin-top: var(--u-space-7);                         /* 28 */
  padding-top: var(--u-space-5);                        /* 20 */
  border-top: 1px solid var(--u-border);
}
.u-form-footer > .u-form-footer__destructive {
  margin-right: auto;
}