/* ==========================================================================
   D11 · Careers  (pages/careers.html)
   ========================================================================== */

/* Shared on this page ----------------------------------------------------- */

.careers-title {
  font: 300 clamp(36px, 4.4vw, 56px)/1.04 var(--w-sans);
  letter-spacing: -.03em;
}

.careers-title--spaced {
  margin-bottom: 40px;
}

/* Hero -------------------------------------------------------------------- */

.careers-hero {
  padding-bottom: clamp(56px, 6vw, 88px);
}

.careers-hero__title {
  font-size: clamp(56px, 8vw, 128px);
}

.careers-hero__lead {
  max-width: 42ch;
  margin-top: 28px;
}

/* Photo placeholder: hatched duotone with a UV glow */
.careers-hero__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--w-line);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #141a20 0 10px, #10151a 10px 20px);
}

.careers-hero__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(139, 125, 255, .22), transparent 60%);
}

.careers-hero__photo span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font: 12px var(--w-mono);
  color: var(--w-text-2);
}

/* 01 · Open roles --------------------------------------------------------- */

.roles__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}

.team-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-filter button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--w-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--w-text);
  font: 14px var(--w-sans);
}

.team-filter button[aria-pressed="true"] {
  border-color: var(--w-action);
  background: var(--w-action);
  color: var(--w-on-action);
}

.roles {
  border-top: 1px solid var(--w-line-2);
}

.role {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items: center;
  gap: 8px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--w-line);
}

.role__main {
  grid-column: span 2;
}

.role__title {
  display: block;
  font: 400 20px var(--w-sans);
}

.role__meta {
  font: 14px var(--w-sans);
  color: var(--w-text-2);
}

.role__salary {
  font: 14px var(--w-mono);
  color: var(--w-text-2);
}

.role__apply {
  justify-self: start;
  font: 500 15px var(--w-sans);
}

.roles__note {
  margin-top: 14px;
}

/* 02 · Career path -------------------------------------------------------- */

.career-path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--w-line-2);
}

.career-path li {
  padding: 24px 24px 0 0;
}

.career-path__level {
  margin-bottom: 12px;
  font: 500 13px var(--w-mono);
  color: var(--w-text-2);
}

.career-path__level--top {
  color: var(--w-action);
}

.career-path__title {
  margin-bottom: 8px;
  font: 500 18px var(--w-sans);
}

.career-path__text {
  margin-bottom: 12px;
  font: 15px/1.5 var(--w-sans);
  color: var(--w-text-2);
}

.career-path__time {
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

/* 03 · The specifics ------------------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--w-line-2);
  border-radius: 8px;
  background: var(--w-line);
}

.facts > div {
  padding: 28px;
  background: var(--w-canvas);
}

.facts dt {
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

.facts__value {
  margin: 12px 0 8px;
  font: 300 32px var(--w-sans);
  letter-spacing: -.02em;
}

.facts__note {
  font: 14px/1.5 var(--w-sans);
  color: var(--w-text-2);
}

/* 04 · Apply + CTF -------------------------------------------------------- */

.apply {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}

.apply__card,
.ctf {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 8px;
}

.apply__card {
  border: 1px solid var(--w-line-2);
  background: var(--w-surface-1);
}

.apply__title {
  font: 400 28px var(--w-sans);
}

.apply__card .apply__title {
  margin-bottom: 8px;
}

.apply__text {
  margin-bottom: 24px;
  font: 15px/1.5 var(--w-sans);
  color: var(--w-text-2);
}

.apply__form {
  display: grid;
  gap: 16px;
}

.apply__done {
  font: 18px/1.5 var(--w-sans);
}

.ctf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px dashed var(--w-action-line);
}

.ctf__eyebrow {
  font: 12px var(--w-mono);
  letter-spacing: .08em;
  color: var(--w-action);
}

.ctf__text {
  font: 15px/1.6 var(--w-sans);
  color: var(--w-text-2);
}

.ctf__code {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--w-surface-1);
  font: 13px/1.7 var(--w-mono);
  color: var(--w-text-2);
}

.ctf__cta {
  align-self: flex-start;
  margin-top: auto;
}