/* --- Stats band ---
   A separate file rather than a section of style.css because two places need
   it: the front end, where it is appended to the theme stylesheet so it costs
   no extra request, and the plugin's settings screen, which renders a live
   preview of the band as you configure it. Both enqueues are in inc/assets.php.
   Keep it free of anything that assumes the front end — no `body` classes, no
   `.wp-site-blocks` — because in wp-admin none of that exists.

   Rendered by [moca_stats] in moca365-core. The plugin owns the figures and
   emits structure only; everything below is the theme's, so switching the band
   off in Settings or swapping the theme leaves the other side intact.

   Named `moca-metrics` while the feature is called stats, and that mismatch is
   deliberate. `.moca-stats` was a different component here — a dark four-up
   trust band, since removed because nothing ever referenced it — and its
   `display: grid` silently took this card over while both names existed. The
   selector stays distinct so any markup still carrying the old class, in a post
   revision or added by hand on a live site, cannot pick these styles up.

   Two selectors with different jobs: `.moca-metrics` is the card, and works
   wherever the shortcode is dropped; `.moca-metrics-band` is the section
   wrapper in the page content and carries only the overlap onto the hero
   above it. */

/* A query container, so the figures lay themselves out from the width of
   THIS card rather than the width of the window. The two are not the same
   thing: the settings screen renders the band in a column a few hundred pixels
   narrower than the viewport, and viewport media queries handed that column the
   full-width four-across rule — which it could only fit three of, so it wrapped
   3+1. Anything that keys on the card's own width belongs in an @container
   block; only the hero overlap at the bottom of this file is genuinely a
   page-level question. */
.moca-metrics {
	container-type: inline-size;
	background: #fff;
	border-radius: var(--wp--custom--radius--lg, 16px);
	box-shadow: 0 18px 40px rgba(43, 43, 51, 0.1);
	padding: 1.5rem 1rem;

	/* Not inherited: there is no global border-box reset in this theme, and the
	   1180px max-width comes from WordPress's constrained layout. Without this
	   the padding is added to it and the card renders 1212px — wider than every
	   other band on the page by exactly its own padding. */
	box-sizing: border-box;
}

/* Column counts are stepped by hand rather than left to auto-fit alone, which
   takes however many tracks fit — for four figures at some widths that is
   three, plus a lone fourth on the next row. Right, and an orphan. These steps
   only ever divide four evenly: 1, then 2x2, then one row of four.

   The thresholds are container widths, and a container query measures the
   content box — so they are inner widths, with the card's own padding already
   taken off. Two 210px tracks need 420, four need 840; each threshold sits just
   clear of its figure. */
.moca-metrics__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem 0;
}

@container (min-width: 440px) {

	.moca-metrics__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.75rem 0;
	}
}

@container (min-width: 860px) {

	/* auto-fit, not repeat(4, 1fr): the band takes one to four figures, and a
	   fixed four would leave a stretched empty column when an editor clears a
	   row. auto-fit collapses the track it does not fill. Four items always fit
	   one row at this width, so it cannot reintroduce the orphan. */
	.moca-metrics__list {
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 0;
	}

	/* `+` separates siblings, not columns. Once the grid wraps, this rule
	   follows item 2 onto the next row and hangs a divider down its left edge
	   with nothing beside it. It is only correct while the grid is one row, so
	   it lives in this query and nowhere else. */
	.moca-metrics__item + .moca-metrics__item {
		border-left: 1px solid #e7eaf0;
	}
}

.moca-metrics__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-inline: 1.5rem;
	min-width: 0;
}

