/* ==========================================================================
   ROLES  -  the three job cards (careers.html) and the job detail pages
   (role-*.html), plus the application form.

   Loaded only by careers.html and the three role pages. It is a separate
   file rather than more of sections-2.css because nothing else on the site
   uses any of it, and because this project has twice been bitten by a single
   stylesheet growing past what the dev server would serve.

   The application form deliberately REUSES .cf from sections-2.css - the
   same component as the contact form. Two forms on one site that look
   different is the tell that nobody owns the design; the only additions here
   are the pieces a job application needs and a contact form does not:
   per-field error text, a fieldset, and the file/link note.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .jcard  -  the three open roles, as cards
   Was a braced vertical list where every row linked to contact.html, so all
   three "roles" led to the same generic form and the page could not say what
   any individual job actually was. Each card now opens its own page.
   -------------------------------------------------------------------------- */
.jcard__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.85rem + 0.8vw, 1.6rem);
}
.jcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: linear-gradient(180deg, rgba(156, 120, 72, 0.05), transparent 60%), var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  color: inherit;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}
/* the whole card is the link, so the hover state belongs to the <a> itself */
.jcard:hover,
.jcard:focus-visible {
  border-color: var(--border-gold-strong);
  transform: translateY(-3px);
}
.jcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.jcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.jcard__tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.jcard__name {
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--white);
  text-wrap: balance;
}
.jcard__meta {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vein);
}
.jcard__sep { opacity: 0.5; }
.jcard__desc {
  margin-top: 1rem;
  color: var(--vein);
  font-size: var(--text-sm);
  line-height: 1.65;
  text-wrap: pretty;
}
/* margin-top:auto pins the call to action to the bottom of every card, so
   three cards with different description lengths still line up */
.jcard__go {
  margin-top: auto;
  padding-top: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold-light);
}
.jcard__go svg { transition: transform var(--dur) var(--ease-out); }
.jcard:hover .jcard__go svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .jcard__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   .rle  -  the job detail page
   -------------------------------------------------------------------------- */
.rle__hero { padding-top: clamp(6.5rem, 5rem + 7vw, 9.5rem); }
.rle__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--vein);
  transition: color var(--dur) var(--ease-out);
}
.rle__back:hover { color: var(--gold-light); }
.rle__back svg { transition: transform var(--dur) var(--ease-out); }
.rle__back:hover svg { transform: translateX(-3px); }
.rle__title {
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--white);
  text-wrap: balance;
  max-width: 20ch;
}
.rle__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
}
.rle__chip {
  padding: 0.4rem 0.85rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(156, 120, 72, 0.07);
}
.rle__lede {
  margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
  max-width: 46rem;
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.62;
  text-wrap: pretty;
}

/* body: content column + a sticky summary rail */
.rle__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: start;
}
.rle__block + .rle__block { margin-top: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); }
.rle__h {
  font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--white);
  margin-bottom: clamp(0.9rem, 0.8rem + 0.4vw, 1.25rem);
}
.rle__p {
  color: var(--vein);
  line-height: 1.7;
  max-width: 44rem;
  text-wrap: pretty;
}
.rle__p + .rle__p { margin-top: 0.9rem; }
.rle__list { list-style: none; }
.rle__list li {
  position: relative;
  padding-left: 1.6rem;
  padding-block: 0.5rem;
  color: var(--vein);
  line-height: 1.65;
  max-width: 44rem;
}
.rle__list li + li { border-top: 1px solid var(--border-neutral); }
/* a hairline tick rather than a bullet glyph: the site uses no bullets */
.rle__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.28em;
  width: 0.75rem;
  height: 1px;
  background: var(--gold);
}
/* the one place the page says something unflattering. It gets a rule and a
   colour so it reads as deliberate rather than as a mistake in the copy. */
.rle__honest {
  margin-top: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  padding: clamp(1.15rem, 1rem + 0.6vw, 1.6rem) clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-left: 2px solid var(--gold);
  background: rgba(156, 120, 72, 0.055);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.rle__honest p { color: var(--ink); line-height: 1.68; text-wrap: pretty; }
.rle__honest .rle__honest-k {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.rle__rail {
  position: sticky;
  top: clamp(5.5rem, 5rem + 2vw, 7rem);
  padding: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.rle__rail-h {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.rle__facts { display: grid; gap: 0.7rem; }
.rle__fact {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.5fr) 1fr;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-neutral);
  font-size: var(--text-sm);
}
.rle__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.rle__fact dt { color: var(--vein); }
.rle__fact dd { color: var(--ink); font-weight: 500; }
.rle__rail-act { margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.rle__rail-act .btn { width: 100%; }
.rle__rail-note {
  margin-top: 0.85rem;
  font-size: var(--text-xs);
  color: var(--vein);
  line-height: 1.55;
}
@media (max-width: 940px) {
  .rle__grid { grid-template-columns: 1fr; }
  .rle__rail { position: static; }
}

/* --------------------------------------------------------------------------
   Application form additions on top of .cf
   -------------------------------------------------------------------------- */
.apply { scroll-margin-top: 5rem; }

/* The form is centred on the page rather than ranged left. Only the BLOCK is
   centred - the labels and inputs inside stay left-aligned, because centred
   label text over a left-aligned input reads as a mistake and gives the eye
   no consistent edge to run down while filling the form in. */
.apply .cf { margin-inline: auto; }
.apply .apply__legend { margin-inline: auto; text-align: center; }

/* THE GRID HAS TO LIVE ON THE FIELDSET, NOT ON THE FORM.
   .cf sets two columns, but the form's only child is this <fieldset> - so
   the columns applied to the fieldset and every field inside it stacked into
   a single half-width column with the other half left empty. The fieldset
   spans the form's tracks and becomes the real grid; the fields are its
   children, so .cf__row--full still resolves against these columns. */
.apply__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldsets default to min-content; without this a long
                   placeholder can push the columns wider than the page */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
}
.apply__legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--vein);
  line-height: 1.6;
  max-width: 42rem;
}
@media (max-width: 620px) {
  .apply__fieldset { grid-template-columns: 1fr; }
}
.apply__legend b { color: var(--ink); font-weight: 600; }

/* per-field error. Empty by default and zero-height, so a clean form has no
   reserved gaps; it is never display:none because it is referenced by
   aria-describedby and must stay in the accessibility tree. */
.cf__err {
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #e0785f;
}
.cf__err:not(:empty) { margin-top: 0.45rem; }
.cf__in[aria-invalid="true"] {
  border-color: #b4523c;
  background: rgba(180, 82, 60, 0.06);
}
.cf__in[aria-invalid="true"]:focus {
  border-color: #e0785f;
  box-shadow: 0 0 0 3px rgba(224, 120, 95, 0.18);
}
select.cf__in {
  appearance: none;
  /* the caret is an inline SVG data URI so the control needs no extra node
     and no icon font; it is duplicated per-theme nowhere because the site is
     dark-only */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%239c7848' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.cf__in option { background: var(--obsidian); color: var(--white); }

/* success panel: replaces the form once the handover has happened */
.apply__done {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border: 1px solid var(--border-gold-strong);
  border-radius: var(--radius-md);
  background: rgba(156, 120, 72, 0.06);
  max-width: 46rem;
}
.apply__done-h {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.apply__done p { color: var(--vein); line-height: 1.65; }
.apply__done p + p { margin-top: 0.7rem; }
.apply__done a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }