/*
 * Process steps block.
 *
 * Card geometry follows docs/figma-template/blocks/features.md — white card,
 * 72px circle, 24px title, 18px text — with the step number taking the place of
 * the icon, which is what docs/figma-template/04-reuse-map.md proposes for this
 * block. The connector between steps has no prototype in the template at all
 * and is designed here: a dashed line, drawn only where the row structure is
 * predictable (one column, or one full row).
 *
 * Breakpoints are container queries, not media queries: the editor canvas is
 * narrower than the window, and a media query would style the block for a width
 * it does not actually have.
 */

.sws-process-steps {
	container: sws-process-steps / inline-size;

	/* Containing block for the decorative shapes below. */
	position: relative;

	/* The disc and the two edge doodles reach past the section on purpose. */
	overflow: hidden;
}

/* The theme ships no global reset, so keep the box model local to the block. */
.sws-process-steps,
.sws-process-steps *,
.sws-process-steps *::before,
.sws-process-steps *::after {
	box-sizing: border-box;
}

/* Background
--------------------------------------------- */

/*
 * The disc tint is a shade of the section fill and has no palette token: the
 * layout paints it #FFEEEB over the warm fill, the other three are the same
 * relationship applied to the remaining fills.
 */
.sws-process-steps--bg-shade-warm {
	--sws-decor-disc: #ffeeeb;

	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-process-steps--bg-shade-mint {
	--sws-decor-disc: #dcf6f4;

	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-process-steps--bg-shade {
	--sws-decor-disc: #f1f1f1;

	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-process-steps--bg-white {
	--sws-decor-disc: #fbf4f3;

	background-color: var(--wp--preset--color--white, #fff);
}

/* Decoration
--------------------------------------------- */

/*
 * The Abstract Bg layer of docs/figma-template/blocks/features.md — a Ø697 disc
 * bleeding off the top right corner plus five line-art doodles, exported from
 * the template into decor/.
 *
 * The positions are deliberately not the layout's. In Figma the doodles live in
 * the 375px margins beside the 1170 container, and those margins only exist on a
 * 1920 canvas; here the container hugs the viewport, so each shape is moved into
 * a band the content leaves empty — above the heading, beside it on the right,
 * or in the bottom padding — or pushed past the edge, which is what the disc
 * does in the layout anyway.
 *
 * The set is the warm one of the Features section. A mint or white section would
 * want the cooler set the FAQ uses.
 */
.sws-process-steps__decor {
	/* Shown only once there is room; below that the shapes land under the cards. */
	display: none;
	position: absolute;
	inset: 0;

	/* Above the section fill, below everything in __inner. */
	z-index: 0;
}

.sws-process-steps__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * Ø697 of the layout's 1920 canvas, overshooting the right edge by 137. The
 * vertical offset is a transform, not `top`: a percentage in `top` resolves
 * against the height of the section, which grows with every extra step and
 * again with every step that carries a paragraph, so the disc would walk off
 * the top edge. A percentage in `transform` resolves against the element's own
 * square box and holds the layout's -164px at any section height.
 */
.sws-process-steps__shape--disc {
	top: 0;
	right: -7.1%;
	width: 36.3%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--sws-decor-disc, #ffeeeb);
	transform: translateY(-23.5%);
}

/*
 * The band the shapes live in is the section's own padding, so they are offset
 * and sized from the same token: whatever the viewport does to the padding, the
 * shape follows and can never reach the content.
 */
.sws-process-steps__shape--ring {
	top: 1.5rem;
	left: 2.5%;
	width: 1.25rem;
	aspect-ratio: 1;
	background-image: url("decor/ring.svg");
}

.sws-process-steps__shape--sparkle {
	top: 1.25rem;
	right: 6%;
	width: 2rem;
	aspect-ratio: 1;
	background-image: url("decor/sparkle.svg");
}

/* The three below need the side bands, so they wait for the wide layout. */
.sws-process-steps__shape--strokes,
.sws-process-steps__shape--globe,
.sws-process-steps__shape--magnifier {
	display: none;
}

.sws-process-steps__shape--strokes {
	top: 22%;
	right: 22%;
	width: 4.125rem;
	aspect-ratio: 66 / 65;
	background-image: url("decor/strokes.svg");
}

.sws-process-steps__shape--globe {
	bottom: 0.75rem;
	left: -1.5%;
	width: auto;
	height: min(6.1875rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 104 / 143;
	background-image: url("decor/globe.svg");
}

.sws-process-steps__shape--magnifier {
	right: 3%;
	bottom: 0.75rem;
	width: auto;
	height: min(3.6875rem, calc(var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem)) - 1.75rem));
	aspect-ratio: 1;
	background-image: url("decor/magnifier.svg");
}

.sws-process-steps__inner {
	/* Lifts the content above the decoration. */
	position: relative;
	z-index: 1;

	/* 1170px of content plus the gutter, so the column matches the layout exactly. */
	max-width: calc(var(--wp--custom--container, 1170px) + var(--wp--custom--gutter, 1rem) * 2);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem));
	padding-inline: var(--wp--custom--gutter, 1rem);
}

/* Section heading (markup from sws_theme_section_heading)
--------------------------------------------- */

.sws-process-steps__head {
	/* A 44px heading across the full 1170 reads as a banner, not as a heading. */
	max-width: 42rem;
	margin-bottom: var(--wp--preset--spacing--60, 3.5rem);
}

.sws-process-steps__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--secondary, #5eb9b3);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

.sws-process-steps__title {
	margin: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--huge, 2.75rem);
	font-weight: 700;
	line-height: 1.4;
}

