/* Careers  —  /page/career/
   The advertised posts beside the form to apply for one. */

.career-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: start;
}

@media (max-width: 900px) {
  /* One column, with the FORM second: on a narrow screen somebody scrolls
     past the vacancies to reach it, which is the order they want. Putting the
     form first would make them scroll back up to read what they applied for. */
  .career-layout { grid-template-columns: 1fr; gap: 34px; }
}

/* ------------------------------------------------------------- posts --- */
.career-post {
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--paper, #fff);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--accent, var(--accent));
}
.career-post__title {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--ink, #1f1f1f);
}
.career-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 10px;
  font-size: .78rem;
  color: var(--muted, #6b7280);
}
.career-post__meta span { display: inline-flex; align-items: center; }
.career-post__meta span + span::before {
  content: "·";
  margin-right: 16px;
  color: var(--line, #d9dee8);
}
.career-post__text {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--ink-soft, #333);
}
.career-post__text:last-child { margin-bottom: 0; }

.career-none {
  padding: 22px 20px;
  background: var(--paper, #fff);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-xs);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted, #6b7280);
}

/* -------------------------------------------------------------- form --- */
.career-apply {
  padding: 26px 26px 30px;
  background: var(--paper, #fff);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-sm);
}

.career-form__field { margin-bottom: 15px; }
.career-form__field label {
  display: block;
  margin-bottom: 5px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink, #1f1f1f);
}
.career-form__field label span { color: var(--red, #d0021b); }

.career-form__field input,
.career-form__field select,
.career-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #d9dee8);
  border-radius: var(--radius-sm, 6px);
  font: inherit;
  font-size: .88rem;
  color: var(--ink, #1f1f1f);
  background: #fff;
}
.career-form__field input:focus,
.career-form__field select:focus,
.career-form__field textarea:focus {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 1px;
  border-color: transparent;
}
.career-form__field textarea { resize: vertical; min-height: 92px; }

/* The file input is left as the browser draws it. A styled one has to be a
   hidden input behind a label, and that arrangement loses the filename
   readout - which is the one piece of feedback telling somebody their CV
   actually attached. */
.career-form__field input[type="file"] { padding: 8px; background: var(--page, #f6f7f9); }

.career-form__hint {
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  color: var(--muted, #6b7280);
}
.career-form__error {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--red, #d0021b);
}

.career-form__submit {
  width: 100%;
  margin-top: 6px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: var(--accent, var(--accent));
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--transition);
}
.career-form__submit:hover { background: var(--accent-soft, #d4b551); }

.career-form__note {
  margin: 12px 0 0;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--muted, #6b7280);
}

/* ----------------------------------------------------- confirmation --- */
.career-thanks {
  margin-bottom: 30px;
  padding: 20px 24px;
  background: #f4f8f5;
  border: 1px solid #cfe8d9;
  border-radius: var(--radius, 8px);
}
.career-thanks h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #0f7a45;
}
.career-thanks p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink-soft, #333);
}