/* Public careers page (GET /). Loaded AFTER app.css + page-public.css. It does
   NOT reuse .pub-wrap / .pub-brand (those are the narrow single-column candidate
   layout); the careers page is a wide job grid with its own header.

   Design: Job-Board pattern — Flat + Minimal, the employer's brand colour as the
   single accent, generous spacing rhythm, a scannable card grid. Brand vars come
   from _brand_theme.html and fall back to the default palette when unset. */

.careers-body {
  background: var(--bg);
  color: var(--ink);
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.careers-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* ⚠️ Same container width + padding as the app nav (.app-nav__inner reads
   --page-max + --sp-6), so the logo sits at the exact same left edge on every
   page and does not jump when navigating between the careers page and the
   workspace. */
.careers-nav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.careers-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.careers-brand__logo {
  display: block;
  height: var(--tenant-logo-h, 40px);
  max-width: 220px;
  object-fit: contain;
}
.careers-brand__name {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Welcome band ─────────────────────────────────────────────────────────── */
/* Full-bleed tinted panel above the roles. A soft brand-tinted wash (never the
   saturated brand colour as a full background — that reads as an alert), with
   the content constrained to --page-max so it lines up with the nav + grid. */
.careers-welcome {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary, #0d9488) 8%, var(--surface, #fff)),
      var(--bg, #f8fafc));
  border-bottom: 1px solid var(--border);
}
.careers-welcome__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-6) var(--sp-10);
}
.careers-welcome__eyebrow {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}
.careers-welcome__title {
  max-width: 18ch;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.careers-welcome__sub {
  max-width: 60ch;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}
.careers-welcome__cta { margin-top: var(--sp-6); }
.careers-welcome__cta .btn svg { margin-left: 2px; }

/* ── Page container ───────────────────────────────────────────────────────── */
/* Same width as the nav inner (--page-max), so the roles line up under the logo
   and welcome band. The band supplies the top spacing, so this only pads the
   sides + bottom. */
.careers-main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
}

/* ── List header ──────────────────────────────────────────────────────────── */
.careers-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.careers-listhead__title {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.careers-listhead__count {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
}

/* ── Jobs grid ────────────────────────────────────────────────────────────── */
/* Fixed tiers, not auto-fill: on a wide monitor auto-fill fits an extra thin
   column and shrinks every card, leaving dead margins (the dashboard board grid
   learned this). */
.jobgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.jobcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* Flat: no resting shadow. A crisp border + a colour/lift on hover reads
     cleaner than a drop shadow on every card. */
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.jobcard:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.jobcard:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--primary-soft, rgba(13,148,136,0.25)));
}

.jobcard__top { margin-bottom: var(--sp-3); }
.jobcard__title {
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.jobcard__company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-3);
}
.jobcard__company svg { color: var(--ink-3); opacity: 0.8; flex: none; }

/* Meta row: location, employment type — the facts a candidate scans before
   opening a role. A flex-wrap list, each item icon + label. */
.jobcard__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.jobcard__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--ink-2, #334155);
}
.jobcard__meta-item svg { color: var(--primary); opacity: 0.9; flex: none; }

/* CTA pinned to the bottom so cards line up regardless of title length. */
.jobcard__cta {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--primary);
}
.jobcard__cta svg { transition: transform 0.18s ease; }
.jobcard:hover .jobcard__cta svg { transform: translateX(4px); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.careers-empty {
  max-width: 480px;
  margin: var(--sp-8) auto var(--sp-12);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--ink-3);
}
.careers-empty svg { color: var(--ink-3); opacity: 0.6; }
.careers-empty h2 { font-size: var(--t-lg); color: var(--ink); margin: var(--sp-1) 0 0; }
.careers-empty p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }

/* ── Responsive tiers ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .jobgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .careers-nav__inner { padding: var(--sp-3) var(--sp-4); }
  .careers-welcome__inner { padding: var(--sp-8) var(--sp-4) var(--sp-6); }
  .careers-main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }
  .jobgrid { grid-template-columns: 1fr; }
}

/* Respect reduced motion — no lift/slide for users who ask for less. */
@media (prefers-reduced-motion: reduce) {
  .jobcard, .jobcard__cta svg { transition: none; }
  .jobcard:hover { transform: none; }
  .jobcard:hover .jobcard__cta svg { transform: none; }
}