/**
 * sigma/stats-band (C2 Proof bar) -- 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").
 *
 * 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.
 */

.stats-band {
	/* Candidates for design/tokens.json -- see header. The mobile headline
	   size is the statement size (46px): 70px is five lines at 375. */
	--stats-band-body-size: 1.125rem;
	--stats-band-body-leading: 1.38;
	--stats-band-figure-mobile: 2.5rem;
	--stats-band-headline-mobile: 2.875rem;
	/* The comp reserves 90px between the caption's top and the rule --
	   measured from its three boxes, whose rules sit within a pixel of
	   each other at y=1705 under captions of one, two and three lines.
	   Our captions wrap differently at this type size, so the reservation
	   is what keeps the three rules level rather than the line count. */
	--stats-band-caption-line: 33px;
	/* The comp's own column and box dimensions. */
	--stats-band-column: 1258px;
	--stats-band-box-width: 235px;
	--stats-band-box-gap: 29px;

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

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

.stats-band__inner {
	box-sizing: border-box;
	max-width: calc(var(--stats-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) {
	.stats-band__inner {
		max-width: calc(var(--stats-band-column) + 2 * var(--space-xl));
		padding-inline: var(--space-xl);
	}
}

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

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

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

.stats-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. */
.stats-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);
}

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

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

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

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

.stats-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.stats-band__button {
	width: 100%;
	min-height: 44px;
	white-space: normal;
}

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

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

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

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

.stats-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. */
.stats-band--grid .stats-band__item {
	justify-content: center;
}

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

/*
 * The caption gets a fixed band rather than its own height, so the rule
 * under it and the sentence under that land at the same y in all three
 * boxes however many lines the caption runs to.
 *
 * The comp is unambiguous about this: its three rules sit at y=1705.1,
 * 1705.5 and 1705.8 -- under a two-line caption, a one-line caption and a
 * three-line one. It reserves 90px between the caption's top and the
 * rule and lets short captions leave the slack empty. Without it the
 * third box, whose caption wraps to four lines at our type size, pushes
 * its rule and sentence 66px below the other two and the row reads as
 * broken.
 *
 * min-height, not height: below 768 the boxes stack, type steps down and
 * a caption may still need more room than the reservation. Then it takes
 * it, and the boxes are no longer side by side for the difference to
 * show.
 */
.stats-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);
}

.stats-band__rule {
	display: block;
	/* The comp draws the rule wider than the text column between the
	   paddings, so it is allowed to sit in the padding -- but never past
	   the box. A plain width wins over max-width whenever the box is
	   narrower than 191px, which is every width below the comp's own
	   column: at 768 the rule and the sentence under it crossed the right
	   border by 11px. min() takes the smaller of the two outright. */
	width: min(191px, 100%);
	max-width: 100%;
	margin-top: var(--space-md);
	border-top: 0.75px solid var(--color-white);
}

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

