/**
 * sigma/heading-text (P1) -- eyebrow, heading, optional italic accent
 * word, rich text body. Loaded only where the block renders (block.json
 * "style" field).
 *
 * Assumes a light (white/gray-light) ambient background, matching
 * DESIGN.md's stated default: navy is the system's only body-text color
 * on light sections. A future section-shell instance on a navy/photo
 * background should override .heading-text color locally -- not this
 * primitive's job to guess its container.
 */

.heading-text {
	box-sizing: border-box;
	color: var(--color-navy);
}

.heading-text__eyebrow {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-sans);
	font-size: var(--text-kicker);
	font-weight: var(--weight-sans-bold);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--color-gold-deep);
}

/*
 * Every heading in the comps is Cormorant Garamond Bold, and the accent
 * phrase inside it is Bold Italic in plain gold (#D8991B) -- at 70px and
 * 46px on white that is below AA-large, a decision docs/COMPOSITION.md
 * records as the client's own design, asked for pixel for pixel. The 30px
 * h3 keeps gold-deep: it is the size where DESIGN.md's contrast fix
 * applies and the comps draw no gold at that size anyway.
 */
.heading-text__heading {
	/* Balanced rather than greedy line lengths -- see blocks/hero/style.css's
	   .hero__headline for the measurement and the reasoning (QA 810). */
	text-wrap: balance;
	margin: 0 0 var(--space-md);
	font-family: var(--font-serif);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
}

/*
 * 70px is the comp's desktop size and there is no mobile comp. clamp()
 * between the statement size and the h2 token keeps the four-word "Sigma
 * gets you paid." on two lines at 375 instead of five; it reaches the full
 * 70px again at 700px wide, well before the 768 tablet width.
 */
h2.heading-text__heading {
	font-size: clamp(var(--text-statement), 10vw, var(--text-h2));
}

h3.heading-text__heading {
	font-size: var(--text-h3);
}

.heading-text__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

h3.heading-text__heading .heading-text__accent {
	color: var(--color-gold-deep);
}

.heading-text__body {
	font-family: var(--font-serif);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

/*
 * Paragraphs need air between them. base.css zeroes every p margin, and
 * --leading-body is 1.1 because the comp sets 20px type on a 22px line
 * -- correct inside a paragraph, and suffocating between them when
 * nothing separates one from the next. Home's Box 2B is six separate
 * statements the client asked to keep plain, and with no gap they read
 * as one unbroken wall of text rather than six facts.
 *
 * The comp answers the question itself: measured across its 20px runs,
 * lines inside a paragraph sit 22px apart and consecutive paragraphs
 * 42-44px, so roughly one blank line. --space-md is 24px, which lands in
 * that range on top of the 22px line box.
 */
.heading-text__body > * + * {
	margin-top: var(--space-md);
}

.heading-text__body > *:first-child {
	margin-top: 0;
}

.heading-text__body > *:last-child {
	margin-bottom: 0;
}

/*
 * Prose link, not a button -- the client's copy for several boxes ends
 * with one trailing sentence-link ("Read Scot's story", "See Our
 * Results"), never a CTA, so this deliberately does NOT reuse
 * .sigma-button (assets/css/base.css) or its chrome. The anchor
 * keeps its default (inline) display; only colour and underline are
 * set. Its own line below the body copy, not spliced into the body's
 * own markup, because body is arbitrary rich text from a WYSIWYG field
 * (fields.php) and inserting into the middle of it is not safe.
 */
.heading-text__link {
	margin: var(--space-sm) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}

.heading-text__link a {
	color: var(--color-gold-deep);
	text-decoration: underline;
}

.heading-text__link a:hover,
.heading-text__link a:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * phase2_unlinked destinations render as an <a> with no href at all
 * (see render.php) -- already non-focusable and inert; this just
 * signals the same thing visually instead of looking like a live,
 * dead-end link. Mirrors .sigma-button--unlinked's minimal treatment
 * (assets/css/base.css) minus the button chrome that doesn't
 * apply here. Deliberately does not set color -- leaving it inherited
 * from .heading-text__link a above (or from the on-dark override
 * below) means this works correctly on both light and navy sections
 * without a second, background-specific override.
 */
.heading-text__link--unlinked a {
	text-decoration: none;
	cursor: default;
	opacity: 0.55;
}

/*
 * c-hero-gap (M2): on-dark override. heading-text always nests inside
 * sigma/section (CONVENTIONS.md: "Layer-0 wrapper every component
 * nests inside"), which stamps .sigma-section--bg-<value> onto the
 * ancestor <section> (blocks/section/render.php). White/gold text on
 * navy stays 4.5:1+ per DESIGN.md's contrast table (16.30:1 white on
 * navy, 6.54:1 gold on navy) -- gold, not gold-deep, because gold-deep
 * is the *light-background* fix (DESIGN.md: raw gold fails AA on white/
 * light, not on navy). The trailing link joins the same gold group for
 * the same reason.
 */
.sigma-section--bg-navy .heading-text__eyebrow,
.sigma-section--bg-navy .heading-text__accent,
.sigma-section--bg-navy .heading-text__link a {
	color: var(--color-gold);
}

.sigma-section--bg-navy .heading-text__heading,
.sigma-section--bg-navy .heading-text__body {
	color: var(--color-white);
}

/*
 * Statement variant -- the comp's intro under every hero: 46px Cormorant
 * Bold navy, centred, 50px line pitch (the statement leading token), one
 * gold italic phrase, at most ~1000px wide (the widest comp statement
 * line, Sell Your Business, measures 943px). The optional paragraphs are
 * 20px centred in an 830px column per docs/COMPOSITION.md; the optional
 * button sits 24px below whatever comes last. Both widths are measured
 * columns, not layout tokens, hence the literals.
 */
.heading-text--statement {
	text-align: center;
}

.heading-text--statement .heading-text__heading,
.heading-text--section-heading .heading-text__heading {
	margin: 0 auto;
}

/*
 * ...but a section-heading that is the ONLY thing in its block needs the
 * gap back. `margin: 0 auto` above was written to centre the heading and
 * silently took its bottom margin with it, so a heading-only
 * sigma/heading-text stacked over a grid or a value-prop measured a 0px
 * gap and the descenders of "paid", "pillars." and "at." sat on the top
 * border of the cards below (QA 797/801/803/805, four pages, one cause).
 * blocks/grid/style.css already fixes the neighbouring case -- a
 * heading-text that ENDS IN BODY COPY -- and its comment reasoned that
 * the heading-only case was fine on its own 24px margin. True of the
 * default variant, which keeps that margin; not true here, which is why
 * only these two selectors were affected.
 *
 * 32px, not the base 24: the comp puts "What sets us apart." in a 77px
 * line box at y=2746 and the card row beneath it at y=2858 (SPEC-home
 * S05), so the drawn gap is 35px and --space-lg lands 3px under it,
 * inside the tolerance the rest of this rebuild works to. :last-child so
 * a section-heading WITH a subline is untouched: there the body supplies
 * its own --space-lg top margin, which is what the 32px above it is.
 */
.heading-text--section-heading .heading-text__heading:last-child {
	margin-block-end: var(--space-lg);
}

.heading-text--statement h2.heading-text__heading {
	max-width: 1000px;
	font-size: clamp(var(--text-h3), 8vw, var(--text-statement));
	line-height: var(--leading-statement);
}

.heading-text--statement .heading-text__body {
	max-width: 830px;
	margin: var(--space-md) auto 0;
}

.heading-text--statement .heading-text__link {
	margin-top: var(--space-md);
}

/*
 * Section-heading variant -- "Who we help." 70px centred with the gold
 * phrase, and the optional 20px subline ("Streamlining the buying and
 * selling process...") 32px under it, the comp's measured gap. The subline
 * is the body field, so a layout that wants only the heading leaves body
 * empty and nothing else changes.
 */
.heading-text--section-heading {
	text-align: center;
}

.heading-text--section-heading .heading-text__body {
	max-width: 830px;
	margin: var(--space-lg) auto 0;
}

/*
 * The comp's content button, one of the two statement/primary buttons
 * (with hero and cta-band) at the 316 minimum -- see
 * assets/css/base.css's shared .sigma-button rule for the padding,
 * border, type and navy-band colour swap every registry button in the
 * theme now shares. min-width rather than width because an approved
 * label longer than the comp's ("Get Your Confidential Valuation", 31
 * characters) must widen the box, not wrap inside it.
 */
.heading-text__button-row {
	margin: var(--space-md) 0 0;
}

.heading-text .sigma-button.heading-text__button {
	min-width: 316px;
}

.sigma-section--bg-navy .heading-text .sigma-button.heading-text__button {
	border-color: var(--color-white);
	color: var(--color-white);
}

.sigma-section--bg-navy .heading-text .sigma-button.heading-text__button:not(.sigma-button--unlinked):hover,
.sigma-section--bg-navy .heading-text .sigma-button.heading-text__button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-white);
	color: var(--color-navy);
}

