Job ItemBLK

/* -- Job Item (website · Company) -----------------------------------------

   Previews one vacancy with its role, location, and employment type - as a list row or a card, grouped by department. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-job-item, .mk-job-item *, .mk-job-item ::before, .mk-job-item ::after) { box-sizing: border-box; }

  .mk-job-item {

    container: mk-job-item / inline-size;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.75rem 1.5rem;

    padding: 1.25rem 0.5rem;

    border-block-end: 1px solid var(--border);

    transition: background-color 150ms ease;

    &:hover { background: color-mix(in oklch, var(--accent) 50%, transparent); }

    & > svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--muted-foreground); transition: translate 150ms ease; }

    &:hover > svg { translate: 0.25rem 0; color: var(--foreground); }

  }

  .mk-job-item { position: relative; }

  .mk-job-item-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  .mk-job-item-title a:focus-visible { outline: none; }

  .mk-job-item:has(.mk-job-item-title a:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

  /* zero specificity: any block rule may still position its controls */

  :where(.mk-job-item :is(button, input, select, label, .btn):not(.mk-job-item-title a)) { position: relative; z-index: 1; }

  .mk-job-item-main { flex: 1 1 18rem; display: grid; gap: 0.5rem; }

  .mk-job-item-title {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.5rem;

    margin: 0;

    font-size: 1.0625rem;

    font-weight: 600;

    & a { color: inherit; text-decoration: none; }

  }

  .mk-job-item-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.25rem 1rem;

    margin: 0;

    padding: 0;

    list-style: none;

    color: var(--muted-foreground);

    font-size: 0.875rem;

    & li { display: inline-flex; align-items: center; gap: 0.375rem; }

    & svg { width: 0.875rem; height: 0.875rem; }

  }

  .mk-job-item-side { display: grid; justify-items: end; gap: 0.125rem; text-align: end; }

  .mk-job-item-salary { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }

  .mk-job-item-posted { color: var(--muted-foreground); font-size: 0.8125rem; }

  .mk-job-item[data-variant="card"] {

    flex-direction: column;

    align-items: stretch;

    padding: 1.5rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    background: var(--card);

    color: var(--card-foreground);

    &:hover { background: var(--card); border-color: color-mix(in oklch, var(--foreground) 25%, var(--border)); }

    & .mk-job-item-main { flex: none; }

    & .mk-job-item-side { justify-items: start; text-align: start; grid-auto-flow: column; justify-content: space-between; align-items: baseline; }

    & > svg { position: absolute; top: 1.5rem; right: 1.5rem; }

  }

  .mk-job-group { display: grid; gap: 0.25rem; }

  .mk-job-group-title { margin: 0 0 0.5rem; padding-inline: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

  /* -- Accessibility ------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {

    .mk-job-item, .mk-job-item > svg { transition: none; }

    .mk-job-item:hover > svg { translate: none; }

  }

  @media (forced-colors: active) {

    .mk-job-item:has(.mk-job-item-title a:focus-visible) { outline-color: Highlight; }

  }

}