/* CMS additions to the theme careers board (career.css). Role cards are links here (they open the career page's
   application form with the role filled in), so they must not pick up the site's link underline or colour. */
a.jb-role { text-decoration: none; color: inherit; }
a.jb-role:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.jb-section-head { margin-bottom: var(--space-6); }
.jb-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.jb-cards__more { margin-top: var(--space-6); text-align: center; }
/* Jobs global section: the search bar sits in the section, not over a hero */
.jb-section .jb-searchwrap { margin-top: 0; }

/* ---- Jobs section style 4 — job cards (8 Oct 2026) ---------------------------------------------------------------
   One card per published job; hover / focus slides "Apply now" up from the bottom edge; always visible on touch. */
.jc-grid { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 22rem)); justify-content: center; }
.jc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--space-6) var(--space-6) calc(var(--space-6) + 3.25rem);
  background: var(--n-0); border: 1px solid var(--color-border); border-top: 4px solid var(--gold-400);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.jc-card:hover, .jc-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-200); border-top-color: var(--gold-400); }
.jc-card__label { position: absolute; top: var(--space-5); right: var(--space-5); padding: 0.2rem 0.65rem; border-radius: var(--radius-full); background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.jc-card__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-lg); background: var(--green-50); color: var(--green-500); transition: background-color 0.35s, color 0.35s, transform 0.35s var(--ease-out); }
.jc-card__icon .icon, .jc-card__icon i { width: 1.5rem; height: 1.5rem; font-size: 1.35rem; }
.jc-card:hover .jc-card__icon { background: var(--green-500); color: var(--n-0); transform: rotate(-6deg); }
.jc-card__cat { margin-top: var(--space-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); }
.jc-card__title { margin-top: var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.jc-card__title a { color: var(--color-heading); text-decoration: none; }
.jc-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card opens the job */
.jc-card__facts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jc-card__facts li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); background: var(--cream-100); color: var(--color-text-muted); font-size: var(--text-xs); }
.jc-card__facts .icon { width: 0.85rem; height: 0.85rem; color: var(--green-500); }
.jc-card__text { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.jc-card__action {
  position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-5); z-index: 1;
  transform: translateY(calc(100% + var(--space-6))); opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.jc-card:hover .jc-card__action, .jc-card:focus-within .jc-card__action { transform: none; opacity: 1; }
.jc-card__action .icon { width: 1rem; height: 1rem; margin-left: var(--space-2); }
@media (hover: none) { .jc-card__action { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jc-card, .jc-card__icon, .jc-card__action { transition: none; } }
.jc-empty { margin-top: var(--space-10); }