.moca-metrics__icon {
	flex-shrink: 0;
	display: flex;
	color: var(--wp--preset--color--blue, #3356a3);
}

.moca-metrics__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.moca-metrics__value {
	font-size: var(--wp--preset--font-size--4-xl);
	font-weight: 200;
	line-height: 1.15;
	color: var(--wp--preset--color--blue, #3356a3);
	overflow-wrap: break-word;

	/* Asks for fixed-width digits during the count-up. Measured: this currently
	   does NOTHING — the bundled Raleway woff2 files carry no `tnum` feature,
	   so "111" renders 37.95px against "888" at 46.39px and the rendered bytes
	   are identical with and without this line. It is kept because it is the
	   correct declaration and starts working the day the font is subset with
	   the feature included; it is not what stops the jitter today. app.js pins
	   the element's width for the duration instead. */
	font-variant-numeric: tabular-nums;
}

/* Carries the final figure for assistive tech while the visible one is still
   counting, and is removed the moment it lands. Needed because a screen-reader
   user arrives at the band exactly when the animation is triggered — the
   observer fires on the scroll that brings it into view — so without this they
   would be read a number caught mid-count. Not `.screen-reader-text`: WordPress
   only defines that on the front end for the skip link, and an unstyled copy
   would be a visible duplicate. */
.moca-metrics__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The long-value variant. Set by the plugin when the figure is more than 12
   characters, which is the point at which display size stops reading as a
   number and starts reading as a squeezed sentence. */
.moca-metrics__value--text {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.25;
}

.moca-metrics__label {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	color: var(--wp--preset--color--gray, #6b7080);
}

/* Same rotating accent, same order, as the value cards below — foundation,
   magenta, extensions, evo. Reused rather than reinvented so a band of four
   stats and a row of four cards do not disagree about what colour position
   three is. */
.moca-metrics__item:nth-child(4n+1) .moca-metrics__icon {
	color: var(--wp--preset--color--foundation, #1f52ff);
}

.moca-metrics__item:nth-child(4n+2) .moca-metrics__icon {
	color: var(--wp--preset--color--magenta, #a13876);
}

.moca-metrics__item:nth-child(4n+3) .moca-metrics__icon {
	color: var(--wp--preset--color--extensions, #34c01c);
}

.moca-metrics__item:nth-child(4n+4) .moca-metrics__icon {
	color: var(--wp--preset--color--evo, #911cc0);
}

.moca-metrics-band {
	padding-inline: 1.5rem;
}

/* Switching the band off in Settings empties the section but does not remove
   it — the wrapper lives in the page content, and the shortcode returning ''
   leaves wpautop's empty <p> behind. Left alone it still carried the -4rem
   overlap below, which pulled the next section up into the hero: the two
   overlapped by 40px, and because a cover block is positioned and the section
   after it is not, the hero painted over the top of it. The result was a strip
   of hero image where the page background should be.

   The <p> comes from core's own render_block_core_shortcode(), which is
   literally `return wpautop( $content )` — not from the_content, whose wpautop
   do_blocks() unhooks for block content. Worth naming precisely, because
   "wpautop does not run on blocks" is true in general and wrong here.

   Matched on the card rather than on emptiness: :has() holds whether or not
   anything is left inside the section, and :empty would not. */
.moca-metrics-band:not(:has(.moca-metrics)) {
	display: none;
}

/* The one genuinely page-level rule here, and the reason it stays a viewport
   media query: it straddles the hero's lower edge, and whether there is a hero
   above to straddle is a fact about the page, not about how wide this card is.
   Below the breakpoint the band is a tall stack, not a strip, and pulling
   that up over a hero whose CTAs are already near the bottom would cover them.

   Nothing in here may touch .moca-metrics's own padding: the container query
   above measures its content box, so changing the padding would change the
   answer to the query that laid it out. */
@media (min-width: 1000px) {

	/* :has(.moca-metrics) belt-and-braces alongside the display:none above —
	   the overlap is a statement about a card that exists, and should never be
	   one rule away from being applied to an empty box again. */
	.moca-metrics-band:has(.moca-metrics) {
		margin-block-start: -4rem;
		position: relative;
		z-index: 2;
	}
}