/* ═══════════════════════════════════════════════════════════════════════
   JOBS  ·  /jobs/ and /jobs/<opening>/
   Loaded only when renert_is_jobs() is true (functions.php) – the same
   page-scoped split as css/woocommerce.css.

   The palette is NOT repeated here: style.css owns the :root tokens and is
   this file's dependency, so --rn-ink / --rn-rust / --rn-line resolve.
   The form reuses .form-group / .form-label / .form-input / .form-select /
   .form-textarea from style.css – a job application should feel like the
   reservation form, because it is the same house asking.
   Prefix: rjob-
   ═══════════════════════════════════════════════════════════════════════ */

/* page.php drops its padded column and its <h1> on this page (renert_is_jobs),
   so the hero and the section bands run edge to edge like the homepage's, and
   `.rjob-inner` is what puts the reading column back. */
.renert-page--jobs { padding: 0 0 100px; }

.rjob {
  font-family: 'Barlow', sans-serif;
  color: var(--rn-ink);
}

/* The reading column – the same width and gutters as .renert-page__inner, so
   the text lines up with every other page of the site. */
.rjob-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 0;
}

/* Bands are direct children of .rjob, so they are already full width; this is
   only their rhythm against the blocks around them. */
.rjob .rjob-band { margin: 72px 0 0; }
.rjob .rjob-hero + .rjob-band,
.rjob .rjob-facts + .rjob-band { margin-top: 0; }

@media (max-width: 768px) {
  .renert-page--jobs { padding-bottom: 72px; }
  .rjob-inner { padding: 36px 20px 0; }
  .rjob .rjob-band { margin-top: 52px; }
}

/* ─── Hero ──────────────────────────────────────────────────────────
   The shop archive's masthead, in the bistro half of the site: ink canvas,
   warm vignette, rust kicker, Barlow Condensed 900 title with one rust line,
   the gentle fox drifting behind it, rust rule along the bottom. Values are
   the shop's (css/woocommerce.css §1) so the two heroes are the same object.
   ─────────────────────────────────────────────────────────────────── */

.rjob-hero {
  position: relative;
  background: var(--rn-ink);
  color: #fff;
  overflow: hidden;
  /* the fixed 72px nav sits over the top of this block */
  padding-top: 72px;
  border-bottom: 4px solid var(--rn-rust);
  isolation: isolate;
}

/* subtle warm vignette so the flat black reads as "lit" */
.rjob-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(168, 64, 32, .30), transparent 55%),
    radial-gradient(90% 70% at 0% 120%, rgba(255, 255, 255, .05), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* main.js drives the translateY from data-fox-speed, the same parallax the
   homepage foxes use. z-index beats the global .fox-layer { z-index: 0 }. */
.rjob-hero .rjob-hero__fox {
  position: absolute;
  right: -2%;
  top: 92px; /* below the band, so the head stays visible */
  width: clamp(220px, 40vw, 560px);
  opacity: .07;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: -1;
}

/* The artwork is already white (shopfox_white) – the global .fox-layer img
   invert filter would turn it black again. */
.rjob-hero .rjob-hero__fox img {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
}

.rjob-hero__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.rjob-kicker,
.rjob-crumb {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--rn-rust);
}

.rjob-crumb {
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .4);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rjob-crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.rjob-crumb a:hover, .rjob-crumb a:focus-visible { color: #fff; }
.rjob-crumb .sep { color: rgba(255, 255, 255, .25); margin: 0 .6em; }

.rjob-hero__meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}

