/* =====================================================================
   HIRE — /hire and /es/hire
   A casting sheet, not a careers page. The roles are an editorial
   numbered list rather than a card grid: one row per role, the index
   set large in gold, the title at headline scale, and the apply button
   parked at the end of the row. Rows are separated by hairlines and
   lift on hover, so five roles scan in one pass on a phone.

   Depends on notfit-v2.css tokens (--nfx-gold, --nfx-ink, --nfx-line…)
   and inner.css primitives (.nfx-ihero, .nfx-isection, .nfx-ihead).
   Loaded after both.
   ===================================================================== */

/* ---------- Page rhythm ---------------------------------------------
   inner.css was built for pages with a lot of prose, so it pads every
   section 104px top AND bottom and centres the hero in a 52svh box. On a
   page this short that produced 208px of black between the intro line and
   the first heading, and a hero 468px tall holding 110px of text.

   These are the same numbers the homepage settled on, scoped to this page
   by the body class so the prose pages are untouched. Loaded after
   inner.css, and every selector is one class more specific than the rule
   it replaces.
   -------------------------------------------------------------------- */
.nfx-hire-page {
  --nfx-hire-sec-y: clamp(34px, 3.6vw, 54px);
}

/* The hero holds two lines of text and one photograph, and the photograph
   is what decides the height. inner.css frames it for a 52svh box; once
   this hero was cut down to fit the text, the cover-crop left a floating
   head sliced off at the neck. This is the shortest band that still holds
   his whole head, shoulders and the top of his chest with headroom above
   the crown.

   The text sits at the BASE of that band rather than centred in it. Centred,
   the extra height the photo needs turned into 119px of empty black between
   the intro line and the first heading, which is the gap this page was
   pulled apart for in the first place. Bottom-aligned, the height goes to
   the photograph and the headline hands straight over to the roles. */
.nfx-hire-page .nfx-ihero {
  min-height: clamp(300px, 28vw, 400px);
  align-items: flex-end;
  padding: clamp(6.6rem, 12vh, 8rem) 0 clamp(0.9rem, 2vh, 1.6rem);
}

/* Crop from nearer the top so the crown is never clipped, and lift the
   opacity: at inner.css's 0.26 he was a ghost rather than a photograph. */
.nfx-hire-page .nfx-ihero__athlete {
  object-position: 50% 6%;
  opacity: 0.36;
}

.nfx-hire-page .nfx-isection {
  padding: var(--nfx-hire-sec-y) 0;
}

/* No kicker chip above these headings any more, so the heading does not
   need the space that sat under one. */
.nfx-hire-page .nfx-ihead {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
}

.nfx-hire-page .nfx-ihead__title {
  margin: 0 0 0.5rem;
}

/* ---------- Role list ------------------------------------------------ */
.nfx-hire-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  border-top: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.09));
}

.nfx-hire-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(1.15rem, 2.3vw, 1.6rem) clamp(0.6rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.09));
  transition: background 320ms var(--nfx-ease, ease), padding-left 320ms var(--nfx-ease, ease);
}

/* The gold edge is the hover signal. It grows from the top so the row
   feels picked up rather than merely tinted. */
.nfx-hire-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--nfx-gold, #d1bb9a);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 320ms var(--nfx-ease, ease);
}

.nfx-hire-row:hover,
.nfx-hire-row:focus-within {
  background: rgba(255, 255, 255, 0.022);
  padding-left: clamp(1.1rem, 2.6vw, 2rem);
}

.nfx-hire-row:hover::before,
.nfx-hire-row:focus-within::before {
  transform: scaleY(1);
}

/* ---------- Index ---------------------------------------------------- */
.nfx-hire-row__num {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(209, 187, 154, 0.34);
  font-variant-numeric: tabular-nums;
  transition: color 320ms var(--nfx-ease, ease);
  min-width: 2ch;
}

.nfx-hire-row:hover .nfx-hire-row__num,
.nfx-hire-row:focus-within .nfx-hire-row__num {
  color: var(--nfx-gold, #d1bb9a);
}

/* ---------- Copy ----------------------------------------------------- */
.nfx-hire-row__body {
  min-width: 0;
}

.nfx-hire-row__title {
  font-weight: 700;
  font-size: clamp(1.18rem, 2.7vw, 1.72rem);
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 0.42rem;
  text-wrap: balance;
}

.nfx-hire-row__desc {
  color: var(--nfx-muted, rgba(255, 255, 255, 0.64));
  font-size: clamp(0.94rem, 1.6vw, 1.02rem);
  line-height: 1.6;
  margin: 0;
  max-width: 46em;
}

/* Small tag under the title for the one role that needs a named tool. */
.nfx-hire-row__tag {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  background: rgba(209, 187, 154, 0.09);
  border: 1px solid rgba(209, 187, 154, 0.26);
  color: var(--nfx-gold, #d1bb9a);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- Apply button --------------------------------------------- */
.nfx-hire-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: #231a09 !important;
  border: 0;
  border-radius: 13px;
  padding: 13px 30px;
  font-family: "Space Grotesk", inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, #e7d2ad 0%, #d1bb9a 100%);
  box-shadow:
    0 14px 34px -16px rgba(209, 187, 154, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    transform 180ms var(--nfx-ease, ease),
    box-shadow 180ms var(--nfx-ease, ease),
    filter 180ms ease;
}

.nfx-hire-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 22px 48px -18px rgba(209, 187, 154, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nfx-hire-cta:active {
  transform: translateY(0);
}

.nfx-hire-cta:focus-visible {
  outline: 2px solid var(--nfx-gold-bright, #e7d2ad);
  outline-offset: 3px;
}

/* Shown instead of the button when a role has no form link yet, so a
   missing URL can never ship as a dead button. */
.nfx-hire-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  padding: 13px 26px;
  border-radius: 13px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ---------- Phone: the row stacks, the button spans ------------------ */
@media (max-width: 720px) {
  .nfx-hire-row {
    grid-template-columns: auto 1fr;
    row-gap: 1.1rem;
  }
  .nfx-hire-row__num {
    font-size: 1.3rem;
    align-self: start;
    padding-top: 0.2rem;
  }
  /* Button drops to its own full-width line under the copy. */
  .nfx-hire-cta,
  .nfx-hire-soon {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nfx-hire-row,
  .nfx-hire-row::before,
  .nfx-hire-row__num,
  .nfx-hire-cta {
    transition: none;
  }
  .nfx-hire-row:hover { padding-left: clamp(0.6rem, 2vw, 1.4rem); }
}