/* careers.html — page-specific rules only. Shared layout/type/form
   primitives (.container, .section, .section-heading, .form-field,
   .btn.btn-primary, .heading-h3, .body-l/.body-m, .overline) come from
   style.css and are reused as-is, not redefined here. */

/* The #careers section carries the page's single <h1> ("Work with
   Enteco") inside a .section-heading, but style.css only sizes
   `.section-heading h2` — mirror that same look for our h1 so it reads
   identically to every other section heading on the site. */
.careers-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  color: var(--text-primary);
}

/* Alternating section background for #partners, matching the pattern
   used elsewhere on the site (e.g. industry-page.css's --tint variant). */
.careers-section--tint { background: var(--bg-ground-alt); }

/* ---- Copy + form, side by side ---- */
.careers-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 40px;
}
.careers-copy { display: flex; flex-direction: column; gap: 20px; }
.careers-copy .body-l { color: var(--text-primary); }
.careers-copy .body-m { color: var(--text-secondary); }

.careers-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 8px;
}
.careers-col h3 { margin-bottom: 12px; }

.careers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.careers-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}
.careers-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 2px;
  background: var(--brand-copper);
}

/* ---- Form card ---- */
.careers-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 32px;
}
.careers-form .btn { align-self: flex-start; margin-top: 4px; }

.careers-form__caption {
  font-size: 13px;
  line-height: 19px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---- Yes/No radio groups — same visual language as .form-field
   (label styling, spacing) but built on <fieldset>/<legend> for
   accessibility since a single label can't own two radio inputs. ---- */
.careers-radio-field {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.careers-radio-field legend {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24px;
  color: var(--text-primary);
  padding: 0;
}
.careers-radio-options {
  display: flex;
  gap: 24px;
}
.careers-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  cursor: pointer;
}
.careers-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-copper);
  cursor: pointer;
}

@media (max-width: 900px) {
  .careers-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .careers-cols { grid-template-columns: 1fr; gap: 24px; }
  .careers-form { padding: 24px; }
  .careers-radio-options { gap: 20px; }
}