.rjob-hero__body {
  padding: 56px 40px 60px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.rjob-hero .rjob-hero__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: .88;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.rjob-hero .rjob-hero__title .accent { color: var(--rn-rust); }

.rjob-hero__desc {
  margin: 26px 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

.rjob-hero__desc .en { color: rgba(255, 255, 255, .4); }

@media (max-width: 768px) {
  .rjob-hero__band { padding: 12px 20px; }
  .rjob-hero__body { padding: 28px 20px 30px; }
  .rjob-hero__desc { margin-top: 18px; font-size: .92rem; }
  .rjob-hero__meta { display: none; } /* the band is too narrow for both */
}

/* ─── Facts strip (the shop's trust band) ───────────────────────── */

.rjob-facts {
  list-style: none;
  display: grid;
  grid-auto-flow: column;   /* one column per item – re-fits 2/3/4 of them */
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  background: var(--rn-ink);
  border-bottom: 2px solid var(--rn-ink);
}

.rjob-facts li {
  padding: 20px 28px;
  border-right: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rjob-facts li:last-child { border-right: none; }

.rjob-facts__k {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rn-rust);
}

.rjob-facts__v {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  overflow-wrap: anywhere;
}

.rjob-facts__v a { color: rgba(255, 255, 255, .6); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.rjob-facts__v a:hover, .rjob-facts__v a:focus-visible { color: #fff; border-bottom-color: var(--rn-rust); }

@media (max-width: 820px) {
  .rjob-facts { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
  .rjob-facts li:nth-child(2n) { border-right: none; }
  .rjob-facts li:not(:nth-last-child(-n+2)) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 480px) {
  .rjob-facts li { padding: 14px 16px; }
  .rjob-facts__v { font-size: .76rem; }
}

/* ─── Openings list ─────────────────────────────────────────────── */

.rjob-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rn-line);
}

.rjob-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rn-line);
}

.rjob-card__body { flex: 1 1 auto; min-width: 0; }

.rjob-card__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}

.rjob-card__title a {
  color: var(--rn-ink);
  text-decoration: none;
  transition: color .2s;
}

.rjob-card__title a:hover,
.rjob-card__title a:focus-visible { color: var(--rn-rust); }

.rjob-card__title-en {
  font-style: italic;
  font-size: .9rem;
  color: var(--rn-mute);
  margin: 4px 0 0;
}

.rjob-card__summary {
  margin: 12px 0 0;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 56ch;
}

.rjob-card__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 4px;
}

/* ─── Fact chips ────────────────────────────────────────────────── */

.rjob-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
}

.rjob-chip {
  border: 1px solid var(--rn-line);
  padding: 5px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(12, 12, 12, .62);
}

.rjob-chip--accent {
  border-color: var(--rn-rust);
  color: var(--rn-rust);
}

/* ─── Buttons ───────────────────────────────────────────────────── */

.rjob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 22px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--rn-ink);
  background: transparent;
  color: var(--rn-ink);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}

.rjob-btn .line {
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width .3s;
  flex: 0 0 auto;
}

.rjob-btn:hover .line,
.rjob-btn:focus-visible .line { width: 26px; }

.rjob-btn--ghost:hover,
.rjob-btn--ghost:focus-visible {
  background: var(--rn-ink);
  color: var(--rn-paper);
}

.rjob-btn--solid {
  background: var(--rn-rust);
  border-color: var(--rn-rust);
  color: var(--rn-paper);
  margin-top: 24px;
}

.rjob-btn--solid:hover,
.rjob-btn--solid:focus-visible {
  background: var(--rn-ink);
  border-color: var(--rn-ink);
}

.rjob-btn--solid[disabled] { opacity: .55; cursor: wait; }

/* ─── Nothing open ──────────────────────────────────────────────── */

.rjob-empty {
  padding: 0;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 56ch;
}

.rjob-empty p { margin: 0; }
.rjob-empty .en { color: var(--rn-mute); margin-top: 6px; }

/* ─── One opening ───────────────────────────────────────────────── */

/* At the foot of an opening – the hero's breadcrumb is a long scroll away by
   the time somebody reaches the end of the advert. */
.rjob-back {
  margin: 64px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rn-line);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.rjob-back a {
  display: inline-flex;
  flex-direction: column;
  color: var(--rn-ink);
  text-decoration: none;
  transition: color .2s;
}

.rjob-back a:hover,
.rjob-back a:focus-visible { color: var(--rn-rust); }

.rjob-back .en {
  font-style: italic;
  text-transform: none;
  letter-spacing: .02em;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  color: var(--rn-mute);
}

/* Draft/closed opening, visible to the backoffice only. */
.rjob-preview-note {
  margin: 0 0 24px;
  padding: 10px 14px;
  border-left: 3px solid var(--rn-rust);
  background: var(--rn-panel);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--rn-rust);
}

.rjob-detail__media {
  margin: 0;
  background: var(--rn-grey-img);
}

.rjob-detail__media img {
  display: block;
  width: 100%;
  height: auto;
}

.rjob-detail__lead {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 60ch;
}

.rjob-detail__text {
  margin: 18px 0 0;
  font-size: 1rem;
  line-height: 1.75;
  max-width: 62ch;
}

.rjob-detail__section { margin-top: 40px; }

.rjob-detail__subhead {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rn-ink);
  max-width: 62ch;
}

.rjob-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}

