/**
 * Stats block — navy section: heading top-left, ring artwork top-right, up to
 * four stats along the bottom. view.js counts the numbers up, draws each ring
 * (a full circle over a faint track) on scroll, and adds `is-complete`, which grows
 * a dark-navy fill out from the rings' centre. Tokens only; reduced-motion safe.
 */

.block-stats {
	--block-stats-bg: var(--wp--preset--color--primary);
	--block-stats-text: var(--wp--preset--color--white);
	--block-stats-accent: var(--wp--preset--color--secondary);
	--block-stats-ring: var(--wp--preset--color--navy-light);
	--block-stats-arc-white: var(--wp--preset--color--white);
	--block-stats-arc-grey: var(--wp--preset--color--gray-400);

	/* Desktop column count, derived from how many stats the section actually holds.
	   The child count includes the heading and the lead paragraph, so the selectors
	   match on the stats themselves. */
	--block-stats-columns: 4;

	position: relative;
	overflow: clip;
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); /* site gutters; the content column centres inside */
	background-color: var(--block-stats-bg);
	color: var(--block-stats-text);
}

/* Dark-navy fill that grows out from the rings' centre (view.js sets
	   --block-stats-cx/cy) once every ring is drawn — a circular clip-path, like the
	   mobile menu. Text and rings keep their colours; only the ground shifts. */

.block-stats::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background-color: var(--wp--preset--color--tertiary);
		clip-path: circle(0% at var(--block-stats-cx, 75%) var(--block-stats-cy, 55%));
		transition: clip-path var(--wp--custom--transition--fill);
	}

/* Complete: the fill expands. */

.block-stats.is-complete::before {
		clip-path: circle(150% at var(--block-stats-cx, 75%) var(--block-stats-cy, 55%));
	}

/* Ring artwork, top-right, behind the content. */

.block-stats__rings {
		position: absolute;
		top: 6%; /* design: the rings start near the top and run down behind the last two stats */
		/* Right edge flush with the content column's right edge. */
		right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--content-size)) / 2));
		width: min(46%, 42rem);
		height: auto;
		z-index: 1;
		opacity: 0.7; /* lets the stats read clearly over the drawn lines */
		pointer-events: none;
		overflow: visible;
	}

.block-stats__ring {
		stroke: var(--block-stats-ring);
	}

/* Drawn circles over the tracks. Flat caps: a round cap paints a dot even at zero
	   length, which would show before the line starts drawing. */

.block-stats__arc {
		stroke-linecap: butt;
	}

/* Inner → outer: lime, grey, lime, white. */

.block-stats__arc--4 {
		stroke: var(--block-stats-arc-white);
	}

.block-stats__arc--2 {
		stroke: var(--block-stats-arc-grey);
	}

.block-stats__arc--1,
	.block-stats__arc--3 {
		stroke: var(--block-stats-accent);
	}

/* Content grid, constrained to the site's content column (the background stays
	   full width). The heading takes its own row above the four stat columns. */

.block-stats__content {
		position: relative;
		z-index: 2;
		max-width: var(--wp--style--global--content-size);
		margin-inline: auto;
		/* Inset the stats ~10% each side on wide screens, ramping to 0 at 1200px and below. */
		padding-inline: clamp(0px, (100vw - 1200px) / 2, 10%);
		display: grid;
		/* Columns track the stat count so a three- or two-stat section fills the row
		   instead of leaving an empty column on the right. Four is the design max. */
		grid-template-columns: repeat(var(--block-stats-columns, 4), minmax(0, 1fr));
		-moz-column-gap: var(--wp--preset--spacing--40);
		     column-gap: var(--wp--preset--spacing--40);
		row-gap: var(--wp--preset--spacing--90);
		align-items: start; /* stats share a top edge; captions may differ in length */
		align-content: space-between;
		min-height: clamp(32rem, 70vh, 56rem);
	}

/* design: heading sits high, stats low, rings between */

.block-stats__content > .wp-block-heading {
			grid-column: 1 / -1; /* its own row */
			max-width: 18em;
			align-self: start;
			margin: 0;
			color: var(--block-stats-text);
			font-size: var(--wp--preset--font-size--h-3);
			font-weight: var(--wp--custom--font-weight--normal);
			line-height: var(--wp--custom--line-height--tight);
		}

.block-stats__content > p {
			grid-column: 1 / -1;
			max-width: 46em;
		}

/* Lead paragraph directly under the heading: the two read as one unit, so
		   pull it back out of the 90px row-gap that's there to separate the heading
		   from the stats row below. Declared after `> p` to win on equal specificity. */

.block-stats__content > .wp-block-heading + p {
			margin-top: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--90));
		}

/* Two or three stats: narrow the grid so they span the content column evenly rather
   than clustering left against an empty fourth column. Four stats keep the default.
   Counted with nth-last-of-type among the stats themselves — the heading and optional
   lead paragraph come first, so their number must not shift the match. */

.block-stats:has(.block-stats__content > .block-stat:nth-last-of-type(2):first-of-type) {
	--block-stats-columns: 2;
}

.block-stats:has(.block-stats__content > .block-stat:nth-last-of-type(3):first-of-type) {
	--block-stats-columns: 3;
}

/* One statistic. */

.block-stat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
}

.block-stat__value {
		color: var(--block-stats-accent);
		font-size: var(--wp--preset--font-size--h-2);
		font-weight: var(--wp--custom--font-weight--normal);
		line-height: var(--wp--custom--line-height--none);
		letter-spacing: var(--wp--custom--letter-spacing--tight);
		font-variant-numeric: tabular-nums;
	}

.block-stat__body {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--15);
		max-width: 26ch;
	}

.block-stat__body > p {
			margin: 0;
		}

/* Editor: rings stay at rest; arcs fully drawn so authors see the artwork. */

.block-stats.is-editing .block-stats__rings {
		top: var(--wp--preset--spacing--40);
	}

@media (max-width: 1024px) {
	.block-stats {
		padding-block: var(--wp--preset--spacing--60);
	}

		/* Stacked, the section is much taller than it is wide, and the rings read
		   as a watermark behind the whole thing rather than a corner motif. Centre
		   them on the section and let them run past its edges. */
		.block-stats__rings {
			top: 50%;
			right: auto;
			left: 50%;
			width: min(150%, 46rem);
			transform: translate(-50%, -50%);
			/* Centred behind the content rather than tucked in a corner, so the
			   lines sit under the stats — keep them fainter than on desktop. */
			opacity: 0.3;
		}

		.block-stats__content {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			row-gap: var(--wp--preset--spacing--50);
			min-height: 0;
		}

			.block-stats__content > .wp-block-heading,
			.block-stats__content > p {
				grid-column: 1 / -1;
			}
}

@media (max-width: 600px) {
	.block-stats__content {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.block-stats::before {
		transition: none;
	}
}


/*# sourceMappingURL=style-index.css.map*/