/* =========================
SECTION: Career Page Variables
========================= */
.career-page-main {
  --career-bg: #f6f7fb;
  --career-surface: #ffffff;
  --career-muted: #eef1f6;
  --career-text: #20253a;
  --career-subtext: #5f667d;
  --career-brand: #e5202f;
  --career-brand-dark: #bd1220;
  --career-radius: 12px;
  --career-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  background: var(--career-bg);
  color: var(--career-text);
}

/* =========================
SECTION: Shared Layout
========================= */
.career-container {
  width: min(1140px, 92%);
  margin-inline: auto;
}

.career-section {
  padding: 74px 0;
}

.career-section--light {
  background: var(--career-surface);
}

.career-section--muted {
  background: var(--career-muted);
}

.career-section__title {
  margin: 0 0 14px;
  font: 600 clamp(1.7rem, 2.6vw, 2.95rem) / 1.15 "Geist", sans-serif;
  color: var(--career-text);
  letter-spacing: 0;
}

.career-section__subtitle {
  margin: 0 0 26px;
  color: var(--career-subtext);
}

.career-section p {
  margin: 0 0 12px;
  color: var(--career-subtext);
  font: 400 1rem/1.7 "Geist", sans-serif;
}

/* =========================
SECTION: Hero
========================= */
.career-hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.career-hero__media,
.career-hero__media img,
.career-hero__overlay {
  position: absolute;
  inset: 0;
}

.career-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-hero__overlay {
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.35) 22%, rgba(6, 10, 20, 0.83) 100%);
}

.career-hero__content {
  position: relative;
  z-index: 2;
  padding: 96px 0 72px;
}

.career-hero__content h1 {
  margin: 0 0 12px;
  color: #ffffff;
  font: 600 clamp(2rem, 3.3vw, 3.4rem) / 1.1 "Geist", sans-serif;
}

.career-hero__content p {
  max-width: 760px;
  color: #e4e9f6;
}

/* =========================
SECTION: Split
========================= */
.career-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.career-split__image img {
  width: 100%;
  max-height: 420px;
  border-radius: var(--career-radius);
  box-shadow: var(--career-shadow);
  object-fit: cover;
}

/* =========================
SECTION: Card Grid
========================= */
.career-grid {
  display: grid;
  gap: 16px;
}

.career-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.career-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.career-card {
  padding: 22px;
  border: 1px solid #dde3ef;
  border-radius: 10px;
  background: var(--career-surface);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.career-card h3 {
  margin: 0 0 10px;
  color: var(--career-text);
  font: 600 1.08rem/1.3 "Geist", sans-serif;
}

.career-card p {
  margin: 0;
}

.career-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(16, 24, 40, 0.12);
}

/* =========================
SECTION: Join Form
========================= */
.career-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: start;
}

.career-form {
  background: #f5f6f8;
  border: 1px solid #e0e5ef;
  border-radius: var(--career-radius);
  padding: 20px;
}

.career-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.career-form input,
.career-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #d3d9e6;
  font: 400 0.95rem/1.4 "Geist", sans-serif;
}

.career-form input:focus,
.career-form textarea:focus {
  border-color: var(--career-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(229, 32, 47, 0.13);
}

.career-btn {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--career-brand);
  color: #ffffff;
  font: 600 0.95rem/1 "Geist", sans-serif;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.24s ease, transform 0.24s ease;
}

.career-btn:hover {
  background: var(--career-brand-dark);
  transform: translateY(-1px);
}

/* =========================
SECTION: Reveal Animations
========================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
SECTION: Tablet
========================= */
@media (max-width: 991px) {
  .career-grid--3,
  .career-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-split,
  .career-join {
    grid-template-columns: 1fr;
  }
}

/* =========================
SECTION: Mobile
IMPORTANT: Title first, then image, then content
========================= */
@media (max-width: 640px) {
  .career-section {
    padding: 56px 0;
  }

  .career-hero {
    min-height: 58vh;
  }

  .career-hero__content {
    padding: 78px 0 52px;
  }

  .career-grid--3,
  .career-grid--4,
  .career-form__grid {
    grid-template-columns: 1fr;
  }

  .career-split__image {
    order: 2;
  }

  .career-split__content {
    order: 3;
  }
}