/* 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); }

/* ---- Job cards with the job's poster (16 Oct 2026, theukais.com jobs page): poster across the top of the card, the
   category as a badge on it; cards without a poster keep the icon layout. ---- */
.jc-card--poster { padding-top: 0; }
.jc-card__poster { position: relative; display: block; margin: 0 calc(-1 * var(--space-6)) var(--space-5); aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-100); }
.jc-card__poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.jc-card--poster:hover .jc-card__poster img { transform: scale(1.04); }
.jc-card__poster-cat { position: absolute; top: var(--space-4); left: var(--space-4); padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--green-500); color: var(--n-0); font-size: var(--text-xs); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) { .jc-card__poster img { transition: none; } }

/* client 16 Oct 2026: wider poster cards — up to 30 rem each (was 22 rem), still centred, one per row on phones */
.jc-grid:has(> .jc-card--poster) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 30rem)); }