/* ==========================================================================
   Block: Application form
   --------------------------------------------------------------------------
   A light panel of grouped fields on the page's own surface, matching the
   comps' treatment: a titled intro, then fieldsets whose fields sit one,
   two or three across depending on the width each field carries.
   ========================================================================== */

.awx-af__inner {
  background-color: var(--surface-bg);
}

.awx-af__header {
  margin-bottom: var(--awx-space-md);
}

/* 24px measured on the comp's own "What We Need From You" — this is a
   panel title, not a section heading, so it does not take --awx-step-4. */
.awx-af__title {
  margin: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.awx-af__description {
  margin: var(--awx-space-2xs) 0 0;
  color: var(--surface-muted);
  font-size: 0.9375rem; /* 15px, measured */
  line-height: 1.5;
}

/* Fieldsets carry the grouping for assistive tech; the browser's own
   border and padding are removed because the comp draws no box. */
.awx-af__group {
  margin: 0 0 var(--awx-space-md);
  padding: 0;
  border: 0;
}

.awx-af__group-label {
  display: block;
  width: 100%;
  margin-bottom: var(--awx-space-sm);
  padding: 0;
  color: var(--surface-heading);
  font-family: var(--awx-font-display);
  font-size: 0.75rem; /* 12px, measured */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.awx-af__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--awx-space-sm);
}

/* One column on a phone regardless of the width a field asks for — three
   inputs across a 375px viewport is unusable, and the comp's own mobile
   frames stack them. */
@media (min-width: 48rem) {
  .awx-af__fields {
    grid-template-columns: repeat(6, 1fr);
  }

  .awx-af__field[data-width="third"] { grid-column: span 2; }
  .awx-af__field[data-width="half"]  { grid-column: span 3; }
  .awx-af__field[data-width="full"]  { grid-column: span 6; }
}

.awx-af__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.awx-af__label {
  color: var(--surface-heading);
  font-size: 0.8125rem; /* 13px, measured */
  font-weight: 700;
}

.awx-af__required {
  color: var(--surface-accent);
}

.awx-af__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background-color: var(--awx-page-bg);
  border: var(--awx-rule) solid var(--surface-rule);
  border-radius: var(--awx-radius);
  color: var(--surface-text);
  font-family: var(--awx-font-body);
  font-size: var(--awx-step-0);
  transition: border-color var(--awx-transition);
}

.awx-af__input::placeholder {
  color: var(--surface-muted);
  opacity: 1; /* Firefox dims placeholders by default; the comp's are solid. */
}

.awx-af__input:focus-visible {
  border-color: var(--surface-accent);
}

.awx-af__input--textarea {
  resize: vertical;
}

.awx-af__actions {
  margin-top: var(--awx-space-sm);
}