/* ============================================================================
   EMPLOYMENT (Work) PAGE — Layout-only styles.

   Owns ONLY page-level composition: section gaps, the inline job form
   layout, and the city/state/zip row. Every visible UI primitive comes
   from shared components.
   ============================================================================ */

.employment__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
.employment__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}
.employment__section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
}

/* ── Inline Add / Edit form ─────────────────────────────────────────────── */
.employment__form {
  margin-top: var(--space-base);
  padding: var(--space-xl);
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  animation: employment-reveal var(--transition-fast-200) ease-out;
}
@keyframes employment-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.employment__form-header {
  margin-bottom: var(--space-lg);
}
.employment__form-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
}
.employment__form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
/* Each form section (Where you work / About this job) gets its own
   stack. Section titles sit at xs scale, uppercase, so they read as
   internal-form headers without competing with the form's main title. */
.employment__form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}
.employment__form-section-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-xs);
}

/* In-form nav-blocked warning. Sits between the form body and the
   action bar so the message lands right where the user needs to act
   (Save or Discard). */
.employment__form-nav-warning {
  margin-top: var(--space-base);
}

/* City / State / Zip row — equal thirds. align-items: end keeps inputs on the
   same baseline if label heights ever differ. */
.employment__form-row--city-state-zip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-base);
  align-items: end;
}
.employment__form-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-base);
  align-items: end;
}
/* Street address + Apt/suite — street gets the larger share. */
.employment__form-row--street-apt {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-base);
  align-items: end;
}
.employment__form-row--city-state-zip .form-field,
.employment__form-row--two .form-field,
.employment__form-row--street-apt .form-field {
  max-width: none;
}
/* Let the equal-fraction tracks actually divide evenly: grid items default to
   min-width:auto (their content's min size), and a text input's intrinsic
   width is wide enough to push the tracks past the container and overflow
   (clipping the last column). min-width:0 lets the columns shrink to their
   1fr share. */
.employment__form-row--city-state-zip > *,
.employment__form-row--two > *,
.employment__form-row--street-apt > *,
.employment__form-row--city-state-zip .form-field,
.employment__form-row--two .form-field,
.employment__form-row--street-apt .form-field,
.employment__form-row--city-state-zip .form-field__input,
.employment__form-row--two .form-field__input,
.employment__form-row--street-apt .form-field__input {
  min-width: 0;
}
@media (max-width: 720px) {
  .employment__form-row--city-state-zip,
  .employment__form-row--two,
  .employment__form-row--street-apt {
    grid-template-columns: 1fr;
  }
}