/* =========================================================
   CAREERS – JP INFRA DEVELOPERS
   ========================================================= */

/* ================= SECTION ================= */
.section-careers {
  background: var(--bg-light); /* Dynamic Background */
}
/* ================= INTRO ================= */
.careers-intro{
  max-width:520px;
  font-size:.9rem;
  color: var(--muted); /* Dynamic Text Color */
  margin-top:8px;
}

/* ================= GRID ================= */
.careers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:26px;
  margin-top:30px;
}

/* ================= CARD ================= */
.career-card{
  background: var(--card);
  border: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ================= MAIN ================= */
.career-card-main{
  padding:22px;
}

/* ================= HEADER ================= */
.career-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  color: var(--text); /* Pehle static default tha */
}

.career-title{
  font-size:1.05rem;
  font-weight:700;
}

.career-badge{
  padding:4px 10px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent);
  background:var(--card);
}

/* ================= META ================= */
.career-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0;
}

.career-chip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font-size:.75rem;
  background:var(--bg-light);
  color: var(--text); /* Chips ke text ko dynamic banaya */
}

/* Dots */
.career-dot{
  width:8px;
  height:8px;
}
.career-dot--loc{background:var(--info)}
.career-dot--type{background:var(--success)}
.career-dot--dept{background:var(--warning)}

/* ================= SHORT DESC ================= */
.career-short{
  font-size:.85rem;
  color: var(--muted); /* Static #555 replaced */
}

/* ================= FOOTER ================= */
.career-card-footer{
  background: var(--bg-light); /* Static #f8fafc replaced */
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  border-top: 1px solid var(--border); /* Ek subtle line add ki dynamic */
}

/* Info */
.career-info{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.career-small{
  font-size:.75rem;
}

.career-label{
  color: var(--muted); /* Static #777 replaced */
}

.career-value{
  font-weight:600;
  color: var(--text);
}

/* ================= ACTIONS ================= */
.career-actions{
  display:flex;
  gap:10px;
}

.career-btn-primary{
  padding:8px 14px;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  background: var(--brand); /* Dynamic Brand Color */
 color: var(--text-on-dark); /* Contrast fix: White on Dark Navy */
border:1px solid var(--accent);
}

.career-btn-primary:hover{
  background: var(--accent);
  color: var(--brand-dark);
}

.career-btn-secondary{
  padding:8px 14px;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--brand);
  color:var(--brand);
}

.career-btn-secondary:hover{
  background:var(--brand);
color: var(--text-on-dark); /* Hover par gray nahi white text */
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:768px){
  .careers-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .career-card-footer{
    flex-direction:column;
    align-items:flex-start;
  }

  .career-actions{
    width:100%;
  }

  .career-actions a{
    width:100%;
    text-align:center;
  }
}