/**
 * sigma/stat-band (P4 primitive) -- the comps' navy stat band, built to
 * SPEC-home S04 (variant "columns") and SPEC-about-us S02 (variant
 * "grid"). Loaded only where the block renders (block.json "style").
 *
 * Byte-for-byte the same treatment as blocks/stats-band/style.css with
 * this block's own class names -- duplicated rather than shared per
 * CONVENTIONS.md (each block owns its own style.css). Change them
 * together.
 *
 * Self-painting, full-bleed band with its own reading column -- same
 * split as blocks/hero/style.css and assets/css/section.css, for the same
 * reason: the navy runs edge to edge while the words stay in a column.
 * It cannot sit inside sigma/section: the comp's column is 1258px wide
 * (x=91 to x=1349 at 1440), wider than section's 1280px padded box.
 *
 * Geometry, 1 unit = 1 CSS px at 1440, from the extracted spec:
 *   columns  band 622 tall; three boxes 235x455 at x=586/850/1114 (264
 *            pitch), top at band +52; figure line box at box +20 (55px in
 *            the first box, 50px in the rest); caption 30px gold from box
 *            +95; 191px 0.75px rule at box +185; 18px Light body from
 *            +210 with a ~25px line pitch; headline 70px at x=91 with its
 *            line box at band +43 and a 77px pitch; paragraph 20px at 1.1
 *            25px under the headline; 227x33 button 42px under that,
 *            63px above the band's bottom edge.
 *   grid     band 577 tall; 2x2 boxes 282x211 at x=680/1020, rows at band
 *            +51 and +315 (52 between); figure + caption centred in the
 *            box; left column vertically centred; content spans x=135 to
 *            x=1302.
 *
 * Breakpoints: the exact comp geometry needs 1258px of column, so it
 * switches on at 1280 rather than the tokens' 1440 -- a 1440 monitor with
 * a scrollbar is 1425 wide and would otherwise never see the layout it
 * was drawn for. Below that the band stacks (copy above boxes); boxes run
 * three across (columns) / two across (grid) from 768, one across below.
 *
 * Block-scoped custom properties at the top stand in for three values the
 * comp uses that design/tokens.json has no token for -- the 18px box
 * body, its 1.38 leading, and the 40px figure the brief sets for 375.
 * They are defined here rather than added to tokens.json because that
 * file has another owner editing it in this same round; promote them
 * there when it is free.
 */

.stat-band {
	/* Candidates for design/tokens.json -- see header. The mobile headline
	   size is the statement size (46px): 70px is five lines at 375. */
	--stat-band-body-size: 1.125rem;
	--stat-band-body-leading: 1.38;
	--stat-band-figure-mobile: 2.5rem;
	--stat-band-headline-mobile: 2.875rem;
	/* The comp's own column and box dimensions. */
	--stat-band-column: 1258px;
	--stat-band-box-width: 235px;
	--stat-band-box-gap: 29px;

	box-sizing: border-box;
	background-color: var(--color-navy);
	color: var(--color-white);
	padding-block: var(--space-2xl);
}

.stat-band--grid {
	--stat-band-column: 1167px;
	--stat-band-box-width: 282px;
	--stat-band-box-gap: 58px;
}

.stat-band__inner {
	box-sizing: border-box;
	max-width: calc(var(--stat-band-column) + 2 * var(--space-lg));
	margin-inline: auto;
	padding-inline: var(--space-lg);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-xl);
}

@media (min-width: 768px) {
	.stat-band__inner {
		max-width: calc(var(--stat-band-column) + 2 * var(--space-xl));
		padding-inline: var(--space-xl);
	}
}

/* ------------------------------------------------------------------ */
/* Left column                                                          */
/* ------------------------------------------------------------------ */

.stat-band__copy {
	min-width: 0;
}

.stat-band__headline {
	max-width: 440px;
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--stat-band-headline-mobile);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-white);
}

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

/* 25px from the headline's last line box to the paragraph's first
   (1818 -> 1843 in S04); a second paragraph keeps the body pitch. */
.stat-band__paragraph {
	max-width: 440px;
	margin: 25px 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-white);
}

.stat-band__paragraph + .stat-band__paragraph {
	margin-top: var(--space-sm);
}

/* 42px from the paragraph's last line box to the button (1952 -> 1994). */
.stat-band__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-sm);
	margin-top: 42px;
}

.stat-band__headline + .stat-band__buttons {
	margin-top: 41px;
}

.stat-band__button-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: var(--space-xs);
}

.stat-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-white);
}

/*
 * The comp's button: 227x33 outline box, 1.5px white border, 18px
 * uppercase Montserrat Regular, no fill -- assets/css/base.css's shared
 * .sigma-button rule supplies all of that plus the white-on-navy swap
 * (render.php gives every button here the sigma-button--inverse class,
 * so base.css's .sigma-button--inverse rule alone is the colour). What
 * is genuinely this block's own is the size, and it is mobile-first
 * like the rest of this file: full width and a 44px tap target below
 * 1280 (33px is under the touch minimum there), the comp's 227 minimum
 * with the derived 33px height only once the column is wide enough
 * (see the 1280 block below).
 */
.sigma-button.sigma-button--inverse.stat-band__button {
	width: 100%;
	min-height: 44px;
	white-space: normal;
}

/* ------------------------------------------------------------------ */
/* Boxes                                                                */
/* ------------------------------------------------------------------ */

.stat-band__boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
	min-width: 0;
}

