/* ============================================================
   Job-Detailseite (CPT "job") — jobs/single.php
   Eigenständiges 2-Spalten-Layout (66/33), OHNE Bootstrap-Abhängigkeit.
   Desktop (>=992px): Titel oben, links Texte, rechts Quick-Facts
                      (untereinander, Trennlinien, Sidebar sticky).
   Mobil (<992px):    Fakten werden zur FAKTEN-ZEILE OBERHALB der Texte,
                      darunter die kompakte CTA-Karte, dann erst die Texte.

   Hinweis: Das Theme lädt KEIN Bootstrap und KEIN main.css — nur
   css/custom-phoenixseo.css. Alle Layout- und Button-Styles dieser
   Seite müssen daher vollständig in dieser Datei stehen.
   ============================================================ */

/* ---------- Seiten-Grundgerüst ---------- */
.single-job {
  padding: 2rem 0 3rem;
}

/* .container ist Bootstrap — hier eigenes, schmales Seiten-Shell */
.single-job .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.job-hero {
  margin-bottom: 1.5rem;
}

.job-hero-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---------- Titel (volle Breite, über allem) ---------- */
.single-job .job-title {
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: #06284b;
  margin: 0 0 1.25rem;
}

.single-job .job-badge {
  display: inline-block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4em 0.9em;
  background: #056ab4;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

/* ---------- 2-Spalten-Layout: eigenes CSS-Grid (kein Bootstrap) ---------- */
.job-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start; /* wichtig: Grid-Kinder nicht strecken, damit sticky greift */
}

/* Rechte Spalte als Karten-Stack */
.job-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  order: -1; /* Mobil (Standard): Fakten-Spalte steht ÜBER den Texten */
}

@media (min-width: 992px) {
  .job-layout {
    grid-template-columns: 2fr 1fr; /* 66 / 33 */
    gap: 2.5rem;
  }

  /* Desktop: Sidebar rechts (Normalreihenfolge) und klebt beim Scrollen */
  .job-side {
    order: 0;
    position: sticky;
    top: 1.5rem;
  }
}

/* ---------- Linke Spalte: Texte mit Überschriften ---------- */
.job-main .job-details p,
.job-main .job-block p {
  line-height: 1.7;
  color: #333;
}

.job-main .job-block {
  margin-bottom: 2rem;
}

.job-main .job-block-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #056ab4;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

/* ---------- Karten (Sidebar) ---------- */
.job-side-card {
  background: #eef3f8;
  border: 1px solid #d4e0ec;
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.25rem;
}

.job-side-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #056ab4;
  margin: 0 0 1rem;
}

/* ---------- Quick-Facts: Paare UNTEREINANDER (Desktop) ---------- */
.job-facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.job-fact-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c7a89;
  margin-bottom: 0.2rem;
}

.job-fact-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #06284b;
  font-size: 1rem;
  line-height: 1.4;
}

.job-fact-value i {
  color: #056ab4;
  width: 1.1em;
  text-align: center;
  flex-shrink: 0;
}

/* Trennlinien zwischen den Fakten-Paaren (nur Desktop-Spalte) */
@media (min-width: 992px) {
  .job-facts-list .job-fact {
    border-bottom: 1px solid #d4e0ec;
    padding-bottom: 0.8rem;
  }

  .job-facts-list .job-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

/* ---------- CTA-Karte (blau, Desktop rechts) ---------- */
.job-apply-card {
  background: #056ab4;
  color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.job-apply-card .job-apply-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
}

.job-apply-card p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  opacity: 0.92;
}

/* Button in der CTA-Karte (Bootstrap .btn-primary ist nicht geladen) */
.job-apply-card .btn {
  display: inline-block;
  background: #fff;
  color: #056ab4;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.75rem 1.6rem;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.job-apply-card .btn:hover {
  background: #06284b;
  color: #fff;
}

/* ---------- Mobil (<992px): FAKTEN-ZEILE OBERHALB der Texte ---------- */
@media (max-width: 991.98px) {
  .job-layout {
    gap: 1.5rem;
  }

  .job-side {
    order: -1; /* explizit: Fakten + CTA über den Texten */
  }

  .job-quickfacts {
    padding: 1rem 1.25rem;
  }

  /* Fakten-Paare horizontal nebeneinander (Label über Wert), Wrap */
  .job-facts-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: flex-start;
  }

  .job-fact {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .job-fact-label {
    font-size: 0.65rem;
  }

  .job-fact-value {
    font-size: 0.92rem;
    gap: 0.4rem;
  }

  /* CTA-Karte kompakt: Text ausblenden, Button rechts */
  .job-apply-card {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
  }

  .job-apply-card .job-apply-title {
    margin: 0;
    font-size: 1rem;
  }

  .job-apply-card p {
    display: none; /* Platz sparen */
  }

  .job-apply-card .btn {
    white-space: nowrap;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* ---------- Benefits-Liste (2 Spalten, blaue Häkchen) ---------- */
.job-benefits-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}

.job-benefits-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  break-inside: avoid;
}

.job-benefits-list li::before {
  content: "\f00c"; /* fa-check (Font Awesome 5) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #056ab4;
}

@media (max-width: 575.98px) {
  .job-benefits-list {
    columns: 1;
  }
}

/* ---------- Unternehmens-Block ---------- */
.job-company {
  background: #f7fafc;
  border: 1px solid #e3ebf2;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Outline-Button "Mehr über uns" (Bootstrap .btn-outline-primary ist nicht geladen) */
.job-company .btn {
  display: inline-block;
  border: 2px solid #056ab4;
  color: #056ab4;
  background: transparent;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.6rem 1.4rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.job-company .btn:hover {
  background: #056ab4;
  color: #fff;
}

/* ---------- Bewerben-CTA am Textende (Hauptspalte) ---------- */
.job-apply-cta {
  margin-top: 2.5rem;
}

.job-apply-cta .btn {
  display: inline-block;
  background: #056ab4;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.job-apply-cta .btn:hover {
  background: #06284b;
  color: #fff;
}

/* ---------- Sticky-Bewerben-Button (fixed, nur Desktop >=992px) ---------- */
.job-sticky-apply {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  background: #056ab4;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.85rem 1.8rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(5, 106, 180, 0.35);
  transition: background 0.2s ease;
}

.job-sticky-apply:hover {
  background: #06284b;
  color: #fff;
}

@media (max-width: 991.98px) {
  .job-sticky-apply {
    display: none;
  }
}