/* module-common.css: the standard module-page treatments.

   Opt-in, like blocks.css: a page gets these by carrying `page-mod` in its
   $body_class and naming this sheet in $page_css. Nothing loads it otherwise.

   Everything here was written four times over in four separate page sheets
   before this file existed (estimating, tv-board, holiday-planner,
   people-and-hr, employee-feedback, more-than-one-office). Each was the same
   six fixes with a different scope class in front of it. The sixth page was
   where copying stopped being cheaper than sharing.

   Load order matters: platform.css, theme-oxford.css, module-page.css,
   content.css, blocks.css, THIS, then any page-specific sheet.

   What is here and why:
     1  pain cells      two columns, and no black/white flashing on a phone
     2  point bar       one line, and a line height that clears the highlight
     3  module cards    the flex:1 hole, and outlined ordinals on dark
     4  faq             the band of empty paper under the last question
     5  closing band    one ghost treatment, matching the hero
     6  hero crops      one line per page, kept together so they are findable
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. PAIN CELLS ════════════════════════════════════════════════════════ */

/* The grid sits in the 652px half of a .pin-split, so three columns give each
   cell 217px: twelve words of --fs-lg set five lines deep, which is the wall
   of text these sections exist to avoid. Two columns give 326px and three
   lines, and the section ends up the same height because the rows are shorter. */
.page-mod .pain-cell { min-height: 0; padding: 26px 24px; }
.page-mod .pain-cell .what {
  font-size: var(--fs-lg);
  line-height: 1.32;
  margin-top: 12px;
  text-wrap: pretty;
}
.page-mod .pain-cell .cost { margin-top: 22px; }

@media (min-width: 901px) {
  .page-mod .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In three columns the alternating .heavy cells make a considered
   checkerboard. In one column they become six full-bleed panels flashing black
   and white for 3,400px with nothing meaningful attached to which is which.
   Below the breakpoint the alternation goes and the cost label carries the
   weight instead. */
@media (max-width: 900px) {
  .page-mod .pain-cell.heavy { background: var(--paper); color: var(--ink); }
  .page-mod .pain-cell.heavy .tag { color: var(--ink-mute); }
  .page-mod .pain-cell.heavy .cost { color: var(--ink-2); border-color: var(--rule-soft); }
  .page-mod .pain-cell .cost { font-weight: 500; color: var(--hazard); }
}


/* ══ 2. POINT BAR ═════════════════════════════════════════════════════════ */

/* core.css sets .pb-v at --fs-h2, the same step as a real section heading, so
   a page with three of these reads as having six h2-rank objects where it has
   three sections. And the inline highlight carries 2px of its own vertical
   padding (core.css:2310), so at a tight line height the highlight boxes on
   consecutive lines collide and the bar reads cramped and ragged.

   --fs-xl on a 1.45 line fixes both: one line, and the highlight clears.
   Capping the two flank labels is what buys the value its single line, because
   core.css gives them their natural width off an `auto 1fr auto` track.

   Scoped to opted-in pages deliberately. The same fault is on 42 pages and
   deserves fixing in core.css, but that is a site-wide change wanting its own
   pass with fold-audit run across the lot, not a fix smuggled in from a page
   build. */
.page-mod .point-bar {
  margin-top: 56px;
  padding: 14px 22px;
  gap: 20px;
}
.page-mod .point-bar .pb-v {
  font-size: var(--fs-xl);
  line-height: 1.45;
  text-wrap: pretty;
}
.page-mod .point-bar .pb-v b { padding: 1px 9px; }
@media (min-width: 901px) {
  .page-mod .point-bar { grid-template-columns: minmax(0, auto) minmax(0, 3fr) minmax(0, auto); }
  .page-mod .point-bar .pb-l,
  .page-mod .point-bar .pb-r { max-width: 17ch; }
}


/* ══ 3. MODULE CARDS ══════════════════════════════════════════════════════ */

/* platform.css:292 puts flex:1 on the card's <p>, so the paragraph absorbs
   every pixel of slack in the card and pushes the bullet list away from the
   text it belongs to. That is the hole in the middle of the taller cards and
   the reason three lists in a row start at three different heights. Let the
   paragraph be its own height and collect the slack above the footer, where a
   rule already sits and empty space is invisible. */
.page-mod .pf-mod p { flex: 0 0 auto; }
.page-mod .pf-mod > ul { margin-top: 4px; }
.page-mod .pf-mod > .pf-mod-foot { margin-top: auto; padding-top: 26px; }

/* Six ordinals at once on a dark band read as six pale slabs competing with
   the heading. The eyebrow chip is left on the site's own dark treatment
   (platform.css:770): one label is meant to be seen, six numbers are not. */
.page-mod .sec-dark .pf-mod-tag {
  background: transparent;
  color: oklch(0.66 0.005 60);
  border: 1px solid oklch(0.30 0.01 60);
}


/* ══ 4. FAQ ═══════════════════════════════════════════════════════════════ */

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


/* ══ 5. CLOSING BAND ══════════════════════════════════════════════════════ */

/* Hero and closing band have to 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
   that rather than the reverse: adding a box to the hero would put weight
   above the fold, which is the one place these pages cannot afford it. */
.page-mod .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-mod .final .row .btn-ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
  transform: none;
}


/* ══ 6. HERO CROPS ════════════════════════════════════════════════════════
   The hero slot crops a landscape photograph to roughly a square, so every
   one of these needs its subject held rather than the frame centred. Kept
   together rather than in six page sheets because they are one line each and
   because seeing them as a set is how you notice one drifting. */
.page-qt .pf-hero-media img { object-position: 50% 62%; }  /* hat, drawings, scale rule */
.page-vr .pf-hero-media img { object-position: 46% 46%; }  /* the manager, left of centre */
.page-po .pf-hero-media img { object-position: 50% 40%; }  /* the counter and the docket */
.page-tm .pf-hero-media img { object-position: 50% 44%; }  /* five lifts of scaffold */
.page-vf .pf-hero-media img { object-position: 50% 66%; }  /* the gang on the slab */
.page-cf .pf-hero-media img { object-position: 42% 50%; }  /* the electrician at the board */