/* people-and-hr.css: /people-and-hr/ only.

   Loaded after blocks.css, which carries the definitional aside, the mechanics
   run, the numbered steps and the action band as .ub-*. Only what is specific
   to this page is here, and every rule is scoped to .page-hr so nothing
   reaches the other pages on module-page.css.

   The subject is one record per person and the fact that it keeps its history,
   so the page is drawn as a personnel file: hairlines, one row per fact, and
   the accent spent only on a date that has run out.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

.page-hr .pf-hero .sub { max-width: 46ch; }

/* An electrician working at a fitting, shot in landscape and cropped by the
   hero slot to roughly a square. He sits left of centre with his hands to the
   right, so the crop holds both rather than centring on the wall behind. */
.page-hr .pf-hero-media img { object-position: 42% 50%; }


/* ══ 2. THE PROBLEM ═══════════════════════════════════════════════════════ */

/* Short cells, two columns inside the split so twelve words are three lines
   rather than five, and no black-and-white alternation once the grid drops to
   one column: six full-bleed panels flashing on a phone is noise. */
.page-hr .pain-cell { min-height: 0; padding: 26px 24px; }
.page-hr .pain-cell .what {
  font-size: var(--fs-lg);
  line-height: 1.32;
  margin-top: 12px;
  text-wrap: pretty;
}
.page-hr .pain-cell .cost { margin-top: 22px; }

@media (min-width: 901px) {
  .page-hr .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-hr .pain-cell.heavy { background: var(--paper); color: var(--ink); }
  .page-hr .pain-cell.heavy .tag { color: var(--ink-mute); }
  .page-hr .pain-cell.heavy .cost { color: var(--ink-2); border-color: var(--rule-soft); }
  .page-hr .pain-cell .cost { font-weight: 500; color: var(--hazard); }
}


/* ══ 3. POINT BAR ═════════════════════════════════════════════════════════ */

/* core.css sets .pb-v at --fs-h2, the same step as a real section heading, and
   the inline highlight carries 2px of its own vertical padding, so at a tight
   line height the highlight boxes on consecutive lines collide. --fs-xl on a
   1.45 line keeps it to one line and reads as the aside it is. Scoped here
   rather than fixed in core.css: the fault is on 42 pages and wants its own
   pass, not a fix smuggled in from a page build. */
.page-hr .point-bar {
  margin-top: 56px;
  padding: 14px 22px;
  gap: 20px;
}
.page-hr .point-bar .pb-v {
  font-size: var(--fs-xl);
  line-height: 1.45;
  text-wrap: pretty;
}
.page-hr .point-bar .pb-v b { padding: 1px 9px; }
@media (min-width: 901px) {
  .page-hr .point-bar { grid-template-columns: minmax(0, auto) minmax(0, 3fr) minmax(0, auto); }
  .page-hr .point-bar .pb-l,
  .page-hr .point-bar .pb-r { max-width: 17ch; }
}


/* ══ 4. MODULE CARDS ══════════════════════════════════════════════════════ */

/* platform.css:292 puts flex:1 on the card paragraph, so it absorbs every
   pixel of slack and pushes the bullet list away from the text it belongs to.
   Let the paragraph be its own height and collect the slack above the footer,
   where a rule already sits. */
.page-hr .pf-mod p { flex: 0 0 auto; }
.page-hr .pf-mod > ul { margin-top: 4px; }
.page-hr .pf-mod > .pf-mod-foot { margin-top: auto; padding-top: 26px; }

/* Six ordinals at once on a dark band read as six pale slabs. Outline them. */
.page-hr .sec-dark .pf-mod-tag {
  background: transparent;
  color: oklch(0.66 0.005 60);
  border: 1px solid oklch(0.30 0.01 60);
}


/* ══ 5. THE FIVE KINDS OF PERSON ══════════════════════════════════════════
   The module's actual spine, and the thing every competitor blurs: employed,
   limited company, agency, guest and client contact are five different
   relationships with five different field sets, on one table. Drawn as five
   labelled rows rather than described in a paragraph, because the distinction
   is the point and a reader scanning will take it from the labels alone. */
.hr-kinds {
  margin-top: 44px;
  border-top: 1px solid var(--ink);
}
.hr-kind {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.hr-kind dt {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-xl);
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin: 0;
}
.hr-kind dd {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .hr-kind { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .hr-kind dt { font-size: var(--fs-lg); }
}


/* ══ 6. FAQ AND CLOSING BAND ══════════════════════════════════════════════ */

/* The heading column is sticky and short, the list is long, so the section
   ended with a band of empty paper below the last question. */
.page-hr #faq .faq-list { padding-bottom: 0; }
.page-hr #faq { padding-bottom: clamp(72px, 8vw, 112px); }

/* Hero and closing band must rank the same two actions the same way.
   core.css:816 states the intent for the hero ("secondary CTA reduced to an
   underlined text link, not a competing button"), so the closing band adopts
   it rather than adding a competing box above the fold. */
.page-hr .final .row .btn-ghost {
  background: transparent;
  border: 0;
  padding: 14px 4px;
  color: oklch(0.84 0.005 60);
  text-decoration: underline;
  text-decoration-color: oklch(0.45 0.01 60);
  text-underline-offset: 6px;
  font-weight: 500;
}
.page-hr .final .row .btn-ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
  transform: none;
}