/*
The five-step design process on the Architecture page. Each step is a row like a
drawing schedule (number, title, then the description and its deliverables), between a heavy rule at the top
and bottom and thin rules between steps. Rows wrap onto separate lines on narrow screens.
*/
.process {
	margin-bottom: 4rem;

	.divider {
		margin-bottom: 1rem;
	}
}


.process__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--color-porcelain); /* A solid sheet: the shape field stays out of the whole schedule. */
	border-top: 3px solid var(--color-spicy-black);
	border-bottom: 3px solid var(--color-spicy-black);
}

/*
A grid: number | title on the first row, then the description across the full row beneath them on narrow
screens. Wide screens put the description in a third column beside the title.
*/
.process__step {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: start; /* Tops line up; text-box trims each first line to its cap height, below. */
	gap: 1.25rem; /* Rows: room between the title and the description below it on narrow screens. */
	max-width: none; /* The row spans the page (layout.css caps every li); only the description keeps the reading width. */
	margin: 0;
	padding: 1.4rem 1.5rem; /* Room between the sheet's edge and the number. */

	& + .process__step {
		border-top: 1px solid var(--color-spicy-black);
	}
}

/* Trim the space above each first line so the tops of the capitals meet the row's top edge together. */
.process__number,
.process__title,
.process__text {
	text-box: trim-start cap alphabetic;
}

.process__number {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.9rem;
	letter-spacing: 0.15em;
	color: var(--color-spicy-orange);
}

.process__title {
	margin: 0;
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.15;
	text-transform: none;
}

.process__body {
	grid-column: 1 / -1;
	max-width: var(--reading-width);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.process__text {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.7;
}

/* The steps sit on the solid sheet, so their text needs no highlight of its own. */
.process__steps .highlight {
	padding: 0;
	background: none;
}

.process__deliverables {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

/* The label sits on its own line, in the body font so it stays readable over the shape field. */
.process__deliverables-label {
	flex: 0 0 100%;
	max-width: fit-content;
	font-size: 1.05rem;
	font-weight: 600;
}

.process__chip {
	padding: 0.25rem 0.6rem;
	background-color: var(--color-spicy-black);
	color: var(--color-porcelain);
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
Wide screens: number, title and description side by side. The list holds the columns and each step uses them
through subgrid, so the title column fits the longest title and every description starts at the same place.
*/
@media (min-width: 1000px) {
	.process__steps {
		display: grid;
		grid-template-columns: max-content max-content minmax(0, 1fr);
	}

	.process__step {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		column-gap: 2rem; /* The subgrid's own gap between number, title and description. */
	}

	.process__body {
		grid-column: 3;
	}
}