/*
 * Step timeline — numbered-in-spirit steps in one row, joined by a rule that
 * runs between the markers' centres, and the same steps as a plain grid of
 * cards once that row stops fitting.
 *
 * The case it exists for: a five-step "how this works" strip, each step a
 * circular icon marker over a heading and a line of copy, with a hairline
 * connecting the first marker to the last. Three things make it a style rather
 * than block settings:
 *
 * - **The rule is drawn per step, not once for the row.** The design's line runs
 *   from the first marker's centre to the last, which is the row's width minus
 *   one column — a number no block setting can express, and one that changes
 *   with the column count. Each step except the first therefore reaches back to
 *   the step before it, and the row's total is whatever those add up to.
 * - **The rule stops at the markers instead of passing behind them.** The design
 *   draws one continuous line under five opaque discs; painted as the gaps
 *   between the discs it looks identical and depends on nothing — no paint order,
 *   no opaque marker, no stacking context. See the rule itself for what the
 *   faithful version cost.
 * - **The row is one row.** Five equal columns is not a Grid-layout setting that
 *   survives a sixth step or a narrow screen, and the wrap it would do at the
 *   ends leaves an orphan step with a rule pointing into empty space.
 *
 * Class-activated: a Group with five children is not, on its own, a timeline.
 *
 * **The Group this goes on needs its own `blockGap` set to `0`.** The gaps below
 * are the grid's, but core still treats the block as a flow layout and writes
 * `> * + * { margin-block-start: <blockGap> }` from theme.json — margins the grid
 * honours, and only on the steps after the first. Out-specifying that rule from
 * here is a coin toss on stylesheet order, so the block states `0` and there is
 * nothing to beat; `patterns/quote-builder.php` does, and says why.
 *
 * No dependency on core's `wp-block-group` handle for cascade order — that
 * handle is not registered during the pass that collects the editor canvas's
 * styles, and WP_Dependencies drops an item whose dependency it cannot resolve
 * without saying so, which would load this sheet on the front end and silently
 * not in the editor. Nothing in core sets these properties on a Group, so there
 * is no order to keep.
 */

.wp-block-group.is-style-step-timeline {
	/*
	 * The design's step: a 240px column with 35px of air beside it, and copy
	 * held to 200px inside that column. The gap is the one number here that is
	 * *derived* rather than drawn — the design distributes five 240px steps
	 * across the 1340px wide layout, so (1340 - 5 x 240) / 4 = 35 — which is
	 * also why it is stated rather than taken from the spacing scale: it is what
	 * makes the five columns land on exactly the widths Figma drew.
	 */
	--kg-step-column: 15rem;
	--kg-step-gap: 2.1875rem;
	--kg-step-marker: 3rem;
	--kg-step-measure: 12.5rem;

	display: grid;

	/*
	 * The wrapped state, and the base rule because it is the one that has to
	 * hold at every width: as many designed-width columns as fit, each free to
	 * grow into what is left over. At the wide layout's own 1340px that is
	 * exactly the five the design draws; below it the count falls away on its
	 * own, and mostly skips four — a five-step row that wraps to 4 + 1 leaves a
	 * single step stranded on the second line, and the widths here go 5 → 3 → 2
	 * → 1 for most of the range.
	 */
	grid-template-columns: repeat(auto-fit, minmax(var(--kg-step-column), 1fr));
	column-gap: var(--kg-step-gap);
	row-gap: var(--wp--preset--spacing--xxl);
}

/*
 * One row with the rule, above the theme's tablet width.
 *
 * A media query and not a container query, unlike `group-stat-grid.css`: the
 * timeline is a section-width row, so the width it responds to *is* the
 * viewport, filtered through `wideSize`. The stat grid sits beside a headline in
 * a Columns block, where the viewport says nothing useful about the space the
 * grid got. 72rem is `settings.viewport.tablet`, the same threshold
 * `media-text.css` stacks its two columns at, so a page's sections change shape
 * together rather than one at a time. At that width the wide layout is ~1060px,
 * which leaves each of the five columns ~184px — narrower than the design's 240,
 * still wide enough for a two-word heading at `sh-1`.
 */
