/* Вакансии и отклик (новая витрина, часть 5б) — по эталону `docs/design/reference/layout.css` (`.jobs`, `.job-row`,
   `.post`, форма отклика). Обе страницы — колонка для чтения (Р39). Размеры — токенами, цвета — ролями темы. */

.screen[data-screen='jobs'] {
  max-width: calc(var(--column-max) + var(--gutter) * 2); padding: var(--space-4) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}

.jobs-page { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.jobs-page h1 { margin: 0; font-family: var(--font-title); font-size: var(--title-lg); line-height: var(--leading-title); text-align: start; }

.jobs { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.job-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border2); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); text-decoration: none;
  transition: box-shadow var(--motion-fast) var(--ease);
}
.job-row:hover { box-shadow: var(--shadow-1); }
.job-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.job-row > span { grid-column: 1; min-width: 0; }
.job-row__title { font-family: var(--font-title); font-size: var(--title-sm); line-height: var(--leading-title); }
.job-row__place, .job-row__schedule { color: var(--muted); font-size: var(--text-sm); }
/* Оплата — справа во все строки, жирно и без переноса; на телефоне — под остальным. */
.job-row > .job-row__pay { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-weight: var(--weight-semibold); white-space: nowrap; }
@media (max-width: 767px) {
  .job-row { grid-template-columns: minmax(0, 1fr); }
  .job-row > .job-row__pay { grid-column: 1; grid-row: auto; }
}

/* ── Вакансия (И49, владелец 04.10.2026: «сделай отклик красивым») — колонка, блоки во всю её ширину (Р39) ── */
.jobs-page--one { gap: var(--space-5); }
.jobs-page--one > .back-link { justify-self: start; }

/* Обложка целиком, какой её загрузили: не обрезается; высокая — не выше экрана, по бокам — фон рамки. */
.job-cover {
  display: grid; place-items: center; margin: 0; width: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--cream);
}
.job-cover img { display: block; max-width: 100%; height: auto; max-height: min(calc(var(--space-8) * 10), 75vh); object-fit: contain; }

/* Шапка: название, оплата крупно, «Откликнуться». На ПК кнопка — справа от оплаты. */
.job-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-4); }
.job-head h1 { grid-column: 1 / -1; }
.job-pay { margin: 0; font-family: var(--font-title); font-size: var(--title-md); line-height: var(--leading-title); color: var(--ink); }
.job-pay--agreed { font-family: var(--font-text); font-size: var(--text-lg); color: var(--muted); }
.job-head__apply { white-space: nowrap; }
@media (max-width: 599px) {
  .job-head { grid-template-columns: minmax(0, 1fr); }
  .job-head__apply { width: 100%; }
}

/* Факты — карточкой со строками через черту. */
.job-facts {
  display: grid; margin: 0; padding: 0 var(--space-5);
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel);
}
.job-facts__row {
  display: grid; grid-template-columns: calc(var(--space-8) * 2) minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) 0; border-top: 1px solid var(--border2);
}
.job-facts__row:first-child { border-top: 0; }
.job-facts dt { color: var(--muted); }
.job-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .job-facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .job-facts dt { font-size: var(--text-sm); }
}

.job-section { display: grid; gap: var(--space-3); width: 100%; }
.job-section h2 { margin: 0; font-family: var(--font-title); font-size: var(--title-sm); line-height: var(--leading-title); }
.job-section ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.job-section li::marker { color: var(--accent); }
.job-text { display: grid; gap: var(--space-3); width: 100%; }
.job-text p { margin: 0; }

/* ── Отклик: карточка во всю ширину колонки ── */
.job-form, .job-done {
  display: grid; gap: var(--space-4); width: 100%; margin-top: var(--space-3); padding: var(--space-6);
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-1);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.job-form__head { display: grid; gap: var(--space-1); }
.job-form h2, .job-done h2 { margin: 0; font-family: var(--font-title); font-size: var(--title-md); line-height: var(--leading-title); }
.job-form__lead { margin: 0; color: var(--muted); }
.job-form .field { width: 100%; }
.job-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.job-form .input { width: 100%; }
@media (max-width: 599px) {
  .job-form, .job-done { padding: var(--space-5) var(--space-4); }
  .job-form__pair { grid-template-columns: minmax(0, 1fr); }
}

/* Резюме: своя кнопка вместо подписи браузера; само поле — внутри, невидимое, но в порядке Tab. */
.job-file { display: grid; gap: var(--space-2); }
.job-file__pick {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg);
  padding: var(--space-3) var(--space-4); border: 1px dashed var(--gold2); border-radius: var(--radius-md);
  background: var(--page); color: var(--accent); cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.job-file__pick:hover, .job-file__pick.is-over { border-color: var(--gold); background: var(--cream); }
.job-file__pick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.job-file__pick[hidden] { display: none; }
.job-file__pick svg { flex: none; }
.job-file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.job-file__words { display: grid; gap: var(--space-1); min-width: 0; }
.job-file__words b { font-weight: var(--weight-semibold); }
.job-file__hint { color: var(--muted); font-size: var(--text-sm); }
.job-file__chosen {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--page); color: var(--ink);
}
.job-file__chosen[hidden] { display: none; }
.job-file__chosen svg { flex: none; color: var(--accent); }
.job-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.job-file__size { flex: none; color: var(--muted); font-size: var(--text-sm); }
/* Общее правило кнопок сайта (`app.css`, `button`) даёт поля, отступы и тень — у крестика их нет. */
.job-file__drop {
  display: grid; place-items: center; flex: none; width: var(--control-md); height: var(--control-md); min-height: 0;
  margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: none;
  color: var(--muted); cursor: pointer;
}
.job-file__drop:hover { background: var(--cream); color: var(--ink); }
.job-file__drop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Галка — вровень с первой строкой подписи (общий флажок сайта, `.check--long`). */
.job-form__consent { font-size: var(--text-sm); }
.job-form__consent a { color: var(--accent); }
.job-form__error { margin: 0; color: var(--err); }
.job-form__error:empty { display: none; }
.job-form__send { width: 100%; }
/* Ловушка для роботов: вне экрана, человек её не видит и до неё не дотабывает. */
.job-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.job-done { justify-items: center; text-align: center; }
.job-done:focus { outline: none; }
.job-done p { margin: 0; color: var(--muted); }
.job-done__mark {
  display: grid; place-items: center; width: calc(var(--space-8) + var(--space-3)); height: calc(var(--space-8) + var(--space-3));
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {
  .job-row, .job-file__pick { transition: none; }
}