/* ============================================================
   ThreeDoors — work-with-us.css
   Layout for /work-with-us and its per-role pages. Loads after the
   design system (tokens.css + components.css) and the shared site
   layout (site.css). Tokens only — no new colours, type, or spacing.
   Calm utility pages: a hub (three audiences) plus a dedicated page
   per role, built from the role briefs.
   ============================================================ */

/* ------------------------------------------------------------
   Hub — card grids, three audiences.
   ------------------------------------------------------------ */
.wwu-cards { display: grid; gap: var(--space-3); }
@media (min-width: 720px) {
  .wwu-cards--2 { grid-template-columns: repeat(2, 1fr); }
  .wwu-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Cards lay out as a column so the meta line / link sits at the foot
   regardless of body length. */
.wwu-cards .card { display: flex; flex-direction: column; }
.wwu-cards .card__body { flex: 1; }

/* Small meta line under a role card (location · terms). */
.wwu-meta {
  margin-top: var(--space-3); margin-bottom: 0;
  font-size: var(--t-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption); color: var(--color-text-muted);
}

/* "Read the brief →" link at the foot of a card. */
.wwu-card-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-3);
  font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-semibold);
  color: var(--color-accent); text-decoration: none;
  transition: gap var(--motion-fast) var(--ease-out-slow), color var(--motion-fast) var(--ease-out-slow);
}
.wwu-card-link:hover { gap: var(--space-2); color: var(--color-text); }
.wwu-card-link .icon { width: 16px; height: 16px; }

/* Whole-card link — the entire card is a single anchor to a role page.
   Must not contain other anchors (no nested links). */
a.card.wwu-cardlink { text-decoration: none; color: inherit; }
.wwu-cardlink { transition: background-color var(--motion-fast) var(--ease-out-slow), border-color var(--motion-fast) var(--ease-out-slow); }
.wwu-cardlink:hover { background: var(--color-surface-raise); border-color: var(--color-border-strong); }
.wwu-cardlink__more {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-3);
  font-family: var(--font-sans); font-size: var(--t-body); font-weight: var(--w-semibold);
  color: var(--color-accent);
  transition: gap var(--motion-fast) var(--ease-out-slow);
}
.wwu-cardlink:hover .wwu-cardlink__more { gap: var(--space-2); }
.wwu-cardlink__more .icon { width: 16px; height: 16px; }

/* Per-section call to action: button + a quiet note beside it. */
.wwu-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}
.wwu-note {
  font-size: var(--t-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption); color: var(--color-text-soft);
  max-width: 52ch;
}
.wwu-cta a:not(.btn) { color: var(--color-accent); }

/* Closing fallback — motif + a single warm line. */
.wwu-close {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface);
  max-width: 760px;
}
.wwu-close__mark { color: var(--color-accent); margin-top: 4px; }
.wwu-close__title {
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  margin: 0 0 var(--space-2);
}
.wwu-close p { color: var(--color-text-body); margin: 0; max-width: 60ch; }
.wwu-close a { color: var(--color-accent); }

/* ------------------------------------------------------------
   Role pages — a single readable column of brief copy.
   ------------------------------------------------------------ */
.jd-meta {
  margin-top: var(--space-3); margin-bottom: 0; max-width: none;
  font-family: var(--font-sans); font-size: var(--t-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption); color: var(--color-text-muted);
}

.jd { max-width: 72ch; margin-inline: auto; }
.jd__body > * + * { margin-top: var(--space-3); }
.jd__body h2 {
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  margin-top: var(--space-6);
}
.jd__body > h2:first-child { margin-top: 0; }
.jd__body p { color: var(--color-text-body); max-width: none; }
.jd__body strong { color: var(--color-text); font-weight: var(--w-semibold); }
.jd__body a { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.jd__body ul {
  margin: 0; padding-left: 1.2em;
  display: grid; gap: var(--space-2);
  color: var(--color-text-body);
}
.jd__body li { padding-left: var(--space-1); max-width: 68ch; }
.jd__body li::marker { color: var(--color-accent); }

/* Up-front callout (e.g. the construction role's "read this first"). */
.jd__note {
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4);
}
.jd__note p { margin: 0; color: var(--color-text-body); max-width: none; }

.jd__cta {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
}
.jd__cta .wwu-note { margin: 0; }

/* Equal-opportunity / closing line. */
.jd__eo {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--t-caption); line-height: var(--lh-caption);
  font-style: italic; color: var(--color-text-soft); max-width: none;
}