/* ==========================================================================
   Responsive — breakpoint work that doesn't belong beside its component
   Loaded last, so it wins.

   Most adaptation happens through fluid clamp() type and the grid in
   layout.css. This file handles the structural shifts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet and below — single column, job details above the form
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .job-panel {
    align-items: stretch;
  }

  .brand {
    justify-content: flex-start;
  }

  /* The card head stacks so the illustration never squeezes the stepper. */
  .form-card__head {
    align-items: center;
  }

  .form-card__art {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .form-card__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Stage labels are the first thing to overflow on a narrow screen. */
  .stepper__stage {
    width: 4.5rem;
  }

  .stepper__label {
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  /* Icon-badge options: keep the badge but let the label wrap. */
  .option {
    gap: 0.75rem;
  }

  .option__label {
    line-height: 1.3;
  }

  /* Phone prefix + number stack rather than crushing the number field. */
  .field__phone {
    flex-wrap: wrap;
  }

  .field__phone .field__select {
    flex: 1 0 100%;
    border-inline-end: 0;
    border-block-end: 1px solid var(--c-field-bd);
  }

  .form-card__foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
  }

  .form-card__foot .btn {
    width: 100%;
  }

  /* Back sits under the primary action once stacked. */
  .btn--back { order: 1; }
}

/* --------------------------------------------------------------------------
   Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .form-card__art { width: 3.5rem; }

  .option {
    padding: 0.875rem;
    min-height: 3.5rem;
  }

  .option__badge {
    width: 2.25rem;
    height: 2.25rem;
  }

  .salary {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .form-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .form-card__foot,
  .skip-link {
    display: none !important;
  }

  /* Show every step on paper, not just the current one. */
  .step[hidden] {
    display: block !important;
  }

  .step { animation: none; }
}