/* ============================================================
   JOB POSTINGS MODULE  (prefix: jp-)

   Layout: light full-bleed section — centred heading and
   description, a right-aligned location filter dropdown, then
   a white rounded card that renders up to max_jobs clickable
   job rows sourced from Workable's embed API.

   The entire .jp-job-card anchor is the clickable target so
   keyboard and pointer users can activate any part of the row.
   The "Apply →" span is presentational (aria-hidden="true").
   ============================================================ */


/* ── Full-bleed wrap ────────────────────────────────────────
   Breaks out of the HubSpot content column to fill 100vw.
   ─────────────────────────────────────────────────────────── */
.jp-wrap {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-top: var(--jp-mar-top, 0);
  margin-bottom: var(--jp-mar-bottom, 0);
  background-color: var(--jp-section-bg, #f7f7f7);
  box-sizing: border-box;
  font-family: var(--jp-body-font);
}

/* Brand faces, pinned: Akzidenz-Grotesk on the heading, Brandon Grotesque on
   everything else. */
.jp-wrap {
  --jp-heading-font: 'akzidenz-grotesk', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --jp-body-font:    'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;
}

/* Screen-reader-only utility (clip-based, so the text is still rendered and
   still announced - display: none would hide it from AT too). */
.jp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rich text normalisation. HubSpot wraps field output in <p>/<h*>. Inline
   contexts collapse those and inherit type, so a stray <h2> an editor applied
   inside the badge cannot resize it. */
.jp-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.jp-rt > * + *::before {
  content: ' ';
}

/* Workable renders its raw markup into this hook. It is a data-fetch vehicle
   only - never visible, never focusable. */
.jp-embed-hook {
  display: none;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.jp-wrap *,
.jp-wrap *::before,
.jp-wrap *::after {
  box-sizing: border-box;
}

/* No underlines on any link within this module */
.jp-wrap a {
  text-decoration: none;
}


/* ── Inner container ────────────────────────────────────────
   Width-capped centred column.
   ─────────────────────────────────────────────────────────── */
.jp-inner {
  position: relative;
  width: min(var(--jp-max-w, 860px), calc(100% - var(--jp-pad-left, 24px) - var(--jp-pad-right, 24px)));
  margin: 0 auto;
  padding: var(--jp-pad-top, 80px) 0 var(--jp-pad-bottom, 80px);
}


/* ── Entrance animation ─────────────────────────────────────
   Fade-up on load. Respects prefers-reduced-motion.
   ─────────────────────────────────────────────────────────── */
@keyframes jp-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jp-inner {
}

@media (prefers-reduced-motion: reduce) {
  .jp-inner { animation: none !important; }

  .jp-job-card,
  .jp-view-all-btn,
  .jp-filter-select {
    transition: none;
  }
}


/* ── Header ─────────────────────────────────────────────────
   Centred text block above the filter and card.
   ─────────────────────────────────────────────────────────── */
.jp-header {
  text-align: center;
  margin-bottom: var(--jp-header-gap, 40px);
}


/* ── Badge pill ─────────────────────────────────────────────
   Optional label above the heading (e.g. "We're Hiring").
   ─────────────────────────────────────────────────────────── */
.jp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 20px;
  padding: 4px 16px;
  border: 1px solid rgba(59, 46, 120, 0.22);
  border-radius: 999px;
  background: rgba(59, 46, 120, 0.07);
  color: var(--jp-apply-color, #3b2e78);
  font-family: var(--jp-body-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ── Heading ────────────────────────────────────────────────
   clamp() scales fluidly between viewport widths.
   ─────────────────────────────────────────────────────────── */
.jp-heading {
  margin: 0 0 var(--jp-heading-gap, 18px);
  font-family: var(--jp-heading-font);
/* The clamp() arrives whole from module.html, with a floor that survives a
     200% zoom, so no per-breakpoint restatement is needed. */
  font-size: var(--jp-heading-size, 46px);
/* 700, matching .ss-title in services-section - the two sections sit on the
     same page and the headings have to read as one family. Akzidenz-Grotesk
     ships 300/400/700/900, so anything heavier rounds up to Black. */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--jp-heading, #0d0c1a);
}

/* Family locked, descendants included. Both heading halves are rich-text
   fields, and rich text pasted out of a word processor arrives carrying its own
   inline `font-family` on a <span> - which beat the inherited family and
   dropped the header out of Akzidenz-Grotesk into whatever the paste came from.
   An inline style attribute can only be beaten with !important. Size, weight
   and colour are untouched and still come from the fields. */
.jp-heading,
.jp-heading * {
  font-family: var(--jp-heading-font) !important;
}

.jp-heading__plain {
  color: var(--jp-heading, #0d0c1a);
}

/* Solid colour first, and it stays the computed `color` - only the paint is
   replaced below. In forced-colors mode, in print, or anywhere
   background-clip: text is not honoured, the accent words must still be
   readable rather than vanishing into transparent fill, and a contrast checker
   reading `color` sees a real value instead of `transparent`. */
.jp-heading__accent {
  display: inline;
  width: fit-content;
  color: var(--jp-accent, #2d2460);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .jp-heading__accent--grad {
    background-image: var(--jp-accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .jp-heading__accent--grad {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


/* ── Description ────────────────────────────────────────────
   max-width: 600px keeps line length comfortable.
   ─────────────────────────────────────────────────────────── */
.jp-description {
  margin: 0 auto;
  max-width: var(--jp-description-maxw, 600px);
  color: var(--jp-description, #514e66);
  font-family: var(--jp-body-font);
  font-size: var(--jp-description-size, 17px);
  font-weight: 400;
  line-height: 1.65;
}


/* ── Filter bar ─────────────────────────────────────────────
   Centred. JS hides the bar entirely when all jobs share
   the same location (filter would be useless).
   ─────────────────────────────────────────────────────────── */
.jp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* A real <label for>, so it is also the select's accessible name. */
.jp-filter-label {
  font-family: var(--jp-body-font);
  font-size: var(--jp-filter-size, 14px);
  font-weight: 500;
  color: var(--jp-filter-color, #0d0c1a);
/* normal, not nowrap: the label has to be allowed to wrap once text is
     scaled to 200% or the viewport is 320px wide. */
  white-space: normal;
}

.jp-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Funnel icon sits inside the left padding of the select */
.jp-filter-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  color: var(--jp-job-meta, #4a4661);
  pointer-events: none;
  z-index: 1;
}

/* Chevron replaces the browser's native select arrow */
.jp-filter-chevron {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  color: var(--jp-job-meta, #4a4661);
  pointer-events: none;
  z-index: 1;
}

.jp-filter-select {
  min-width: 200px;
/* A comfortable target on its own: the padding alone leaves it a couple of
     pixels short once the type can scale down. */
  min-height: 44px;
  padding: 10px 38px 10px 36px;
/* The fill is 1.09:1 against the section, so this border is the control's only
     visible boundary and has to clear 3:1 on its own. The field default is
     #6f6a90, at 4.2:1 - #8f8ab2 clears 3:1 by 0.26 and loses it the moment the
     card background moves a shade. */
  border: 1px solid var(--jp-filter-border, #6f6a90);
  border-radius: 8px;
  background-color: var(--jp-filter-bg, #ffffff);
  color: var(--jp-filter-color, #0d0c1a);
  font-family: var(--jp-body-font);
  font-size: var(--jp-filter-size, 14px);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The outline is left alone and the border change is decoration on top of it:
   a 12%-opacity box-shadow on its own is nowhere near the 3:1 an indicator
   needs. */
.jp-filter-select:focus-visible {
  outline: 3px solid var(--jp-apply-color, #3b2e78);
  outline-offset: 2px;
}

.jp-filter-select:focus {
  border-color: var(--jp-apply-color, #3b2e78);
  box-shadow: 0 0 0 3px rgba(59, 46, 120, 0.12);
}


/* ── Jobs card container ────────────────────────────────────
   White rounded container grouping all visible job rows.
   overflow: hidden clips the last row's bottom border.
   ─────────────────────────────────────────────────────────── */
.jp-card {
  background: var(--jp-card-bg, #ffffff);
  border: 1px solid var(--jp-card-border, #e8e6f0);
  border-radius: var(--jp-card-radius, 16px);
  overflow: hidden;
}

/* The list is a <ul> now, so the UA list typography has to come off before the
   rows take over. role="list" is stated in module.html because list-style: none
   makes Safari/VoiceOver drop list semantics. */
.jp-jobs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jp-job-item {
  display: block;
}


/* ── Jobs list ──────────────────────────────────────────────
   Direct parent of the job card anchors and the loading skeleton.
   ─────────────────────────────────────────────────────────── */
.jp-jobs-list {
  /* Container — the card provides background and border-radius */
}


/* ── Individual job card ────────────────────────────────────
   Full-width anchor row. display: flex separates the left
   info block from the right "Apply →" indicator.
   Border-bottom divides rows; :last-child removes it.
   ─────────────────────────────────────────────────────────── */
.jp-job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--jp-card-border, #e8e6f0);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.jp-job-card:last-child {
  border-bottom: none;
}

.jp-job-card:hover {
  background-color: rgba(59, 46, 120, 0.035);
}

.jp-job-card:focus-visible {
  outline: 3px solid var(--jp-apply-color, #3b2e78);
  outline-offset: -3px;
}

/* Type lock on every state. theme-overrides.css declares
   `a:hover, a:focus { <anchor font block> }`, which includes font-family,
   font-size and font-weight. At (0,1,1) that outranks a bare class, so without
   this the row copy changed weight and reflowed the moment the pointer touched
   it. Listing the states is (0,2,0), which wins without !important. */
.jp-job-card:hover,
.jp-job-card:focus,
.jp-job-card:focus-visible,
.jp-job-card:active,
.jp-job-card:visited {
  font-family: var(--jp-body-font);
  font-size: var(--jp-job-meta-size, 13px);
  font-weight: 400;
  color: inherit;
}

/* Clears the fixed header when Tab scrolls a row into view. */
.jp-job-card {
  scroll-margin-top: 96px;
}


/* ── Job info — left side ───────────────────────────────────
   flex: 1 1 auto fills available width.
   min-width: 0 prevents long titles overflowing the row.
   ─────────────────────────────────────────────────────────── */
.jp-job-info {
  flex: 1 1 auto;
  min-width: 0;
}


/* ── Job title ──────────────────────────────────────────────
   Bold, dark. Truncates with ellipsis on narrow viewports.
   ─────────────────────────────────────────────────────────── */
.jp-job-title {
  margin: 0 0 8px;
  font-family: var(--jp-heading-font);
  font-size: var(--jp-job-title-size, 16px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--jp-job-title, #0d0c1a);
/* Wraps rather than truncating: `white-space: nowrap` with
     `text-overflow: ellipsis` cuts long titles off at every width above 560px,
     and truncated text cannot be recovered by zooming or by overriding text
     spacing. */
  overflow-wrap: break-word;
}


/* ── Job meta row ───────────────────────────────────────────
   Flex row of chips: department, location, employment type.
   ─────────────────────────────────────────────────────────── */
.jp-job-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}


/* ── Meta item chips ────────────────────────────────────────
   Each chip is inline-flex so the icon and text align vertically.
   ─────────────────────────────────────────────────────────── */
.jp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--jp-body-font);
  font-size: var(--jp-job-meta-size, 13px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--jp-job-meta, #4a4661);
}

.jp-meta-item svg {
  flex-shrink: 0;
  color: var(--jp-job-meta, #4a4661);
}

/* Employment type — no icon, plain text with left separator */
.jp-meta-type {
  padding-left: 14px;
  border-left: 1px solid var(--jp-card-border, #e8e6f0);
}


/* ── Apply indicator — right side ───────────────────────────
   Presentational "Apply →" text + arrow.
   aria-hidden set in JS. gap transition = arrow slides right.
   ─────────────────────────────────────────────────────────── */
.jp-job-apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--jp-body-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--jp-apply-color, #3b2e78);
  white-space: nowrap;
  transition: gap 0.2s ease;
}

.jp-job-apply svg {
  color: var(--jp-apply-color, #3b2e78);
}

.jp-job-card:hover .jp-job-apply {
  gap: 10px;
}


/* ── Loading skeleton ───────────────────────────────────────
   Four animated shimmer rows shown while Workable fetches jobs.
   ─────────────────────────────────────────────────────────── */
@keyframes jp-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.jp-skeleton-wrap {
  display: block;
}

.jp-skeleton {
  display: block;
  height: 74px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.07) 50%,
    rgba(0, 0, 0, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: jp-shimmer 1.6s ease-in-out 8;
  border-bottom: 1px solid var(--jp-card-border, #e8e6f0);
}

.jp-skeleton:last-child {
  border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
  .jp-skeleton {
    animation: none;
    background: rgba(0, 0, 0, 0.04);
  }
}


/* ── No-jobs / error / placeholder messages ─────────────────
   Centred muted text shown when jobs are unavailable.
   ─────────────────────────────────────────────────────────── */
.jp-no-jobs,
.jp-placeholder {
  display: block;
  padding: 36px 28px;
  margin: 0;
  text-align: center;
  color: var(--jp-job-meta, #4a4661);
  font-family: var(--jp-body-font);
  font-size: 15px;
  line-height: 1.55;
}

.jp-no-jobs a,
.jp-placeholder a {
  color: var(--jp-apply-color, #3b2e78);
  text-decoration: underline;
}

.jp-no-jobs a:hover,
.jp-placeholder a:hover {
  text-decoration: none;
}


/* ── View All Jobs button ────────────────────────────────────
   Outlined pill button centred below the card.
   On hover fills with button background colour.
   Works as both <a> and <button> element.
   ─────────────────────────────────────────────────────────── */
.jp-view-all-wrap {
  margin-top: 28px;
  text-align: center;
}

/* Type and colour lock on every state. theme-overrides.css paints every
   <button> navy on hover and focus and restates the whole anchor font block,
   both at (0,1,1). Listing the states explicitly here is (0,2,0), which wins
   outright, so no declaration needs !important and the button's own hover fill
   takes effect. */
.jp-view-all-btn,
.jp-view-all-btn:hover,
.jp-view-all-btn:focus,
.jp-view-all-btn:focus-visible,
.jp-view-all-btn:active,
.jp-view-all-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
/* A comfortable target on its own rather than relying on the padding. */
  min-height: 44px;
  padding: 13px 32px;
  border: 2px solid var(--jp-button-bg, #3b2e78);
  border-radius: 999px;
  font-family: var(--jp-body-font);
  font-size: var(--jp-button-size, 15px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
}

.jp-view-all-btn,
.jp-view-all-btn:visited {
  background: transparent;
  color: var(--jp-button-bg, #3b2e78);
}

.jp-view-all-btn:hover,
.jp-view-all-btn:focus-visible {
  background: var(--jp-button-hover-bg, #3b2e78);
  color: var(--jp-button-hover-text, #ffffff);
  border-color: var(--jp-button-hover-bg, #3b2e78);
}

.jp-view-all-btn svg {
  color: currentColor;
  flex-shrink: 0;
}

.jp-view-all-btn:focus-visible {
  outline: 3px solid var(--jp-button-bg, #3b2e78);
  outline-offset: 3px;
}


/* ─────────────────────────────────────────
   TABLET  561px – 860px
───────────────────────────────────────── */
@media (max-width: 860px) {
  .jp-inner {
    width: min(100%, calc(100% - 40px));
  }

  .jp-job-card {
    padding: 18px 22px;
    gap: 16px;
  }
}


/* ─────────────────────────────────────────
   MOBILE  560px and below
   Full-bleed, tighter spacing. "Apply →"
   is hidden — the whole card row is the link.
   Title wraps instead of truncating.
───────────────────────────────────────── */
@media (max-width: 560px) {
  .jp-inner {
    width: 100%;
    padding: 56px 20px 48px;
  }

  .jp-header {
    margin-bottom: 28px;
  }

  .jp-filter-bar {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }

  .jp-filter-wrap {
    width: 100%;
  }

  .jp-filter-select {
    width: 100%;
    min-width: 0;
  }

  .jp-card {
    border-radius: 12px;
  }

  .jp-job-card {
    padding: 16px 18px;
    gap: 12px;
  }

  /* Hide "Apply →" — the full card row is still the link */
  .jp-job-apply {
    display: none;
  }

  .jp-skeleton {
    height: 80px;
  }

  .jp-view-all-btn {
    width: 100%;
    justify-content: center;
  }
}