/*
 * Below the desktop breakpoint the 33px comp height is under the 44px tap
 * target, so the button grows to it; below 480 it also takes the full
 * column, because 316px plus the section's inline padding is wider than a
 * 375 viewport -- white-space reverts to normal there so a label that
 * doesn't fit wraps in the full-width column instead of overflowing it.
 */
@media (max-width: 1023.98px) {
	.heading-text .sigma-button.heading-text__button {
		min-height: 2.75rem;
		height: auto;
	}
}

@media (max-width: 479.98px) {
	.heading-text .sigma-button.heading-text__button {
		min-width: 0;
		width: 100%;
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Short version -- Home box 2B                                         */
/* ------------------------------------------------------------------ */

/*
 * Six standalone facts the client added himself, in his own words, with
 * the instruction "plain text, no icons, no styling ... keep it boring on
 * purpose" -- it is the block he expects AI answer engines to quote. So
 * the type stays plain and nothing decorative is added here.
 *
 * What changes is only the shape. As one 760px column the six statements
 * ran as a tall grey wall between the hero and the first statement, which
 * is the one place on the page a visitor is still deciding whether to
 * keep reading. Two columns halve the height and give each fact its own
 * short block, and the smaller type is what stops a column of 20px prose
 * at this width reading as body copy competing with the statement below.
 *
 * column-count rather than a grid: the six items are one flow of <p>s
 * from the adapter with no wrapper per column, and columns balance
 * themselves when an item's length changes. break-inside keeps a single
 * fact from splitting across the gap.
 */
.heading-text--short-version .heading-text__body {
	/* 17px against the page's 20px prose. Small enough that the block
	   reads as reference material rather than competing with the
	   statement under it, large enough to stay comfortable in a column
	   this narrow. */
	font-size: var(--text-body-small);
}

@media (min-width: 768px) {
	.heading-text--short-version .heading-text__body {
		column-count: 2;
		column-gap: var(--space-2xl);
	}

	.heading-text--short-version .heading-text__body > * {
		break-inside: avoid;
	}

	/* The first paragraph in each column must not inherit the stacked
	   spacing, or the right column starts lower than the left. */
	.heading-text--short-version .heading-text__body > * + * {
		margin-top: var(--space-md);
	}
}