/* ============================================================
   AIHPG SHARED FORM CSS  (.field system)
   Cross-cutting CC-5 (see /docs/FORM-AUDIT.txt).

   Today the site has SIX near-duplicate form-field classes:
       .hf-field   (homepage hero — dark background)
       .vf-g       (homepage valuation form — light background)
       .cf-g       (contact-us form)
       .pf-g       (partnership / decoration forms)
       .cb-field   (callback widget)
       .calc-field (calculator — kept differentiated)

   This module introduces a parallel, modifier-based system so the
   six legacy blocks can be retired one form at a time.

   Canonical HTML pattern:

     <div class="field">
       <label class="field__label" for="vf-bedrooms">
         Bedrooms <span class="field__opt">(optional)</span>
       </label>
       <input class="field__input" id="vf-bedrooms" name="bedrooms">
       <p class="field__hint">Helps us narrow the comp set.</p>
       <p class="field__error" hidden>Please pick one.</p>
     </div>

     <div class="field field--row">  (two-column layout)
       <div class="field"> ... </div>
       <div class="field"> ... </div>
     </div>

   Variants:
     .field--row        two-column row container (collapses on mobile)
     .field--inline     inline label + input (rare; checkboxes)
     .field--invalid    invalid state (post-CC-1 client validation)

   Slots:
     .field__label   the label element
     .field__input   the input/select/textarea
     .field__hint    helper text (placed under input)
     .field__error   error message (hidden by default)
     .field__opt     "(optional)" softener span inside the label
     .field__req     required asterisk inside the label

   COLOURS / TYPOGRAPHY ARE INTENTIONALLY OMITTED.  Each host page
   already themes its inputs against its background (dark hero vs.
   light section).  This module ships only the *structural* rules
   (spacing, layout, full-width input) that every form agrees on.
   Hosts apply their own colour treatment via either the legacy
   class (during migration) or via local overrides on .field.

   MIGRATION PLAN
   --------------
   Step 1 (this commit) — introduce .field/.field__* alongside the
                          legacy classes.  Don't migrate any form
                          yet.  New optional fields added in the
                          Phase C Form 2 commits use the new system.
   Step 2 — convert Form 4 (contact-us) — simplest layout — and
            screenshot-diff desktop + mobile.
   Step 3 — convert remaining forms one at a time, one PR each.
   Step 4 — once every form is migrated, delete the legacy class
            blocks (.hf-field, .vf-g, .cf-g, .pf-g, .cb-field) from
            the inline <style> blocks.

   Calculator-specific layout (.calc-field, .field-wrap with the
   prefix "£" treatment) stays differentiated — see CC-5 KEEP
   DIFFERENTIATED.
   ============================================================ */

.field{
  margin-bottom:14px;
}

.field--row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.field--row > .field{
  margin-bottom:0;
}

.field--inline{
  display:flex;
  align-items:center;
  gap:10px;
}

.field__label{
  display:block;
  margin-bottom:6px;
}

.field__input{
  width:100%;
  font-family:inherit;
  outline:none;
  transition:all .3s ease;
}

.field__input:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.field textarea.field__input{
  min-height:120px;
  resize:vertical;
}

.field__hint{
  font-size:11px;
  margin:6px 0 0;
  line-height:1.5;
  opacity:.75;
}

.field__error{
  font-size:11px;
  margin:6px 0 0;
  line-height:1.5;
  color:#c44;
}

.field__error[hidden]{display:none}

.field__opt{
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  font-size:11px;
  margin-left:4px;
  opacity:.6;
}

.field__req{color:#c44}

/* Invalid-state hook for post-CC-1 client validation. Hosts
   theme the border colour via existing input rules; this only
   reveals the error slot. */
.field--invalid .field__error{display:block}

@media (max-width:640px){
  .field--row{grid-template-columns:1fr;gap:0}
  .field--row > .field{margin-bottom:14px}
}