.rjob-bullets li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--rn-line);
  font-size: .98rem;
  line-height: 1.6;
}

.rjob-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--rn-rust);
}

.rjob-detail__closes {
  margin: 28px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--rn-mute);
}

/* ─── The application form ──────────────────────────────────────── */

.rjob-apply__heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.rjob-apply__heading .en { font-size: 0.45em; }

.rjob-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rjob-form[hidden] { display: none; }

/* Two fields side by side have to end on the same line, and two things were
   stopping that.

   One: the date field is a button whose label is empty until a date is picked,
   and an empty span has no line box at all. A zero-width space gives it one –
   the same one the input beside it has, since both inherit .form-input's font
   and line-height. Measured, not guessed at with a min-height. */
.rjob-datepicker .res-datepicker__value:empty::before {
  content: "\200B";
}

/* Two: "Fräi vum / Available from" wraps to two lines where "Telefon / Phone"
   does not, which pushed the field under it down by a line. The fields align
   at the bottom of the row, so a label may take the room it needs. */
.rjob-form .form-row { align-items: end; }

.rjob-noscript {
  margin: 0 0 24px;
  font-size: .95rem;
  line-height: 1.6;
}

/* Languages – a tick grid, not a multi-select nobody can operate on a phone. */
.rjob-langs {
  border: none;
  margin: 0;
  padding: 0;
}

.rjob-langs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rjob-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rn-line);
  padding: 9px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.rjob-lang:hover { border-color: var(--rn-ink); }

.rjob-lang input { accent-color: var(--rn-rust); margin: 0; }

.rjob-lang:focus-within {
  border-color: var(--rn-rust);
  box-shadow: 0 0 0 1px var(--rn-rust);
}

/* "Other" – the box that opens a field. Marked in rust while it is open, so it
   is clear the empty-looking input below belongs to it. */
.rjob-lang--other input:checked ~ span { color: var(--rn-rust); }
.rjob-lang--other:has(input:checked) { border-color: var(--rn-rust); }

.rjob-lang-other {
  margin-top: 12px;
  max-width: 320px;
}

.rjob-lang-other[hidden] { display: none; }

/* File picker – the native control is hidden behind its own label so it can
   carry the house's type; the chosen name is written beside it. */
.rjob-file__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.rjob-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rjob-file__button {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--rn-ink);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.rjob-file__button:hover { background: var(--rn-ink); color: var(--rn-paper); }

/* The native input is off-screen, so its focus ring has to be drawn here. */
.rjob-file input[type="file"]:focus-visible + .rjob-file__name,
.rjob-file input[type="file"]:focus-visible ~ .rjob-file__button,
.rjob-file:focus-within .rjob-file__button {
  outline: 2px solid var(--rn-rust);
  outline-offset: 2px;
}

.rjob-file__name {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--rn-mute);
  word-break: break-all;
}

.rjob-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rn-mute);
}

.rjob-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  line-height: 1.55;
  cursor: pointer;
}

.rjob-consent input {
  accent-color: var(--rn-rust);
  margin-top: 3px;
  flex: 0 0 auto;
}

.rjob-consent .en { color: var(--rn-mute); }

.rjob-policy {
  margin: -12px 0 0;
  font-size: 12px;
  color: var(--rn-mute);
}

.rjob-policy a { color: var(--rn-rust); }

.rjob-error {
  margin: 0;
  color: var(--rn-rust);
  font-size: 13px;
  line-height: 1.5;
}

/* ─── Confirmation ──────────────────────────────────────────────── */

.rjob-confirm { animation: fadeIn .5s ease both; }

.rjob-confirm__rule {
  width: 32px;
  height: 2px;
  background: var(--rn-rust);
  margin-bottom: 24px;
}

.rjob-confirm__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 10px;
}

.rjob-confirm__title:focus { outline: none; }
.rjob-confirm__title:focus-visible { outline: 2px solid var(--rn-rust); outline-offset: 4px; }

.rjob-confirm__sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.rjob-confirm__sub .en { color: var(--rn-mute); }

/* ─── Phone ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .rjob-card {
    flex-direction: column;
    gap: 18px;
  }

  .rjob-card__actions {
    flex-direction: row;
    width: 100%;
  }

  .rjob-card__actions .rjob-btn { flex: 1 1 0; }

}

@media (prefers-reduced-motion: reduce) {
  .rjob-confirm { animation: none; }
  .rjob-btn,
  .rjob-btn .line,
  .rjob-card__title a { transition: none; }
}