/*
 * Subgrid Rows (`is-style-subgrid-rows` on a `core/group` with a grid layout).
 *
 * Equal-height cards are not aligned cards. A grid already stretches every child
 * to its row, so a row of cards is one height — but each card lays its own
 * contents out independently, so the moment one card's copy runs to three lines
 * and its neighbour's to two, their titles sit at different heights and the row
 * reads as ragged. Nothing about the card is wrong; they simply do not share a
 * ruler.
 *
 * This gives them one. Each child becomes a subgrid over the same three rows of
 * the parent, so "the icon row", "the title row" and "the copy row" are the same
 * three bands for every card in the band, whatever is typed into them.
 *
 * ## Three rows, and each child needs three things in it
 *
 * `--kg-subgrid-rows` is the span, defaulting to 3, so a child with a different
 * number of stacked parts can set it without a second style. The rows themselves
 * are the parent's implicit ones — core's grid layout writes no
 * `grid-template-rows` unless `rowCount` is set — so every row is `auto`: as tall
 * as the tallest thing any child puts in it. That is the whole alignment
 * mechanism, and it is why nothing here sizes a row.
 *
 * **The child's height has to come from its contents, not from a `min-height`.**
 * See the section below: a subgrid item's own `min-height` is inert. A design that
 * draws a tall, airy card therefore states the air — a margin under the icon, say
 * — rather than the total. That is worth doing anyway: it survives the copy
 * growing, and it is the one form that gives the same result whether or not this
 * style is applied.
 *
 * ## Gutters come from the parent, always
 *
 * A subgrid ignores its own `gap` in the subgridded axis and inherits the parent
 * grid's. So the space between a card's title and its copy is the *row* gap of
 * this group — set it here, on the group, not on the text block inside the card.
 * The card's own `blockGap` still governs the fallback below, so the two want to
 * agree; `patterns/features-icon-cards.php` sets both to the same token.
 *
 * That is also why the parent's `blockGap` has to be **axial** — a row gap for
 * the space inside a card and a column gap for the gutter between cards are two
 * different numbers here. An axial gap is safe on a grid that sizes its columns
 * from `minimumColumnWidth` alone; it is *not* safe once `columnCount` is also
 * set, because core then substitutes the joined two-value string into the column
 * arithmetic and drops the whole `grid-template-columns` declaration. The
 * kg-theme skill has that one in full.
 *
 * ## Why the whole thing is inside `@supports`
 *
 * `grid-template-rows: subgrid` is the only declaration here a browser can refuse,
 * and refusing it alone would be worse than refusing all of it: `display: grid`
 * and `grid-row: span 3` would still apply, and the card would become a plain
 * three-row grid with its contents piled at the top and the `min-height` showing
 * as dead space underneath. Guarding the whole block means a browser without
 * subgrid keeps the card's own flex layout — which is the design, just without the
 * cross-card alignment. The enhancement is additive or it is absent; it is never
 * half-applied.
 *
 * ## A subgrid item's `min-height` is inert, and its padding is not its own
 *
 * A subgrid item's box **is** its tracks. Chrome resolves a spanning subgrid
 * item's `padding` *into* the first and last rows rather than adding to them, and
 * ignores its `min-height` altogether: a card with `padding: 2.5rem` and
 * `min-height: 20rem` measured **272px, not 320** — the 40px top padding sharing
 * row 1 with the icon, the bottom padding sharing row 3 with the paragraph, and
 * the `min-height` doing nothing whatever. `height` instead of `min-height`,
 * `align-self: stretch`, and a `min-height` on the grid itself all measured the
 * same 272. A minimum on a flexible row does move it, but that number has to
 * encode the child's padding and whatever sits in row 1, so it drifts the moment
 * either changes.
 *
 * The fix is not a workaround: **state the air, not the total.**
 * `patterns/features-icon-cards.php` gives its icon a bottom margin — the 80px the
 * design draws between the icon and the title — instead of giving the card a
 * height, and the card then measures the design's 320 by adding up. It also
 * measures 320 with this style *off*, which is the real test: the enhancement
 * changes what lines up, not what anything is worth.
 *
 * ## One flat level of children, not two
 *
 * Each child needs its three parts as its own three children. Wrapping two of
 * them in a group and subgridding that as well does work, but core writes a
 * `default` layout's `blockGap` as `margin-block-start` on the second child, and
 * a margin *adds* to the row gap it now sits in — the title-to-copy gap came out
 * at 32px against the design's 16, from two 16s nobody wrote twice. Flattening the
 * card to icon, heading, paragraph puts every gap in the parent's hands, which is
 * where a subgrid's gaps live anyway.
 *
 * That also decides the child's own layout: with three children and no wrapper,
 * a `space-between` vertical flex would strand the heading in the middle whenever
 * this style is absent, so the card stacks from the top and lets the icon's margin
 * be the air. Both paths then agree exactly.
 */

@supports (grid-template-rows: subgrid) {
	.wp-block-group.is-style-subgrid-rows {
		> * {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span var(--kg-subgrid-rows, 3);

			/*
			 * Rows are the parent's implicit `auto` ones, so each is as tall as the
			 * tallest thing any child puts in it. Without `start`, a child whose
			 * own content is shorter than that stretches to fill the row — a
			 * paragraph of one line inside a row sized for three, which then
			 * centres its text and undoes the alignment this style exists for.
			 */
			align-items: start;
		}
	}
}