/**
 * sigma/cta-band (C5) -- the navy call-to-action band: headline, one
 * paragraph, one or two registry buttons. Loaded only where the block
 * renders (block.json "style" field).
 *
 * Rebuilt 2026-09-08 to the client's comps (docs/qa/comp-spec/SPEC-*.md,
 * 1 unit = 1 CSS px at 1440). No comp draws a standalone CTA band, so
 * this takes the geometry of the two centred bands every comp does draw
 * -- the hero (S00) and the intro statement -- in the navy band's colours
 * (SPEC-home S04/S08: white type, white 1.5px outlines, the gold accent
 * unchanged on navy). Headline 70px Cormorant Garamond Bold at the 1.1
 * pitch (77px), one Bold Italic gold phrase; paragraph 20px Regular at
 * 1.1; buttons 316x33, 1.5px outline, 18px uppercase Montserrat
 * Regular, side by side 24px apart, the 12px micro-text above the
 * second. Every literal below is a comp measurement and names the
 * spec line it comes from.
 *
 * The band's own vertical padding is sigma/section's, not this block's:
 * the comp puts 52px between a navy band's top edge and its first
 * content (S04 band top 1468, boxes at 1520.4), which is the section's
 * "default" spacing token exactly. A layout wanting the comp rhythm
 * picks that; nothing here adds to it.
 *
 * .sigma-button: the shared chrome (padding, border, type) now lives
 * once in assets/css/base.css, not here -- this file used to carry its
 * own full copy, and that was the bug QA reported as "button sizing":
 * per-block copies drift. What stays here is only .sigma-button.cta-band__button,
 * the one thing that is genuinely about this block (its min-width) and
 * the navy-band colour swap below.
 */

.cta-band {
	box-sizing: border-box;
	color: var(--color-navy);
}

.cta-band--align-center {
	text-align: center;
}

/*
 * 70px Cormorant Garamond Bold, 77px pitch (SPEC-home S00 TEXT lines at
 * y=265 and 342). clamp() between the statement size and the h2 token is
 * the same mobile step blocks/heading-text/style.css takes: there is no
 * mobile comp, and a four-word headline at 70px is five lines at 375.
 * 1040px is the wide headline cap the hero uses (the Sell Your Business
 * and Industries comps run their 70px lines to ~1000px; this theme's
 * Cormorant cut measures ~4% wider than the designer's).
 */
.cta-band__heading {
	max-width: 1040px;
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(var(--text-statement), 10vw, var(--text-h2));
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
}

.cta-band--align-center .cta-band__heading {
	margin-inline: auto;
}

/*
 * Statement size for a heading that would run past two lines at 70px:
 * 46px Cormorant Bold at the 50px statement pitch, at most ~1000px wide
 * (SPEC-home S02, the intro statement). Same numbers as
 * heading-text--statement.
 */
.cta-band--statement .cta-band__heading {
	max-width: 1000px;
	font-size: clamp(var(--text-h3), 8vw, var(--text-statement));
	line-height: var(--leading-statement);
}

/*
 * The accent phrase is Cormorant Garamond Bold Italic in gold on every
 * background -- the comps use #D8991B at display size on white too
 * (docs/COMPOSITION.md, "Things this plan decides"), and on navy it is
 * the same gold (SPEC-home S04 "maximum value.").
 */
.cta-band__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

/* 20px Regular at the 1.1 pitch, 24px under the headline, inside the
   hero's 720px paragraph column (docs/COMPOSITION.md, Home 1). */
.cta-band__supporting-line {
	max-width: 720px;
	margin: var(--space-md) 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

.cta-band--align-center .cta-band__supporting-line {
	margin-inline: auto;
}

/*
 * Buttons sit 32px under whatever precedes them (the hero's measured
 * gap: headline line box bottom 423, button top 452.7), side by side
 * with a 24px gap; align-items flex-end keeps a plain button level with
 * a micro-text group's button.
 */
.cta-band__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.cta-band--align-center .cta-band__buttons {
	justify-content: center;
}

/*
 * Wraps a button together with its optional micro-text so the caption
 * stacks above just that one button (COMPONENTS.md C5: same "micro-text
 * above it" treatment as C1 Hero) while the group still sits as one item
 * in .cta-band__buttons' row -- only emitted by render.php when this
 * button carries micro_text, so a plain button with none renders with no
 * wrapper at all. Same pattern as blocks/hero/style.css's
 * .hero__button-group.
 */
.cta-band__button-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs);
}

