/* Section: form_career — application form + sticky side column (EXALCO-Career.dc.html "Application form").
   Controls, checkbox, error and success blocks come from base.css. */

.ex-form-career { scroll-margin-top: var(--ex-scroll-offset); }

.ex-form-career__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}
.ex-form-career__grid--single { grid-template-columns: minmax(0, 1fr); }
.ex-form-career__main { min-width: 0; }

.ex-form-career__title.ex-title { margin: 0 0 10px; }
.ex-form-career__text.ex-text { max-width: 640px; margin: 0 0 24px; }

.ex-form-career__form,
.ex-form-career__live { max-width: 720px; }
.ex-form-career__form[hidden] { display: none; }
.ex-form-career__consent { margin-top: 16px; }
.ex-form-career .ex-field__error { margin: 0; }
/* A message that clears when its field is left must not move the submit button under the pointer: mousedown on the
   button blurs the field, the slot collapsed, the button jumped up 25px and a click on its lower half was lost.
   The emptied slot of a text control / the consent box keeps its line for .3s (zero-duration, delayed transition),
   then collapses. Hidden, it is a zero-height box that cancels the field's 8px gap. */
.ex-form-career .ex-field:not(.ex-field--file):not(.ex-field--radio) > .ex-field__error { min-height: 16.8px; } /* one 12px × 1.4 line */
.ex-form-career .ex-field:not(.ex-field--file):not(.ex-field--radio) > .ex-field__error[hidden] {
  display: block !important; /* over the global [hidden] rule: the box has to stay in flow to hold its line */
  visibility: hidden;
  min-height: 0;
  margin-top: -8px;
  transition: min-height 0s linear .3s, margin-top 0s linear .3s;
}

/* CV upload: the dashed drop-box is the generic file field (base.css › .ex-field--file), shared with the quote form. */

/* Side column */
.ex-form-career__side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--ex-space-4); min-width: 0; }
.ex-form-career__box { color: var(--ex-ink); }
.ex-form-career__box--benefits { padding: 22px 24px 22px 38px; border: 1px solid var(--ex-red-line); background: var(--ex-red-tint); }
.ex-form-career__box--hr { padding: 20px 22px; border: 1px solid var(--ex-blue-line); background: var(--ex-blue); }
.ex-form-career__box-title { margin: 0 0 12px; font-size: var(--ex-fs-kicker); font-weight: 700; line-height: normal; letter-spacing: .22em; }
.ex-form-career__box--hr .ex-form-career__box-title { margin-bottom: 10px; }

.ex-form-career__benefits { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ex-form-career__benefits li { position: relative; padding-left: 17px; font-size: 12.5px; line-height: 1.55; }
.ex-form-career__benefits li::before { content: ""; position: absolute; top: 5px; left: 0; width: 7px; height: 7px; background: var(--ex-red); }

.ex-form-career__hr { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.8; }
.ex-form-career__hr li { overflow-wrap: anywhere; }
.ex-form-career__hr a { color: var(--ex-ink); transition: color var(--ex-t-fast); }
.ex-form-career__hr a:hover,
.ex-form-career__hr a:focus-visible { color: var(--ex-red); }

@media (max-width: 1199px) {
  .ex-form-career__grid { grid-template-columns: minmax(0, 1fr); }
  .ex-form-career__side { position: static; flex-direction: row; align-items: stretch; }
  .ex-form-career__box { flex: 1 1 0; min-width: 0; }
  .ex-form-career__form,
  .ex-form-career__live { max-width: none; }
}

@media (max-width: 899px) {
  .ex-form-career__side { flex-direction: column; }
  .ex-form-career__hr a { display: inline-flex; align-items: center; min-height: var(--ex-touch); }
}

/* Touch layouts: the consent row is a 44px target (one 20px line + 12px above and below; the outer gaps shrink by the same amount). */
@media (max-width: 899px) {
  .ex-form-career__consent { margin-top: 4px; }
  .ex-form-career__consent .ex-checkbox { padding-block: 12px; }
  .ex-form-career .ex-form-actions { margin-top: 8px; }
}

@media (max-width: 599px) {
  .ex-form-career .ex-form-actions .ex-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-form-career__hr a { transition: none; }
}