/*
 * Aligned cards — one set of rows shared by every card in a Grid group, so the
 * icon, the heading and the copy sit on the same lines across the whole row.
 *
 * The case it exists for: a row of cards whose headings are not all the same
 * length. `patterns/equipment-advantages.php` draws four, and two of them wrap to
 * a second line at the design's own width — so without this, two paragraphs start
 * 29px lower than the other two and the row reads as four unrelated cards rather
 * than as one comparison. Stretching the cards to a common height, which the grid
 * already does, fixes the outside of the card and not the inside.
 *
 * `subgrid` is the only thing that fixes the inside, because it is the only way
 * one card's heading can be sized by another card's heading. Each card opts its
 * three blocks into the parent grid's own rows, so a row is as tall as the
 * tallest heading in it and every card's copy starts under that.
 *
 * ## The chain, and why it is two levels
 *
 * The cards' blocks are an Icon and then a Group holding the heading and the
 * paragraph — three things to align, in two levels of nesting. So the card takes
 * three of the parent's rows and passes the last two down to that inner Group,
 * which takes them and puts the heading in one and the paragraph in the other.
 * A `subgrid` chain has to be unbroken: an ordinary `display: block` anywhere in
 * it ends the alignment there, which is why the inner Group is named in a rule of
 * its own rather than reached by a descendant selector.
 *
 * `grid-row: span 3` / `span 2` and no line numbers, so the rows are wherever
 * auto-placement puts them. That is what lets the grid reflow: four cards across
 * take rows 1–3, and the fifth card, or the fourth once the grid is three across,
 * starts a fresh band at rows 4–6 with its own three heights. Naming lines would
 * pin every card to the first band and stack them all on top of each other.
 *
 * ## The vertical rhythm becomes the grid's, and that is the trade
 *
 * In a subgridded axis a subgrid's own `gap` is ignored and the parent grid's is
 * used, so **the one `row-gap` on the grid is now the gap between every pair of
 * rows inside every card** — and the design has two different ones: 48px under
 * the icon, 24px between the heading and its paragraph.
 *
 * The smaller of the two wins the gutter, and the icon's row carries the
 * difference as padding. So the heading-to-paragraph gap is exactly the design's
 * at every width, and the icon's is exactly the design's at every width, and
 * neither is a hand-tuned length — the padding is one token minus the other, both
 * of them fluid, and `xxl` is larger than `lg` at every viewport so it never goes
 * negative.
 *
 * What it costs is the **row** gutter between two bands of cards, which becomes
 * `lg` (24px) where the block's own Block spacing would have put the design's
 * 20px. Bands only exist once the grid has wrapped, which is a state the design
 * does not draw, and 4px of extra air between two rows of cards is the right
 * direction to be wrong in. The column gutter is untouched, so cards side by side
 * still sit on the design's 20px.
 *
 * ## Set the cards' Block spacing to none
 *
 * The rows are the only vertical spacing here. A card that also carries a Block
 * spacing gets core's flow margin *on top of* its row gap — 48px of gutter and
 * 48px of margin under the icon — so the pattern states `blockGap: 0` on both the
 * card and its inner Group, which is what silent failure 20 in the theme skill
 * asks for. The reset below is belt and braces for a card built by hand: at three
 * classes plus a child selector it beats core's layout CSS (one class) outright
 * rather than on stylesheet order, which is the condition that makes
 * out-specifying core safe here where it usually is not.
 */

.wp-block-group.is-style-aligned-cards {
	/*
	 * The two gaps inside a card, as the design draws them. Change these rather
	 * than the rules: the padding below is derived from both.
	 */
	--kg-aligned-cards-icon-gap: var(--wp--preset--spacing--xxl);
	--kg-aligned-cards-text-gap: var(--wp--preset--spacing--lg);

	/*
	 * The gutter for every row the cards share, per the note above. `row-gap`
	 * only, so the block's own Block spacing keeps the column gutter — two
	 * classes, so this outranks the `gap` core writes for that spacing (one).
	 */
	row-gap: var(--kg-aligned-cards-text-gap);
}

.wp-block-group.is-style-aligned-cards > * {
	/* The card: three of the grid's rows — icon, heading, copy. */
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
}

.wp-block-group.is-style-aligned-cards > * > :nth-child(2) {
	/* The Group holding the heading and the paragraph: the last two of them. */
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

.wp-block-group.is-style-aligned-cards > * > :first-child {
	/*
	 * The icon's row carries what the shared gutter is short of the design's gap
	 * under it. Padding and not margin because it is space *inside* the row the
	 * cards align on, and because no layout rule anywhere touches padding.
	 */
	padding-block-end: calc(
		var(--kg-aligned-cards-icon-gap) - var(--kg-aligned-cards-text-gap)
	);
}

.wp-block-group.is-style-aligned-cards > * > *,
.wp-block-group.is-style-aligned-cards > * > * > * {
	/* See "Set the cards' Block spacing to none" above. */
	margin-block: 0;
}