.cta-band--align-center .cta-band__button-group {
	align-items: center;
}

/* 12px Montserrat, the nav label's size, in the band's text colour. */
.cta-band__button-micro {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

/*
 * The comp's button (SPEC-home S00 BOX 316.2x33.0; "START THE
 * CONVERSATION" measures 251px here against the comp's 247-252). 316 is
 * a minimum, not a fixed width: the Sell Your Business and Industries
 * comps draw their longer labels in 364.4-wide boxes, i.e. the box
 * grows with the label, which is what "Get Your Confidential
 * Valuation" needs to stay on one line. Everything else (padding,
 * border, type, the hover fill) is assets/css/base.css's shared
 * .sigma-button rule; on white this block's default already matches it
 * (navy text, gold-bright border), so there is nothing to restate here
 * except the size. The navy band swaps it to white below.
 */
.sigma-button.cta-band__button {
	min-width: 316px;
}

/*
 * On a navy band -- cta-band has no background field of its own; it
 * always nests inside sigma/section, which stamps
 * .sigma-section--bg-<value> onto the ancestor <section>. The comp's
 * navy bands draw white type and white 1.5px outlines (SPEC-home S04
 * BOX stroke #ffffff 1.5px, TEXT #ffffff), the accent stays gold.
 * Heading and paragraph are explicit rather than inherited because the
 * base rules above set `color` directly -- an earlier version left them
 * out and both rendered navy on navy, which QA read as an empty band.
 */
.sigma-section--bg-navy .cta-band__heading,
.sigma-section--bg-navy .cta-band__supporting-line,
.sigma-section--bg-navy .cta-band__button-micro {
	color: var(--color-white);
}

/*
 * Gold border on navy (Roman, 19 Sep). The white outline read as a plain
 * box on a plain band; gold is the accent the rest of the page already
 * uses and it ties the button to the gold phrase in the heading above it.
 * The LABEL stays white: gold on navy measures 6.54:1 and passes, but
 * white is 16.30:1 and this is the band's only call to action.
 *
 * Hover keeps the white fill with navy text -- inverting to gold would
 * put navy on gold at display size, and the fill is what makes the hover
 * state obvious at a glance.
 */
.sigma-section--bg-navy .sigma-button.cta-band__button {
	border-color: var(--color-gold);
	color: var(--color-white);
}

.sigma-section--bg-navy .sigma-button.cta-band__button:not(.sigma-button--unlinked):hover,
.sigma-section--bg-navy .sigma-button.cta-band__button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-white);
	border-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 (blocks/heading-text/style.css
 * makes the same step at the same width).
 */
@media (max-width: 1023.98px) {
	.sigma-button.cta-band__button {
		min-height: 44px;
		height: auto;
	}
}

/*
 * Below 768 the comp geometry has nothing to say (there is no mobile
 * comp): the buttons stack, each takes the full column, and a long
 * label may wrap -- the box grows past 44px rather than overflowing
 * the column. The group wrapper stretches with them so the micro-text
 * stays above its own button.
 */
@media (max-width: 767.98px) {
	.cta-band__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.cta-band__button-group {
		align-items: stretch;
		width: 100%;
	}

	.cta-band--align-center .cta-band__button-group {
		align-items: stretch;
	}

	.sigma-button.cta-band__button {
		width: 100%;
		min-width: 0;
		padding: var(--space-xs) var(--space-sm);
		white-space: normal;
	}
}


/*
 * Bare adjacency: two bands stacked with no sigma/section between them.
 *
 * This block deliberately has no vertical padding of its own -- the
 * section it normally sits inside supplies it (see this file's header).
 * Stack it bare and it collapses to nothing, which is what QA saw on the
 * component showcase: the buttons of one band sitting directly on the
 * navy edge of the next, with no air at all (QA 823).
 *
 * Same shape and same answer as blocks/hero/style.css's two adjacency
 * rules. It cannot touch a real page, where each band is wrapped in its
 * own section and the two are never siblings -- checked across all 26.
 */
.cta-band + .cta-band,
.cta-band + .stats-band,
.cta-band + .stat-band,
.cta-band + .news-resources,
.cta-band + .testimonials {
	margin-block-start: var(--space-2xl);
}