/* ==========================================================================
   Valeris — job listings and apply popup
   Scoped under .vjobs / .vjobs-modal so it cannot leak into the theme or
   Elementor. No font-family and no max-width anywhere on purpose: the theme
   owns type and the Elementor container owns width.
   ========================================================================== */

.vjobs {
  --vj-navy: #132750;
  --vj-copper: #cd9483;
  --vj-panel: #f9f9f9;
  --vj-line: #e4e7ec;
  --vj-muted: #6b7280;
  --vj-error: #b3261e;
  --vj-radius: 12px;
  --vj-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Query container, so the grid responds to the block's own width rather
     than the browser window — the Elementor editor canvas is far narrower
     than the live page. */
  container-type: inline-size;
  width: 100%;
}

/* Both blocks set their own box model rather than inheriting the theme's.
   Most themes do declare a global border-box reset, but the form inputs are
   width:100% with padding and a border — where that reset is missing they
   overflow the popup, so this is not a safe thing to assume. The popup is a
   sibling of .vjobs in the DOM, hence the second selector. */
.vjobs,
.vjobs *,
.vjobs *::before,
.vjobs *::after,
.vjobs-modal,
.vjobs-modal *,
.vjobs-modal *::before,
.vjobs-modal *::after { box-sizing: border-box; }

.vjobs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@container (max-width: 720px) {
  .vjobs__grid { grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .vjobs__grid { grid-template-columns: 1fr; }
  }
}

/* --- card ---------------------------------------------------------------- */

/* Title block on the left, Apply Now on the right, both aligned to the top
   of the card — align-items:start rather than center, so the button sits
   level with the first line of the title however many lines it runs to. */
.vjobs__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 24px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--vj-panel);
  border-radius: var(--vj-radius);
}

.vjobs__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.vjobs__title {
  margin: 0;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--vj-navy);
}

.vjobs__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.vjobs__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid var(--vj-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.72em;
  line-height: 1.6;
  color: var(--vj-navy);
}

.vjobs__pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vj-copper);
  flex: none;
}

.vjobs__pill--quiet { color: var(--vj-muted); }
.vjobs__pill--quiet::before { background: var(--vj-muted); }

.vjobs__apply {
  justify-self: end;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--vj-navy);
  color: #fff;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  transition: background-color 0.2s var(--vj-ease);
}

.vjobs__apply:hover { background: #0d1c3a; }
.vjobs__apply:focus-visible { outline: 2px solid var(--vj-navy); outline-offset: 3px; }

/* Below this the two columns inside a card fight for room, so the button
   drops under the title instead of shrinking it. Deliberately placed after
   the .vjobs__card rule above rather than up with the grid queries: both
   selectors have the same specificity, so source order decides, and higher
   up it silently lost. */
@container (max-width: 440px) {
  .vjobs__card { grid-template-columns: 1fr; }
  .vjobs__apply { justify-self: start; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 440px) {
    .vjobs__card { grid-template-columns: 1fr; }
    .vjobs__apply { justify-self: start; }
  }
}

.vjobs__empty {
  padding: clamp(24px, 3vw, 40px);
  background: var(--vj-panel);
  border-radius: var(--vj-radius);
}
.vjobs__empty h3 { margin: 0 0 10px; color: var(--vj-navy); }
.vjobs__empty p { margin: 0; color: var(--vj-muted); line-height: 1.6; }

/* --- popup --------------------------------------------------------------- */

.vjobs-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* Above Elementor's sticky header, which sits at 99999. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vjobs-modal[hidden] { display: none; }

.vjobs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 26, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.vjobs-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(9, 14, 26, 0.55);
}

.vjobs-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vj-muted, #6b7280);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.vjobs-modal__close:hover { background: #f1f2f4; }

.vjobs-modal__eyebrow {
  margin: 0 0 6px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a75a43;
}

.vjobs-modal__title {
  margin: 0 0 16px;
  font-size: 1.4em;
  line-height: 1.25;
  color: #132750;
}

.vjobs-modal__detail {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7ec;
  font-size: 0.9em;
  line-height: 1.65;
  color: #6b7280;
}
.vjobs-modal__detail:empty { display: none; }

/* --- form ---------------------------------------------------------------- */

.vjobs-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 560px) {
  .vjobs-form__row { grid-template-columns: 1fr; }
}

.vjobs-field { margin-bottom: 14px; }

.vjobs-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82em;
  font-weight: 600;
  color: #132750;
}

.vjobs-field input,
.vjobs-field select,
.vjobs-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.9em;
  color: #282726;
}

.vjobs-field textarea { resize: vertical; }

.vjobs-field input:focus,
.vjobs-field select:focus,
.vjobs-field textarea:focus {
  outline: 0;
  border-color: #4f8fc7;
  box-shadow: 0 0 0 3px rgba(79, 143, 199, 0.18);
}

.vjobs-field input[type="file"] { padding: 9px 11px; }

.vjobs-field__hint {
  margin: 6px 0 0;
  font-size: 0.75em;
  color: #6b7280;
}

.vjobs-field__error {
  margin: 6px 0 0;
  font-size: 0.75em;
  color: var(--vj-error, #b3261e);
}
.vjobs-field__error:empty { display: none; }

.vjobs-field.is-invalid input,
.vjobs-field.is-invalid select,
.vjobs-field.is-invalid textarea { border-color: #b3261e; }

/* Off-screen rather than display:none — a hidden input that is display:none
   is skipped by some autofill heuristics, which is exactly the behaviour a
   honeypot needs to avoid. */
.vjobs-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vjobs-form__status {
  margin: 4px 0 12px;
  font-size: 0.85em;
  line-height: 1.55;
}
.vjobs-form__status:empty { display: none; }
.vjobs-form__status.is-error { color: #b3261e; }
.vjobs-form__status.is-success { color: #1c6b3a; }

.vjobs-form__submit {
  width: 100%;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: #132750;
  color: #fff;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.vjobs-form__submit:hover { background: #0d1c3a; }
.vjobs-form__submit[disabled] { opacity: 0.6; cursor: default; }

/* The whole form is replaced by the status line on success, so nothing is
   left to submit twice. */
.vjobs-form.is-sent .vjobs-form__row,
.vjobs-form.is-sent .vjobs-field,
.vjobs-form.is-sent .vjobs-form__submit { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vjobs__apply,
  .vjobs-form__submit { transition: none; }
}