/* =========================

   CAREER PAGE (SCOPED)

========================= */

.career-page {

  --bg: #f8f9fa;

  --surface: #ffffff;

  --text: #1a2233;

  --muted: #5d687d;



  --primary: #2d1e64;

  --primary-dark: #1f1547;

  --secondary: #eb780f;



  --border: #e0e0e0;

  --accent: rgba(235, 120, 15, 0.1);



  --success: #e9f9ef;

  --success-text: #1a7f46;



  --shadow: 0 10px 30px rgba(0,0,0,0.05);

  --radius: 14px;

  --radius-sm: 10px;

  --max: 1200px;



  background: var(--bg);

  font-family: 'Segoe UI', sans-serif;

}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--secondary) !important;
    border-color: var(--bs-btn-active-border-color);
}

/* RESET */

.career-page * { box-sizing: border-box; }

.career-page img { max-width: 100%; display: block; }



/* CONTAINER */

.career-page .container {

  width: min(calc(100% - 32px), var(--max));

  margin: 0 auto;

}



/* SECTION */

.career-page .section { padding: 80px 0; }

.career-page .section-sm { 

  padding: 60px 0; 

  background-color: #ffffff;

}



/* TYPOGRAPHY */

.career-page h1,

.career-page h2,

.career-page h3 {

  margin-bottom: 16px;

  color: var(--primary);

}



.career-page p { color: var(--muted) }





.career-page .apply-block h2{

  color: #ffffff;

}



/* EYEBROW */

.career-page .eyebrow {

  padding: 6px 14px;

  border-radius: 50px;

  background: var(--accent);

  color: var(--secondary);

  font-size: 12px;

  font-weight: 700;

}



/* HERO */

.career-page .hero {

  padding: 100px 0 60px;

  background: #ffffff;

}



/* GRID */

.career-page .hero-grid,

.career-page .split-grid {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 36px;

  align-items: center;

}



/* HERO ACTION */

.career-page .hero-actions {

  display: flex;

  gap: 14px;

  margin-top: 25px;

  flex-wrap: wrap;

}





.career-page .btn-primary {

    margin-top: 20px;

    background: var(--secondary);

    border: none;

    padding: 12px 30px;

    font-weight: 600;

    color: #ffffff;

}



.career-page .btn-secondary {

    margin-top: 20px;

    border: none;

    padding: 12px 30px;

    font-weight: 600;

    background: #fff;

    color: #000;

    border: 1px solid #000;

}



/* HERO CARD */

.career-page .hero-card {

  padding: 18px;

  background: #fff;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



.career-page .hero-card img {

  border-radius: 12px;

  aspect-ratio: 4/4.2;

  object-fit: cover;

}



/* HERO STATS (IMPORTANT - YOU MISSED THIS) */

.career-page .hero-stats {

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 12px;

  margin-top: 16px;

}



.career-page .hero-stat {

  background: #f9fbff;

  padding: 12px;

  border-radius: var(--radius-sm);

  text-align: center;

}



.career-page .hero-stat strong {

  display: block;

  color: var(--primary);

}



.career-page .hero-stat span {

  font-size: 12px;

  color: var(--muted);

}



/* CARDS GRID (IMPORTANT - MISSED) */

.career-page .cards-2 {

  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 20px;

}



.career-page .cards-3 {

  display: grid;

  grid-template-columns: repeat(3,1fr);

  gap: 20px;

}



/* CARD */

.career-page .card {

  padding: 24px;

  background: #fff;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



/* ICON */

.career-page .icon-badge {

  width: 50px;

  height: 50px;

  border-radius: 12px;

  background: var(--accent);

  color: var(--secondary);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px;

}



/* IMAGE */

.career-page .split-image {

  border-radius: var(--radius);

  overflow: hidden;

}



.career-page .split-image img {

  width: 100%;

  min-height: 420px;

  object-fit: cover;

}



/* FAQ */

.career-page .faq-list {

  display: grid;

  gap: 15px;

  margin-top: 15px;

}



.career-page details {

  border: 1px solid var(--border);

  border-radius: 12px;

  overflow: hidden;

}



.career-page summary {

  padding: 16px;

  font-weight: 600;

  cursor: pointer;

  position: relative;

}



.career-page summary::after {

  content: "+";

  position: absolute;

  right: 16px;

  color: var(--secondary);

}



.career-page details[open] summary::after {

  content: "-";

}



.career-page .faq-answer {

  padding: 15px;

  border-top: 1px solid var(--border);

}



/* APPLY */

.career-page .apply-block {

  background: linear-gradient(135deg,#2d1e64,#1f1547);

  color: #fff;

  padding: 25px;

  border-radius: 16px;

  margin-bottom: 20px;

}



/* FORM */

.career-page .form-wrap {

  padding: 25px;

  background: #fff;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



.career-page .form-grid {

  display: grid;

  grid-template-columns: repeat(2,1fr);

  gap: 15px;

}



.career-page .full {

  grid-column: 1/-1;

}



/* INPUT */

.career-page input,

.career-page textarea {

  width: 100%;

  padding: 12px;

  border-radius: 10px;

  border: 1px solid var(--border);

}



.career-page .checkbox-row input {

    width: 18px;

    min-height: 18px;

    margin-top: 4px;

    padding: 0;

    border-radius: 4px;

}



.career-page input:focus,

.career-page textarea:focus {

  border-color: var(--secondary);

  box-shadow: 0 0 0 3px rgba(235,120,15,0.2);

}



/* CHECKBOX */

.career-page .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 4px 2px;

}



/* SUCCESS */

.career-page .success-box {

  display: none;

  margin-top: 15px;

  padding: 12px;

  border-radius: 10px;

  background: var(--success);

  color: var(--success-text);

}



.career-page .success-box.show {

  display: block;

}



.career-page .footer-note {
    text-align: center;
    font-size: 0.95rem;
    padding: 50px 0 0px;
    margin-bottom: 0;
}



/* RESPONSIVE */

@media (max-width: 1024px) {

  .career-page .hero-grid,

  .career-page .split-grid,

  .career-page .cards-2,

  .career-page .cards-3,

  .career-page .form-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 768px) {

  .career-page .hero-actions {

    flex-direction: column;

  }



  .career-page .hero-stats {

    grid-template-columns: 1fr;

  }

}