/* Our Process page (Danny, 2026-09-13): room around the hero copy, and a
 * photo on each of the ten steps. Plain CSS, enqueued by
 * functions/function-process.php on any page whose content carries the
 * .process-hero section or a .step-image block, so it is not tied to a page
 * id and works on .ca too. Not part of the gulp scss build. */

/* Hero: the section carries inline padding 0 from the block, and the
 * large-hero-5 padding only starts at xlarge, so give the copy its own room. */
.process-hero .meta {
	padding-top: clamp(3rem, 7vw, 6.5rem);
	padding-bottom: clamp(3rem, 7vw, 6.5rem);
}

/* Step photos: a wp:image block placed above each step label. */
.step-image {
	margin: 0 0 1.5rem;
}
.step-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 12px;
}
.step-image + .step-label {
	margin-top: 0;
}

/* One step per row on phones (Danny, 2026-09-18). The cards are medium-6 and
 * this theme's Foundation "medium" starts at 30em (480px), so large phones and
 * landscape got two cramped columns up to the 48em tablet line. */
@media screen and (max-width: 48.0613em) {
	.process-card {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ---- Hero wash, following the header's navy/light toggle ----------------
 * The section paints its photo with background-image: var(--desktop-bg-image)
 * (var(--mobile-bg-image) under 48.06em); stacking a flat gradient over the
 * same variable is the overlay, with no extra element. Default = navy at 68%,
 * the homepage hero's treatment. html[data-theme="light"] = an 86% white wash
 * with ink type, blue accent and a navy button. Preset colour classes and the
 * inline <mark> colour carry !important, so the light rules do too. */
.process-hero {
	background-image: linear-gradient(rgba(13, 53, 86, .68), rgba(13, 53, 86, .68)), var(--desktop-bg-image);
	background-image: linear-gradient(color-mix(in srgb, var(--renoun-global-color-dark-navy, #0d3556) 68%, transparent), color-mix(in srgb, var(--renoun-global-color-dark-navy, #0d3556) 68%, transparent)), var(--desktop-bg-image);
}
@media screen and (max-width: 48.0613em) {
	.process-hero {
		background-image: linear-gradient(rgba(13, 53, 86, .68), rgba(13, 53, 86, .68)), var(--mobile-bg-image);
	}
}

html[data-theme="light"] .process-hero {
	background-image: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), var(--desktop-bg-image);
}
@media screen and (max-width: 48.0613em) {
	html[data-theme="light"] .process-hero {
		background-image: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), var(--mobile-bg-image);
	}
}
html[data-theme="light"] .process-hero .meta h1 { color: var(--renoun-global-color-dark-navy, #0d3556) !important; }
html[data-theme="light"] .process-hero .meta h5 { color: var(--renoun-global-color-medium-blue, #2a6a9e) !important; }
html[data-theme="light"] .process-hero .meta h5 mark { color: var(--renoun-global-color-dark-navy, #0d3556) !important; }
html[data-theme="light"] .process-hero .meta p { color: var(--renoun-global-color-marengo, #485057) !important; }
html[data-theme="light"] .process-hero .meta .button.inverted {
	background-color: var(--renoun-global-color-dark-navy, #0d3556);
	color: var(--renoun-global-color-default-white, #fff);
}
html[data-theme="light"] .process-hero .meta .button.inverted:hover,
html[data-theme="light"] .process-hero .meta .button.inverted:focus {
	background-color: var(--renoun-global-color-medium-blue, #2a6a9e);
	color: var(--renoun-global-color-default-white, #fff);
}