@media (width > 72rem) {
	.wp-block-group.is-style-step-timeline {
		/*
		 * `grid-auto-flow: column` rather than `repeat(5, …)`: the count comes
		 * from the number of steps, so a sixth step widens the row instead of
		 * wrapping under it — and nothing can wrap here, which is what makes the
		 * rule below safe to draw unconditionally. The explicit template has to
		 * be cleared for the implicit columns to be the ones used.
		 */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	/*
	 * The design's 200px measure inside the 240px step. Only here: in the
	 * wrapped state the step is as wide as a third of the section or more, and
	 * a 200px column of copy under a full-width heading reads as a mistake
	 * rather than as a measure.
	 */
	.wp-block-group.is-style-step-timeline p {
		max-inline-size: var(--kg-step-measure);
		margin-inline: auto;
	}

	/*
	 * The measure is `quote-builder.php`'s design, not the timeline's: that
	 * section holds its copy to 200px inside a 240px step, where
	 * `distributor-process.php`'s design runs its four paragraphs the full
	 * width of a 310px column. The opt-out is an *additional* class rather
	 * than a change to the rule above, so every step timeline already saved
	 * into a page keeps the measure it was drawn with.
	 */
	.wp-block-group.is-style-step-timeline.kg-steps-full-copy p {
		max-inline-size: none;
	}

	/*
	 * The marker row is the positioning context for the rule, which is what
	 * makes the rule's vertical placement free: the flex row is exactly as tall
	 * as the circle it centres, so `50%` is the marker's centre line whatever
	 * size the marker is set to.
	 *
	 * `.kg-step-marker` is the pattern's own class on that row, not the Icon
	 * block. It used to be `.wp-block-icon` — the Icon block carried the whole
	 * circle — until WebKit turned out to clip an inline SVG's content to the
	 * element's `border-radius` (shrunk to the content box) with
	 * `overflow: visible` in force, shaving the glyphs' corners on every
	 * iPhone. The circle is a Group now and the icon inside it is bare; the
	 * pattern's header says the rest.
	 */
	.wp-block-group.is-style-step-timeline .kg-step-marker {
		position: relative;
	}

	/*
	 * Each step but the first reaches back to the one before it, and **the rule
	 * stops at the two markers rather than passing behind them.** The design
	 * draws one 1100px line under five opaque discs, and the direct translation
	 * of that — a negative z-index child of the marker, so the marker's own white
	 * paints over it — is one stacking context away from showing the line
	 * straight across every circle. `isolation: isolate` holds it, until an
	 * ancestor with a transform, a filter or an opacity of its own moves the
	 * goalposts, and then a rule appears through all five markers on somebody
	 * else's page and not on the one it was built on. Drawing only the gap has no
	 * such dependency: nothing overlaps, so nothing has to win a paint order, and
	 * a marker with no background — or a section on a photograph — looks the same
	 * as this one.
	 *
	 * The geometry, in the marker row's own box (which is the full column):
	 * the rule ends half a marker short of this column's centre, and runs one
	 * column plus one gap *minus a whole marker* back, which lands it half a
	 * marker past the previous centre — the previous marker's near edge. Five
	 * steps draw the design's rule in four pieces.
	 *
	 * `--kg-step-marker` restates the circle's size — the 20px icon plus 13px
	 * of padding and a 1px border each side the pattern builds it from —
	 * because CSS cannot read the blocks' inline values. It is the one number
	 * here that has a twin: change the marker's size and change this, or the
	 * rule stops short of the circle or slides under it.
	 *
	 * Logical properties throughout, so the row reverses with the document
	 * direction rather than pointing the wrong way in RTL.
	 */
	.wp-block-group.is-style-step-timeline
		> :not(:first-child)
		.kg-step-marker::before {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: calc(50% + var(--kg-step-marker) / 2);
		inline-size: calc(100% + var(--kg-step-gap) - var(--kg-step-marker));
		block-size: 1px;
		translate: 0 -50%;
		background: var(--wp--preset--color--brand-dark-green);
	}
}