@media (min-width: 768px) {
	.stat-band--columns .stat-band__boxes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--stat-band-box-gap);
	}

	.stat-band--grid .stat-band__boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-xl) var(--stat-band-box-gap);
	}
}

.stat-band__item {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-md);
	border: 1.5px solid var(--color-white);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	text-align: center;
}

/* The grid comp centres figure + caption in the short box: the 25,000+
   box (three-line caption) sits its figure 16px higher than the 1,000+
   box (two lines), which is what centring produces. */
.stat-band--grid .stat-band__item {
	justify-content: center;
}

.stat-band__figure {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--stat-band-figure-mobile);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-tight);
	color: var(--color-white);
}

.stat-band__caption {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-sans);
	font-size: var(--text-stat-caption);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-tight);
	/* Rule 4's wording is stored lower-case; the comp sets it "Businesses
	   Sold". Presentation, so the stored copy stays the approved one. */
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--color-gold);
}

.stat-band__rule {
	display: block;
	width: 191px;
	max-width: 100%;
	margin-top: var(--space-md);
	border-top: 0.75px solid var(--color-white);
}

.stat-band__body {
	align-self: stretch;
	margin: var(--space-md) 0 0;
	font-family: var(--font-sans);
	font-size: var(--stat-band-body-size);
	font-weight: var(--weight-sans-light);
	line-height: var(--stat-band-body-leading);
	text-align: left;
	color: var(--color-white);
}

@media (min-width: 768px) {
	.stat-band__headline {
		font-size: var(--text-h2);
	}

	.stat-band__figure {
		font-size: var(--text-stat);
	}

	/* The comp sets the first box's figure a size up (55px), the rest at
	   50px -- in both S04 and S02. Reproduced, not corrected. */
	.stat-band__item:first-child .stat-band__figure {
		font-size: var(--text-stat-lg);
	}
}

/* ------------------------------------------------------------------ */
/* The comp's geometry, from 1280                                       */
/* ------------------------------------------------------------------ */

@media (min-width: 1280px) {
	/* Columns: headline line box at band +43, boxes at +52, band bottom
	   63px under the button -- and never shorter than the comp's 622. */
	.stat-band--columns {
		min-height: 622px;
		padding-block: 43px 63px;
	}

	.stat-band--columns .stat-band__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--space-lg);
		align-items: start;
	}

	.stat-band--columns .stat-band__boxes {
		padding-top: 9px;
		grid-auto-flow: column;
		grid-auto-columns: var(--stat-band-box-width);
		grid-template-columns: none;
		justify-self: end;
	}

	/* Box internals, measured from the box's outer top edge: border 1.5 +
	   padding 18.5 = figure line box at +20; a 75px figure slot puts the
	   caption at +95; two 33px caption lines + 24 = the rule at +185; the
	   body's first line box lands at +210. Side padding 30.5 + border
	   1.5 = the body's left edge 32px in, as the spec places it. */
	.stat-band--columns .stat-band__item {
		min-height: 455px;
		padding: 18.5px 30.5px 30.5px;
	}

	.stat-band--columns .stat-band__figure {
		min-height: 75px;
	}

	.stat-band--columns .stat-band__caption {
		min-height: 66px;
		margin-top: 0;
	}

	/* 191px is wider than the 171px text column between the paddings;
	   the comp draws it that way, so it is allowed into the padding. */
	.stat-band--columns .stat-band__rule {
		max-width: none;
		margin-top: var(--space-md);
	}

	/* Captions get the box's full inner width (232px). Rule 4's wording is
	   longer than the comp's two-word captions -- "Of Asking Price
	   Achieved" only holds to two lines with every pixel between the
	   borders -- and each extra line moves the rule and sentence down. */
	.stat-band--columns .stat-band__caption {
		margin-inline: -30.5px;
	}

	.stat-band--columns .stat-band__body {
		margin-top: var(--space-md);
	}

	/* Grid: boxes at band +51, rows 52 apart, 52 under; the left column
	   floats at the vertical centre of the band. */
	.stat-band--grid {
		min-height: 577px;
		padding-block: 51px 52px;
	}

	.stat-band--grid .stat-band__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--space-lg);
		align-items: center;
	}

	.stat-band--grid .stat-band__boxes {
		grid-template-columns: repeat(2, var(--stat-band-box-width));
		gap: 52px var(--stat-band-box-gap);
		justify-self: end;
		align-self: start;
	}

	/* No side padding, for the same reason as the caption margin above:
	   "Of The Businesses" is 273px at 30px Montserrat, so the 97.5%
	   caption holds to three lines only with the box's full 279px, and
	   three lines is what keeps the row at the comp's 211. */
	.stat-band--grid .stat-band__item {
		min-height: 211px;
		padding: var(--space-sm) 0;
	}

	/* A boxes-only band (no left column) centres its boxes instead. */
	.stat-band:not(.stat-band--with-copy) .stat-band__inner {
		grid-template-columns: auto;
		justify-content: center;
	}

	/* 227 wide for "Our Results" (S04, S02); a longer approved label
	   grows the box rather than wrapping -- the comps never wrap a
	   button label, and the hero's 316 box is the same face wider. */
	.stat-band__button-group {
		align-items: flex-start;
		width: auto;
	}

	.sigma-button.sigma-button--inverse.stat-band__button {
		width: auto;
		min-width: 227px;
		/* Releases the mobile 44px tap floor so the box goes back to the
		   comp's derived height; without this the button stayed 44 tall
		   on desktop while every other button measured 33. */
		min-height: 0;
		white-space: nowrap;
	}
}