/*
 * Stat grid — tiles that hold the design's height while they are at the design's
 * width, and a shorter stated height once the grid collapses.
 *
 * The case it exists for: a Grid group of small statistic tiles that the design
 * draws at a fixed size — 320x280 here — laid out with `auto-fill`, so the grid
 * drops to one column on a narrow screen. Neither height that suggests itself is
 * right in both states, which is why this is a style and not a number in the
 * Dimensions panel:
 *
 * - **280px everywhere.** Right at two across; at one across the tile is the full
 *   width of the section and still 280px tall, so its two blocks sit ~118px apart
 *   with nothing between them, four times down the page.
 * - **No height at one across.** The tile shrinks to its content, ~166px, and a
 *   626px-wide band 166px tall reads as a strip rather than as a card — the figure
 *   and the caption end up almost touching.
 *
 * So there are two heights, one per state, and the second is stated rather than
 * derived: **14rem sits halfway between the design's 280px and the ~166px the
 * content asks for**, which keeps a visible gap under the figure without turning a
 * full-width tile into a panel. It is a number to taste — tune the two custom
 * properties below, not the rules.
 *
 * They are deliberately two steps and not an interpolation against `cqi`. A
 * smooth ramp between the same endpoints computes to ~278px at the widest
 * single-column tile, which is the first failure above, at the exact width it is
 * worst.
 *
 * **Leave the tiles' own Minimum height control empty.** An inline `min-height`
 * beats this stylesheet at every width, which puts the dead air straight back and
 * cannot be undone from here without `!important`. The height is this style's job;
 * that is what picking the style buys.
 */

.wp-block-group.is-style-stat-grid {
	/*
	 * The query container. It has to be the grid and not the tile, because a
	 * container query never matches the element that declares the containment —
	 * only its descendants — and "how many columns are there" is a fact about the
	 * grid. The tiles are those descendants, which is why the heights below land
	 * on them rather than on `grid-auto-rows` here, where they would read better.
	 *
	 * `inline-size` and not `size`: the grid's height is exactly what its content
	 * decides, and `size` containment would cut that off.
	 *
	 * One consequence worth knowing, because it is silent: inline-size
	 * containment makes this element's `min-content` width zero, so as a flex
	 * item it will now shrink past the width of the widest digits inside it. At
	 * the sizes this is used at there is room to spare — a 320px viewport leaves
	 * a ~208px content box against ~190px of 80px type — but a larger figure or a
	 * larger `h-0` would overflow rather than push the row wider.
	 */
	container-type: inline-size;

	/* The design's tile, and the shorter one it becomes on its own. */
	--kg-stat-tile-height: 17.5rem;
	--kg-stat-tile-height-single: 14rem;
}

.wp-block-group.is-style-stat-grid > * {
	/*
	 * Two classes plus a child selector, so this outranks nothing in particular —
	 * no core rule sets a group's `min-height` — but it stays specific enough that
	 * a tile's own block style can still win.
	 *
	 * On the tiles rather than the row, per the note above. Grid items stretch by
	 * default, so one tile asking for a height makes its whole row that tall and
	 * the others follow; the effect is the same as sizing the row.
	 */
	min-height: var(--kg-stat-tile-height);
}

/*
 * Single column — where the design's height stops describing the tile.
 *
 * **39.25rem is `2 x minimumColumnWidth + blockGap`, and it has to track the
 * grid's own settings.** The pattern lays this grid out with a 19rem column
 * minimum and a 1.25rem gutter, so `auto-fill` fits two tracks down to exactly
 * 39.25rem of grid and one below it. Change either number in the block and this
 * one moves with it, or the tiles change height while still sitting two across —
 * a media query cannot read a custom property, so there is no way to derive it
 * from the layout instead of restating it.
 *
 * Written as `not (min-width: …)` rather than `max-width: 39.24rem`, because a
 * container width is fractional and a `max-width` a hair under the real threshold
 * leaves a band that matches neither state — see the note in the theme skill. The
 * negated form is the same threshold with nothing able to fall between the two.
 *
 * No `@supports` guard: a browser without container queries ignores both this
 * block and the `container-type` above, and keeps the 280px at every width. That
 * is the state this style improves on rather than a broken layout, which is the
 * best thing there is to fall back to.
 */
@container not (min-width: 39.25rem) {
	.wp-block-group.is-style-stat-grid > * {
		min-height: var(--kg-stat-tile-height-single);
	}
}