.con-kit-component-grid-list--columns-2 {
  justify-content: center;
}

/* Job cards injected by jobs-list.js. Styled here instead of via the
   vendor's con-kit-* classes, which only pick up real styling (box
   background/padding/border, button color, typography) through deep
   structural selectors requiring the full row/col/molecule/atom wrapper
   tree the live builder generates - our simplified card markup doesn't
   have that ancestor chain, so those classes silently match nothing. */
#custom-jobs-grid .custom-job-card {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  text-align: center;
  border: 1px solid rgb(241, 241, 241);
  border-radius: 4px;
  padding: 32px;
  font-family: 'futura-pt', sans-serif;
}

#custom-jobs-grid .custom-job-card__title {
  margin: 0;
  font-family: 'futura-pt', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: rgb(25, 25, 25);
  line-height: 1.25;
}

#custom-jobs-grid .custom-job-card__meta {
  margin: 12px 0 0;
  font-family: 'futura-pt', sans-serif;
  font-size: 14px;
  color: rgb(25, 25, 25);
  opacity: 0.6;
}

#custom-jobs-grid .custom-job-card__teaser {
  margin: 12px 0 0;
  font-family: 'futura-pt', sans-serif;
  font-size: 14px;
  color: rgb(25, 25, 25);
  line-height: 1.6;
}

#custom-jobs-grid .custom-job-card__button {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 28px;
  background: rgb(0, 80, 160);
  color: #fff;
  font-family: 'futura-pt', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 4px;
}

/* Job detail pages (api/job_detail.php) reuse the full homepage template
   and inject the job's own section right before .bewerbungsprozess, but
   leave every other homepage marketing section in place - without this,
   "Details ansehen" lands the visitor on what looks like the normal
   homepage, with the actual job content buried ~7000px down. Hide the
   marketing sections and keep only the header, the injected job section,
   the "how the process works" steps, and the footer. */
body.job-detail-page .cover,
body.job-detail-page .about-us-,
body.job-detail-page .bereiche,
body.job-detail-page .vorteile,
body.job-detail-page .faq,
body.job-detail-page .karte {
  display: none;
}

/* .jobs is hidden the same way but MUST NOT use display:none: it stays in
   the DOM because job-prefill.js clones and click()s the real
   "Initiativbewerbung senden" button that lives inside it to open the
   application form, and display:none sets offsetParent to null on every
   descendant, which is a common "is this actually clickable" guard in
   click handlers. visibility:hidden leaves geometry/offsetParent intact on
   descendants while still hiding pixels; height:0 + overflow:hidden
   collapses the layout space so it doesn't leave a gap. */
body.job-detail-page .jobs {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* The meta line ("Produktion · Schüpfheim, LU · Vollzeit") right after
   .con-kit-component-header in api/job_detail.php's injected section - the
   vendor's con-kit-quark-paragraph class resolves to a serif font on this
   page, same as everywhere else that class is used unstyled. */
.job-detail__meta {
  font-family: 'futura-pt', sans-serif;
}

/* Mobile job grid: vendor's 2-column flex layout (with 32px gaps set inline)
   squeezes cards on phones. Force a single full-width column, tighter gaps
   and card padding, and a full-width tappable button. !important is needed to
   beat the inline --one-kit-component-grid-list-* custom properties and the
   vendor's per-item width rules. */
@media (max-width: 767px) {
  /* The column holding our grid is a horizontal flex/grid container, which
     put the "Keine passende Stelle" block next to the cards and pushed it
     off-screen. Stack everything in it vertically. */
  .con-kit-col:has(> #custom-jobs-grid),
  .con-kit-col:has(> #custom-jobs-grid) > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .con-kit-col:has(> #custom-jobs-grid) > #custom-jobs-grid {
    display: grid !important;
  }

  #custom-jobs-grid.con-kit-component-grid-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    padding: 0 16px;
    box-sizing: border-box;
  }

  #custom-jobs-grid > .con-kit-component-grid-list-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #custom-jobs-grid .custom-job-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    text-align: left;
    border-color: rgb(225, 225, 225);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  #custom-jobs-grid .custom-job-card__title {
    font-size: 20px;
  }

  #custom-jobs-grid .custom-job-card__meta {
    margin-top: 8px;
  }

  #custom-jobs-grid .custom-job-card__teaser {
    margin-top: 10px;
  }

  #custom-jobs-grid .custom-job-card__button {
    margin-top: 16px;
    padding: 12px 20px;
    text-align: center;
    font-size: 16px;
  }
}


/* Mobile: the vendor keeps "Bereiche" and "Vorteile" at 3 columns on phones,
   which breaks words mid-letter ("FAMILI-ÄRE"). Stack them in one column. */
@media (max-width: 767px) {
  section.vorteile .con-kit-component-grid-list,
  section.bereiche .con-kit-component-grid-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    width: 100% !important;
  }

  section.vorteile .con-kit-component-grid-list-item,
  section.bereiche .con-kit-component-grid-list-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }

  section.bereiche .con-kit-component-grid-list {
    gap: 16px !important;
  }
}


/* Optional job image (api/jobs/images/{slug}.jpg), injected by
   api/job_detail.php between the meta line and the description. */
.job-detail__image {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 32px;
}

@media (max-width: 767px) {
  .job-detail__image {
    max-height: 260px;
  }
}