/* blocks.css: four page blocks shared by the module detail pages.

   Opt-in. Nothing loads this unless it names it in $page_css, so adding to it
   cannot reach a page that does not ask for it. That is why these live here
   rather than in content.css, which 120 pages read.

   They were written for /advanced-estimating/ (as .ae-*) and copied once for
   /tv-board/ (as .tv-*). The third use, /holiday-planner/, is where copying
   stops being cheaper than sharing, so all three now read from here and the
   duplicates are gone from both page sheets.

   Naming: .ub- prefix, because these belong to the site rather than to any one
   page. Anything genuinely specific to a page stays in that page's own sheet
   under its own prefix.

   The four:
     .ub-def     the definitional aside: what the category is, what this is
                 inside it. Written to be lifted whole by an answer engine.
     .ub-mech    a two-column run of short definitions. For mechanical detail
                 that reads better side by side than stacked in a split.
     .ub-steps   numbered rows, number / key / prose. Only for content that is
                 genuinely a sequence; numbering that encodes nothing is
                 decoration.
     .ub-act     the mid-page action band, light or .on-dark.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ THE DEFINITIONAL ASIDE ═══════════════════════════════════════════════ */

/* Set as an aside rather than a section: no heading, hairline top and bottom,
   the eyebrow doing the labelling. It is orientation for a cold visitor and an
   extraction target for a crawler, and it must not compete with the section
   below it. Where it sits directly under the hero it is also what fold-audit
   measures, so it is kept compact. */
.ub-def {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--rule);
}
.ub-def .wrap { padding-top: 40px; padding-bottom: 40px; }
.ub-def-split {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
/* Not the navy .num chip the section headings use: that is styled by
   .sec-hd .num > span:first-child and this block deliberately has no .sec-hd,
   because it is an aside and not a section. */
.ub-def .num > span {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ub-def-body p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 72ch;
  text-wrap: pretty;
}
/* Category and product are separate answers, so they take a rule between them
   rather than reading as one flowing passage. */
.ub-def-body p + p {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

@media (max-width: 900px) {
  .ub-def-split { grid-template-columns: 1fr; gap: 18px; }
  .ub-def .wrap { padding-top: 32px; padding-bottom: 32px; }
  .ub-def-body p { font-size: var(--fs-md); }
}


/* ══ THE MECHANICS RUN ════════════════════════════════════════════════════ */

/* Full width in two columns rather than inside a .pin-split: six short
   definitions read better side by side than stacked in a 713px column, and
   this block exists for pages where there is no photograph worth putting
   beside the text. */
.ub-mech {
  margin-top: 8px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 88px);
}
.ub-mech-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.ub-mech-row h3 {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.ub-mech-row p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .ub-mech { grid-template-columns: 1fr; }
  .ub-mech-row { padding: 22px 0; }
}


/* ══ NUMBERED STEPS ═══════════════════════════════════════════════════════ */

.ub-steps { border-top: 1px solid var(--ink); margin-top: 8px; }
.ub-steps-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.ub-steps-n {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.ub-steps-k {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.ub-steps-body p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.ub-steps-body p + p { margin-top: 14px; }

/* The prose wrapper MUST be placed explicitly below the split. Left to
   auto-placement it drops into the 40px number column and sets the paragraphs
   40px wide, which is a silent and spectacular bug: it took the equivalent
   section on /advanced-estimating/ to 10,916px on a phone before it was
   caught. Any markup using .ub-steps needs the .ub-steps-body wrapper. */
@media (max-width: 900px) {
  .ub-steps-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 16px; padding: 26px 0; }
  .ub-steps-body { grid-column: 2; }
}


/* ══ THE MID-PAGE ACTION BAND ═════════════════════════════════════════════ */

/* Module pages used to carry four buttons: two in the hero and the same two in
   the closing band, ten thousand pixels apart on desktop, with every
   persuasive block on the page sitting in the gap. This lands an action
   directly after a block that has earned one.

   Deliberately flat. A director reading a page like this is put off by being
   sold to, so it states the offer and stops. */
.ub-act {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ub-act .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.ub-act-copy p {
  margin: 0;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.018em;
  max-width: 26ch;
  text-wrap: balance;
}
.ub-act-copy span {
  display: block;
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
}
.ub-act-do { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ub-act-do small {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  max-width: 30ch;
}

/* The site's rule for the primary action is by ground, not by section: the
   Oxford gradient on a light band (core.css:2859 does this for the hero), a
   white box on a dark one (core.css:1201, the closing band). A plain black
   button is neither, and reads as a third kind of button. */
.ub-act:not(.on-dark) .btn {
  background: var(--grad-accent);
  color: var(--hazard-ink);
  border-color: var(--grad-edge);
}
.ub-act:not(.on-dark) .btn:hover { filter: brightness(0.96); }

.ub-act.on-dark {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
  border-bottom-color: oklch(0.3 0.01 60);
}
.ub-act.on-dark .ub-act-copy span { color: oklch(0.8 0.005 60); }
.ub-act.on-dark .ub-act-do small { color: oklch(0.68 0.005 60); }
.ub-act.on-dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

@media (max-width: 900px) {
  .ub-act .wrap { grid-template-columns: 1fr; gap: 22px; }
  .ub-act-do { align-items: stretch; }
  .ub-act-do .btn { justify-content: center; }
}