/* ================================================================
   Styles specific to careers.php and job.php. Loaded alongside
   contact.css on both pages, which already provides .page-hero,
   .contact-form, .form-row, .btn, .form-banner, .recaptcha-disclosure,
   and the color variables — this file only adds what's unique to the
   job cards and job detail layout.
   ================================================================ */

.jobs-section{
  padding: 56px 0;
}
.jobs-section h2{
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.8rem;
}
.jobs-section .section-lede{
  margin: 0 auto 32px;
  max-width: 560px;
  text-align: center;
  color: var(--gray-text);
  line-height: 1.6;
}

.jobs-empty{
  max-width: 480px;
  margin: 0 auto;
  padding: 32px;
  text-align: center;
  background: var(--blue-light);
  border-radius: 12px;
  color: var(--gray-text);
  line-height: 1.6;
}

.job-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.job-card{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #d6e2f5;
  border-radius: 14px;
  padding: 26px;
}
.job-card h3{
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.job-card .job-meta{
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.job-card p{
  margin: 0 0 18px;
  color: var(--gray-text);
  font-size: 0.92rem;
  line-height: 1.6;
  flex-grow: 1;
}
.job-card .btn{
  align-self: flex-start;
}

/* ============ Job detail page (job.php) ============ */
.job-detail-section{
  padding: 56px 0 72px;
}
.job-detail-header{
  margin: 0 0 32px;
}
.job-detail-header a.back-link{
  display: inline-block;
  margin-bottom: 16px;
  color: var(--blue);
  text-decoration: none;
  font-size: 0.9rem;
}
.job-detail-header a.back-link:hover{
  text-decoration: underline;
}
.job-detail-header h1{
  margin: 0 0 8px;
  font-size: 2rem;
}
.job-detail-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.job-detail-meta span{
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
}

.job-detail-body{
  max-width: 760px;
}
.job-detail-body h2{
  margin: 32px 0 12px;
  font-size: 1.25rem;
}
.job-detail-body p{
  color: var(--gray-text);
  line-height: 1.7;
  margin: 0 0 16px;
}
.job-detail-body ul{
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--gray-text);
  line-height: 1.8;
}

.job-not-found{
  max-width: 480px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  background: var(--blue-light);
  border-radius: 12px;
}
.job-not-found h1{
  margin: 0 0 12px;
  font-size: 1.5rem;
}
.job-not-found p{
  margin: 0 0 20px;
  color: var(--gray-text);
  line-height: 1.6;
}

/* ============ Application section (careers.php) ============ */
.apply-section{
  background: var(--blue-light);
  padding: 56px 0 72px;
}
.apply-section h2{
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.8rem;
}
.apply-section .section-lede{
  margin: 0 auto 32px;
  max-width: 560px;
  text-align: center;
  color: var(--gray-text);
  line-height: 1.6;
}
.apply-form-wrap{
  max-width: 640px;
  margin: 0 auto;
}

.form-row input[type="file"]{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1.5px dashed #b9cbe8;
  border-radius: 8px;
  background: var(--white);
  font-size: 0.9rem;
}

@media (max-width: 860px){
  .job-cards{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .page-hero{ padding: 40px 0; }
  .page-hero h1{ font-size: 1.7rem; }
  .jobs-section, .job-detail-section, .apply-section{ padding: 40px 0; }
}