/**
 * Step cards — numbered cards that become a vertical timeline on phones.
 *
 * Scoped to `.step-cards`, a class on the Grid Group holding the cards. Loaded
 * only on pages that render it (inc/step-cards.php). Expected card markup, as
 * the builder writes it:
 *
 *   Grid Group.step-cards
 *     Group (card, vertical)
 *       Image
 *       Group (text)
 *         … Paragraph.step-cards__badge (the number), Heading, text …
 *   Buttons.step-cards__end (optional, right after: a check-badge last step)
 *
 * Desktop and tablet are the builder's markup untouched. On phones the badge
 * moves into a left column joined by a line, and the image drops below the
 * text. CSS because core can't reorder blocks per viewport, or take a stacked
 * block out into a side column.
 *
 * Colour: the line and the end check use `--step-color`, the palette's
 * `undertone` unless the child's theme.json sets `settings.custom.stepCards.color`.
 * Set the badges to the same colour in the builder.
 *
 * The `!important`s beat the builder's inline styles and core's preset
 * colour classes (which are `!important` themselves), on phones only.
 */

@media (width <= 48rem) {
	.wp-block-group.step-cards,
	.step-cards + .step-cards__end {
		--step-badge: 3.25rem;
		--step-gutter: var(--wp--preset--spacing--s);
		--step-color: var(--wp--custom--step-cards--color, var(--wp--preset--color--undertone));
	}

	.wp-block-group.step-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Card: no surface; room on the left for the badge column. */
	.wp-block-group.step-cards > * {
		position: relative;
		background-color: transparent !important;
		border-radius: 0 !important;
		padding: 0 0 var(--wp--preset--spacing--l) calc(var(--step-badge) + var(--step-gutter)) !important;
	}

	/*
	 * The card is the badge's anchor, at any depth. The editor makes every
	 * block `position: relative`, which anchored the badge to its own Group
	 * and put it over the heading in the mobile preview.
	 */
	.wp-block-group.step-cards > * .wp-block-group {
		position: static;
	}

	/* The line from each badge down to the next (and on to the end point). */
	.step-cards > :not(:last-child)::before,
	.step-cards:has(+ .step-cards__end) > :last-child::before {
		content: "";
		position: absolute;
		top: var(--step-badge);
		bottom: 0;
		left: calc(var(--step-badge) / 2 - 1px);
		border-left: 2px solid var(--step-color);
	}

	/*
	 * Scroll fill: the line above becomes a faint track, and a copy fills it
	 * top to bottom as the card passes a line 30% down the screen (top inset
	 * 30%, bottom inset 70%), so the fill keeps up with where the eye reads. Browsers
	 * without scroll-driven animations, and reduced motion, keep the solid line.
	 */
	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			.step-cards > * {
				view-timeline: --step-card block;
				view-timeline-inset: 30% 70%;
			}

			.step-cards > :not(:last-child)::before,
			.step-cards:has(+ .step-cards__end) > :last-child::before {
				border-left-color: color-mix(in oklch, var(--step-color) 25%, transparent);
			}

			.step-cards > :not(:last-child)::after,
			.step-cards:has(+ .step-cards__end) > :last-child::after {
				content: "";
				position: absolute;
				top: var(--step-badge);
				bottom: 0;
				left: calc(var(--step-badge) / 2 - 1px);
				border-left: 2px solid var(--step-color);
				transform-origin: top;
				animation: step-cards-fill linear both;
				animation-timeline: --step-card;
			}
		}
	}

	@keyframes step-cards-fill {
		from { transform: scaleY(0); }
		to { transform: scaleY(1); }
	}

	/* Text first, left-aligned; the heading sits level with the badge. */
	.step-cards > * > .wp-block-group,
	.step-cards > * > .wp-block-group .wp-block-group {
		align-items: flex-start;
		padding: 0 !important;
	}

	.step-cards > * > .wp-block-group {
		padding-top: 0.6em !important;
	}

	/* The group's gap alone spaces the text, so every step is even. */
	.step-cards > * > .wp-block-group > * {
		margin-block: 0 !important;
	}

	.step-cards .has-text-align-center {
		text-align: left !important;
	}

	/* Image after the text, rounded all round. */
	.step-cards > * > .wp-block-image {
		order: 1;
		margin-top: var(--step-gutter);
	}

	.step-cards > * > .wp-block-image img {
		aspect-ratio: 16 / 9 !important;
		border-radius: var(--wp--preset--border-radius--m) !important;
	}

	/* Badge: a fixed circle at the top of the left column. `.wp-block-group`
	   outranks the editor's `position: relative` on every block. */
	.wp-block-group.step-cards .step-cards__badge {
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		place-items: center;
		width: var(--step-badge);
		height: var(--step-badge);
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 50% !important;
	}

	/*
	 * End point: a Buttons block right after the cards, carrying
	 * `step-cards__end`, becomes a last step with a check badge.
	 */
	.step-cards + .step-cards__end {
		position: relative;
		justify-content: flex-start !important;
		align-items: center;
		min-height: var(--step-badge);
		margin-top: 0 !important;
		padding-left: calc(var(--step-badge) + var(--step-gutter));
	}

	.step-cards + .step-cards__end::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: var(--step-badge);
		height: var(--step-badge);
		border-radius: 50%;
		background: var(--step-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 45% no-repeat;
	}
}