/* Open roles board (Kula). Sits in the glass panel of the careers block. Structure follows the usual job list:
   a head with team filters, then one ruled row per role that opens the Kula career portal. */
/* place-items is reset because Chrome applies justify-items to block children too, which shrank and centred the list */
.about-careers_embed.is-board { display: block; place-items: normal; min-height: 0; padding: 2.5rem 3rem 1.5rem; text-align: left; }
.about-careers_embed.is-loading { min-height: 24rem; }

.about-jobs_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-bottom: 1.75rem; }
.about-jobs_title { display: flex; align-items: baseline; gap: .75rem; margin: 0; color: #fff; font-size: 1.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.about-jobs_count { color: rgba(255, 255, 255, .5); font-size: 1rem; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.about-jobs_filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.about-jobs_filter { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .375rem 1rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6.25rem; background: transparent; color: rgba(255, 255, 255, .8); font: inherit; font-size: .9375rem; line-height: 1.4; letter-spacing: -.011em; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.about-jobs_filter:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.about-jobs_filter[aria-pressed="true"] { border-color: #fff; background: #fff; color: #1c1d1f; }
.about-jobs_filter[aria-pressed="true"]::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #f92810; }
.about-jobs_filter:focus-visible, .about-jobs_row:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.about-jobs_list { margin: 0; padding: 0; list-style: none; }
.about-jobs_item { margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.about-jobs_item[hidden] { display: none; }
.about-jobs_row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.375rem 0; color: #fff; text-decoration: none; border-radius: .5rem; }
.about-jobs_role { font-size: 1.375rem; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
.about-jobs_dept, .about-jobs_where { color: rgba(255, 255, 255, .62); font-size: 1rem; line-height: 1.45; letter-spacing: -.011em; transition: color .2s ease-out; }
.about-jobs_go { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s ease-out, color .2s ease-out, transform .2s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .about-jobs_row:hover .about-jobs_dept, .about-jobs_row:hover .about-jobs_where { color: rgba(255, 255, 255, .9); }
  .about-jobs_row:hover .about-jobs_go { background: #fff; color: #1c1d1f; transform: translate(2px, -2px); }
}
.about-jobs_sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.about-jobs_note { margin: 0; padding: 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); font-size: 1rem; line-height: 1.5; }
.about-jobs_note[hidden] { display: none; }
.about-jobs_note.is-sample { font-size: .875rem; color: rgba(255, 255, 255, .5); }

@media (max-width: 767px) {
  .about-careers_embed.is-board { padding: 1.5rem 1.25rem .75rem; }
  .about-jobs_title { font-size: 1.5rem; }
  .about-jobs_row { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding: 1.125rem 0; }
  .about-jobs_role { grid-column: 1; font-size: 1.1875rem; }
  .about-jobs_dept, .about-jobs_where { grid-column: 1; font-size: .9375rem; }
  .about-jobs_go { grid-column: 2; grid-row: 1 / span 3; }
}
@media (prefers-reduced-motion: reduce) {
  .about-jobs_filter, .about-jobs_go, .about-jobs_dept, .about-jobs_where { transition: none; }
  .about-jobs_row:hover .about-jobs_go { transform: none; }
}