@media (min-width: 768px) {
	/*
	 * Once the boxes are side by side, the rule and the sentence under it
	 * are pinned to the bottom of each box so they line up across the row
	 * whatever height the caption above them takes.
	 *
	 * The comp gets this for free -- its captions are two words, so they
	 * all wrap the same and its three rules sit within a pixel of each
	 * other at y=1705. Rule 4 replaced that wording with the seller
	 * outcomes, and "Of The Businesses We Take To Market Sell" runs to
	 * four lines against the others' two. Reserving a fixed caption
	 * height only holds at one width, because the wrap changes with the
	 * column; pushing from the bottom holds at every width.
	 *
	 * margin-top: auto on the rule eats the slack, so a short caption
	 * leaves the gap above the rule empty -- which is what the comp does.
	 */
	/*
	 * Each box lays its four parts on the same four-row grid, and the rows
	 * take their height from the tallest box in the row because the boxes
	 * are subgrid items of one shared grid. That puts the rule and the
	 * sentence at the same y in all three whatever the caption above them
	 * does, at every width, rather than depending on the caption wrapping
	 * to the same number of lines in each.
	 *
	 * The comp gets the same result for free: its captions are two words,
	 * so all three wrap identically and its rules sit within a pixel of
	 * each other at y=1705. Rule 4 replaced that wording with the seller
	 * outcomes, and "Of The Businesses We Take To Market Sell" is four
	 * lines against the others' two.
	 *
	 * Fallback for no subgrid: margin-top: auto still pushes the rule to
	 * the bottom of its own box, which lines the row up wherever the boxes
	 * are equal height -- everything except the narrowest column.
	 */
	.stats-band--columns .stats-band__item {
		display: grid;
		grid-template-rows: auto auto auto auto;
		align-content: start;
	}

	.stats-band--columns .stats-band__rule {
		margin-top: auto;
	}

	@supports (grid-template-rows: subgrid) {
		.stats-band--columns .stats-band__boxes {
			grid-template-rows: auto;
		}

		.stats-band--columns .stats-band__item {
			grid-row: span 4;
			grid-template-rows: subgrid;
		}
	}

	.stats-band--columns .stats-band__caption {
		padding-bottom: var(--space-md);
	}

	/* Below 1024 the boxes are narrow while the caption is still at full
	   size, so the longest one wraps far further than the comp's two-word
	   captions ever did. A step down keeps it to four lines; the figures,
	   which are what the band exists to show, keep their size. */
	@media (max-width: 1023px) {
		.stats-band--columns .stats-band__caption {
			font-size: var(--text-box-heading);
		}
	}

	.stats-band__headline {
		font-size: var(--text-h2);
	}

	.stats-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. */
	.stats-band__item:first-child .stats-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. The comp's own band measures 622 and its
	 * cards 455, and both numbers were held literally here until QA
	 * measured what they do to OUR copy: the comp's card carries eight
	 * body lines, the Copy Master's carries four to five, so a 455px
	 * card ran 100-166px of empty space under its last line and the
	 * 622px band left the copy column 43px from the top and 359px from
	 * the bottom on Home. The comp's absolute heights are a consequence
	 * of the comp's placeholder text; its PROPORTION -- a card that
	 * holds its content in the comp's paddings, a copy column balanced
	 * against the boxes -- is the part that survives a copy change. So
	 * the padding, the figure/caption slots and every internal offset
	 * below stay exactly as measured, and only the two outer floors go.
	 */
	.stats-band--columns {
		padding-block: 43px 63px;
	}

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

	/* The boxes keep the comp's top alignment (band +52 via the 9px
	   below); the copy column centres against them instead of hanging
	   from the top edge. */
	.stats-band--columns .stats-band__copy {
		align-self: center;
	}

	.stats-band--columns .stats-band__boxes {
		padding-top: 9px;
		grid-auto-flow: column;
		grid-auto-columns: var(--stats-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. */
	.stats-band--columns .stats-band__item {
		padding: 18.5px 30.5px 30.5px;
	}

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

	/* Four lines, not the comp's two. The comp reserves 66px here because
	   its own captions are two words ("Successful Closings"); Rule 4
	   replaced them with the seller-outcome wording, and "Of The
	   Businesses We Take To Market Sell" runs to four lines in the same
	   232px box. Reserving the tallest caption's height keeps all three
	   rules and sentences on one line across the row, which is what the
	   comp achieves -- its three rules sit within a pixel of each other at
	   y=1705 under captions of differing length. Short captions leave the
	   slack above the rule empty, exactly as the comp does. */
	.stats-band--columns .stats-band__caption {
		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 -- but
	   only as far as the box's own inner edge. Below the comp's column
	   width the box is narrower than 191px and the rule, and the sentence
	   that inherits its width, crossed the right border by 11px at 768.
	   margin-top stays auto (set at 768) so the rule keeps sitting on the
	   box's bottom edge. */
	.stats-band--columns .stats-band__body {
		max-width: 100%;
	}

	/*
	 * The caption stays inside the box.
	 *
	 * It used to be pulled 30.5px out on each side, into and past the
	 * border, to buy width so Rule 4's longer wording would still hold to
	 * two lines -- back when an extra line pushed the rule and sentence
	 * down and broke the row. Subgrid handles that now, so the width grab
	 * bought nothing and cost the thing you can actually see: the text
	 * crossed the box's right edge by 18px.
	 *
	 * A step down in size does the same job honestly. The figure above is
	 * what carries the band; the caption labels it.
	 */
	.stats-band--columns .stats-band__caption {
		font-size: var(--text-box-heading);
	}

	.stats-band--columns .stats-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. */
	.stats-band--grid {
		min-height: 577px;
		padding-block: 51px 52px;
	}

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

	.stats-band--grid .stats-band__boxes {
		grid-template-columns: repeat(2, var(--stats-band-box-width));
		gap: 52px var(--stats-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. */
	.stats-band--grid .stats-band__item {
		min-height: 211px;
		padding: var(--space-sm) 0;
	}

	/* A boxes-only band (no left column) centres its boxes instead. */
	.stats-band:not(.stats-band--with-copy) .stats-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. */
	.stats-band__button-group {
		align-items: flex-start;
		width: auto;
	}

	.sigma-button.sigma-button--inverse.stats-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;
	}
}

/* The Home document sets one phrase of the stats paragraph -- "clear path"
   -- in bold italic. Same colour as the paragraph around it; only weight
   and slant change. */
.stats-band__emphasis {
	font-style: italic;
	font-weight: var(--weight-sans-bold);
}