/*
 * Hand-drawn stroke under the accent phrase. The file is shared by every block
 * that has a section heading, so the ragged path is defined once and cached
 * once; box-decoration-break keeps a stroke under every line when the phrase
 * wraps. See assets/brush.svg.
 */
.sws-process-steps__accent {
	padding-bottom: 0.125rem;
	background-image: url("../../assets/brush.svg");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sws-process-steps__lead {
	margin: 1.5rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Steps
--------------------------------------------- */

.sws-process-steps__list {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
	margin: 0;
	padding: 0;

	/* Our own numbers are rendered in the marker; the list marker would double them. */
	list-style: none;
}

.sws-process-steps__item {
	/* Containing block for the connector drawn in ::before. */
	position: relative;

	/* 32, not the 40 of the layout: at four columns the card is 270px wide. */
	padding: 2rem;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
}

.sws-process-steps__marker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
	color: var(--wp--preset--color--secondary, #5eb9b3);
}

.sws-process-steps__number {
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1;
}

.sws-process-steps__icon {
	display: flex;
	width: 2rem;
	height: 2rem;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-process-steps__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* With an icon in the circle the number moves out to a badge on its edge. */
.sws-process-steps__item--has-icon .sws-process-steps__number {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary, #5eb9b3);
	color: var(--wp--preset--color--white, #fff);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
}

.sws-process-steps__step-title {
	margin: var(--wp--preset--spacing--50, 2rem) 0 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
}

.sws-process-steps__text {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
}

/* Connector, single column: down from the marker into the gap below.
   2rem card padding + half of the 4.5rem circle = 4.25rem. */
.sws-process-steps__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 4.25rem;
	height: var(--wp--preset--spacing--40, 1.875rem);
	border-left: 2px dashed var(--wp--preset--color--secondary, #5eb9b3);
	opacity: 0.4;
	transform: translateX(-1px);
}

/* Figure
--------------------------------------------- */

/*
 * Not in the layout: the Features section carries no image at all. Same 42rem
 * measure and same frame as the figure of feature-grid, so the two blocks
 * behave identically — but centred for a different reason. There the heading is
 * centred and the figure joins its spine; here the heading is left-aligned and
 * the figure belongs to the grid above it, which spans the container evenly.
 */
.sws-process-steps__figure {
	max-width: 42rem;
	margin: var(--wp--preset--spacing--60, 3.5rem) auto 0;
}

.sws-process-steps__media {
	border-radius: var(--wp--custom--radius, 8px);

	/* Reads as paper margin under the letterbox bands of a portrait upload. */
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));

	/* The radius has to reach the image, which is a box of its own. */
	overflow: hidden;
}

/* Descendant selector: the optimizer may wrap the tag in <picture>. */
.sws-process-steps__media img {
	display: block;
	width: 100%;
	height: auto;

	/*
	 * A frame the editor uploads, not a designed asset. contain caps the height
	 * and letterboxes a portrait upload instead of cropping it.
	 */
	max-height: 32rem;
	object-fit: contain;
}

.sws-process-steps__caption {
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
	text-align: center;
}

/* Two columns
--------------------------------------------- */

@container sws-process-steps (min-width: 560px) {

	.sws-process-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The top and bottom bands are tall enough now for the first shapes. */
	.sws-process-steps__decor {
		display: block;
	}

	/* A lone card has no row to share and should not sit in half the width. */
	.sws-process-steps--count-1 .sws-process-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The line would point off the end of the row on every second card. */
	.sws-process-steps__item:not(:last-child)::before {
		content: none;
	}
}

/* Full row
--------------------------------------------- */

@container sws-process-steps (min-width: 1000px) {

	/* Side bands finally exist: the edge doodles join in. */
	.sws-process-steps__shape--strokes,
	.sws-process-steps__shape--globe,
	.sws-process-steps__shape--magnifier {
		display: block;
	}

	.sws-process-steps--count-3 .sws-process-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sws-process-steps--count-4 .sws-process-steps__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Five and six stay on three columns: six cards in a row are 165px wide. */
	.sws-process-steps--count-5 .sws-process-steps__list,
	.sws-process-steps--count-6 .sws-process-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Everything up to four steps is one row now, so the connector comes back
	 * horizontally, at the vertical centre of the markers.
	 */
	.sws-process-steps--count-2 .sws-process-steps__item:not(:last-child)::before,
	.sws-process-steps--count-3 .sws-process-steps__item:not(:last-child)::before,
	.sws-process-steps--count-4 .sws-process-steps__item:not(:last-child)::before {
		content: "";
		top: 4.25rem;
		left: 100%;
		width: var(--wp--preset--spacing--40, 1.875rem);
		height: 0;
		border-left: 0;
		border-top: 2px dashed var(--wp--preset--color--secondary, #5eb9b3);
		transform: translateY(-1px);
	}
}