/* 08-pages/_jobs.css — public Gantry job index and show pages. */
.p-jobs {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* The index runs wider than the 120ch reading cap: every row pairs a dashboard
   card with a screencast sidebar, so the whole index fills the body width (header
   included), left/right aligned to the page gutters — no re-centring. */
.o-container--index,
.o-container:has(> .p-jobs--index) { max-width: none; }

.p-jobs__frontmatter {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
  padding-block: var(--space-lg);
  border-block: var(--bw) dashed var(--line-strong);
}

.p-jobs__title {
  color: var(--text-bright);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.p-jobs__lede,
.p-jobs__tagline,
.p-jobs__meta,
.p-jobs__backlink {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-jobs__tagline {
  max-width: var(--measure-wide);
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--lh-copy);
}

.p-jobs__backlink { width: fit-content; }
.p-jobs__backlink::before { content: "◂ "; color: var(--accent); }

.p-jobs__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* A single-column grid: each row is a block-level grid item that fills the full
   body width (a flex column here would leave the row grids collapsed to their
   content width). */
.p-jobs__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  max-width: none; /* override the ul/ol reading-measure cap in 04-elements */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each row pairs a bordered dashboard card — the run's title, tagline, meta, and a
   tile grid of measured stats — filling the wide two-thirds column, with a separate
   ambient screencast embed under terminal chrome in the remaining one-third sidebar
   to its right. Stacks vertically on narrow viewports. */
.p-jobs__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  width: 100%;
  min-width: 0;
}

.p-jobs__card {
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.p-jobs__card:hover,
.p-jobs__card:focus-within {
  border-color: var(--accent);
}

.p-jobs__card-media {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 16 / 9;
  border: var(--bw) solid var(--line);
  background: var(--surface-sunken);
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.p-jobs__card-media:hover {
  border-color: var(--accent);
}

@media (min-width: 52rem) {
  .p-jobs__item { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.p-jobs__card-media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.p-jobs__card-chrome {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-md);
  background: color-mix(in oklab, var(--panel) 82%, transparent);
  border-block-end: var(--bw) solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.p-jobs__card-mark { color: var(--text-dim); }

.p-jobs__card-chrome-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-jobs__card-expand { color: var(--text-dim); }

.p-jobs__card-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background: var(--surface-sunken);
}

.p-jobs__card-pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  color: var(--text-dim);
}

.p-jobs__card-pending-glyph { font-size: var(--text-2xl); }

.p-jobs__card-pending-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.p-jobs__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.p-jobs__card-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.p-jobs__card-title-link {
  color: var(--text-bright);
  text-decoration: none;
}

.p-jobs__card-title-link:hover,
.p-jobs__card-title-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.p-jobs__card-tagline {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
  line-height: var(--lh-copy);
}

.p-jobs__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-sm);
}

.p-jobs__card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-sm);
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--space-md);
}

.p-jobs__card-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--bw) solid var(--line);
  background: var(--surface);
}

.p-jobs__card-stat-label {
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.p-jobs__card-stat-value {
  color: var(--text-bright);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.p-jobs__media,
.p-jobs__description,
.p-jobs__prose {
  max-width: var(--measure-wide);
}

.p-jobs__prose-summary {
  color: var(--text-bright);
  font-weight: var(--fw-bold);
}

.p-jobs__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18ch), 1fr));
  gap: var(--space-sm);
}

.p-jobs__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-sm);
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
}

.p-jobs__stat-value {
  color: var(--text-bright);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

.p-jobs__stat-label {
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}