/* Interior pages
 *
 * NOT FROM THE HANDOFF. The mockup has two artboards, Home and one interior,
 * and both heroes carry a photograph. The live site has 34 pages and almost
 * none of them have artwork, so this covers the case the design never had to.
 *
 * WHY IT MATTERS: the header is transparent and absolutely positioned OVER
 * the hero — that is the design. A page with no hero at all therefore has its
 * first heading rendered underneath the nav pill, and the eyebrow links lose
 * the dark ground they rely on. Every page gets a banner; a page with no
 * featured image gets this solid one.
 */

.hero--noimage {
  background: var(--color-charcoal);
}

/* The photographic scrims have nothing to sit on and only muddy a flat band. */
.hero--noimage::before,
.hero--noimage::after {
  content: none;
}

/* Long page titles — "Scientific Management Techniques Has Been Measuring the
 * Manufacturing Skills Shortage for Decades" is a real one — must not run the
 * full 1640 as a single line of --step-5. */
.hero__heading { max-width: 26ch; }

/* -- Interior hero scrim, strengthened ---------------------------------
 * MEASURED, not guessed. The handoff tuned the scrim against the two images
 * the mockup shipped. Thirty-two interior pages now carry photography it was
 * never tested on, and six of the fourteen hero images fail WCAG AA for large
 * text at the worst pixel under the heading:
 *
 *   o-MANUFACTURING-JOBS 2.68   history-bg 2.72   feature-operations 2.78
 *   tile-press 2.83   feature-human-resources 2.91   tile-resources 2.92
 *
 * +0.10 alpha on every stop takes the worst case to 3.73 and the best to 7.10.
 * Redefining the TOKEN rather than restating .hero::before keeps the gradient
 * in one place — the rule that consumes it is untouched.
 *
 * Scoped to hero--short so the homepage's tall hero stays exactly as approved.
 */
.hero--short {
  --color-scrim: linear-gradient(90deg,
      rgb(0 0 0 / 0.82) 0%,
      rgb(0 0 0 / 0.52) 60%,
      rgb(0 0 0 / 0.22) 100%);
}

/* -- Imported prose: heading colour ------------------------------------
 * Taken from the old site's own stylesheet (assets/css/app.min.css), which
 * colours interior body copy by tag inside `.page-content .content-cms`:
 *
 *     h2  #900036  30px / 400
 *     h3  #353535  18px / 600, padding-top 15px
 *     b, strong  #444
 *
 * #900036 IS this design's --color-primary, so the wine headings carry over
 * with no new colour introduced. #353535 maps to --color-charcoal.
 *
 * NOT brought across: the old site's #425DBF blue (navbar, footer, links).
 * The new palette is five colours and deliberately replaced it — see
 * section-inventory.md. One imported h4 carries it inline; that is overridden
 * below rather than left as a sixth colour.
 *
 * Scoped to .pblock__body / .mtext__body — the imported-prose wrappers — so
 * the design's own section headings are untouched.
 */
.pblock__body h2,
.mtext__body h2 {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}

.pblock__body h3,
.mtext__body h3 {
  color: var(--color-charcoal);
  font-weight: var(--fw-bold);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-3xs);
}

/* The old sheet has no h4 rule at all, so h4 inherited body colour. Kept a
 * step below h3 rather than inventing a fourth treatment. */
.pblock__body h4,
.mtext__body h4 {
  color: var(--color-charcoal);
  font-weight: var(--fw-bold);
  font-size: var(--step-0);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-3xs);
}

/* One imported h4 carries style="color:#425DBF" — the old brand blue. An
 * inline style outranks any selector, so this is the one place a keyword is
 * warranted; it is retiring a colour, not fighting the page builder. */
.pblock__body h4[style],
.mtext__body h4[style] {
  color: var(--color-charcoal) !important;
}

/* First heading in a block should not push the band open. */
.pblock__body > :is(h2, h3, h4):first-child { margin-top: 0; }

/* -- Imported CTA rows --------------------------------------------------
 * The old theme wrapped its page CTAs in `.row-cta-buttons`. 32 of them came
 * across with the content. The buttons themselves are re-classed to
 * .btn--primary on import; this is the row that holds them. */
.row-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

/* -- Buttons inside imported prose --------------------------------------
 * SPECIFICITY, measured not assumed: `.pblock__body a` is (0,1,1) and
 * `.btn--primary` is only (0,1,0), so the prose link colour won and every
 * imported CTA rendered as TEAL TEXT ON A WINE GROUND. The underline came
 * along too.
 *
 * Restated at (0,2,1) — the button variant's own colours, scoped to prose.
 * A button inside body copy is still a button.
 */
.pblock__body a.btn,
.mtext__body a.btn {
  text-decoration: none;
}
.pblock__body a.btn--primary,
.mtext__body a.btn--primary {
  color: var(--color-text-inv);
}
.pblock__body a.btn--primary:hover,
.mtext__body a.btn--primary:hover {
  color: var(--color-primary);
}
.pblock__body a.btn--outline,
.mtext__body a.btn--outline {
  color: var(--color-accent);
}
.pblock__body a.btn--outline:hover,
.mtext__body a.btn--outline:hover {
  color: var(--color-text-inv);
}