/*
 * Process Steps (1.0.0).
 *
 * The head words (InnerBlocks) sit above a grid: a square photo column (7fr) that stays in
 * view beside the numbered steps (5fr) and their rail. view.js marks the step being read:
 * its photo cross-fades in, the rail fills to (step + 1) / steps and the other steps dim.
 * The dimming waits for the script (data-arenex-ready), so without JavaScript and in the
 * editor every step reads at full strength. Up to 1024px it is one column: no photo
 * column, each step shows its own photo at 16:10.
 *
 * Light is the default style (no class); Dark is is-style-dark.
 *
 * Tokens only. Class rules sit inside :where(), so a theme adjusts them freely.
 *
 * Exception: WordPress prints block CSS before the theme's stylesheets, so rules that must
 * beat a theme's element resets (heading, paragraph and list margins, heading size, image
 * display and height, link colour and underline, headings on a dark band, the focus ring)
 * keep one class outside :where(). The button row also carries core's .wp-block-buttons,
 * which themes style, so its layout rule names both classes.
 */

/* ---- Band, container and the colours each style swaps ---- */
:where(.arenex-process) {
	--arenex-process-accent: var(--primary-color);
	--arenex-process-muted: var(--text-color);
	--arenex-process-track: var(--border-color);
	--arenex-process-frame: var(--bg-alt);
	padding-block: var(--section-padding);
}
:where(.arenex-process.is-style-dark) {
	--arenex-process-accent: var(--accent-on-dark);
	--arenex-process-muted: var(--on-dark-muted);
	--arenex-process-track: var(--border-dark-color);
	--arenex-process-frame: var(--surface-dark-color);
	background: var(--bg-dark);
	color: var(--on-dark-color);
}
.is-style-dark:where(.arenex-process) :is(h1, h2, h3, h4):not(.has-text-color) {
	color: inherit;
}
.is-style-dark:where(.arenex-process) :focus-visible {
	outline-color: var(--accent-on-dark);
}

:where(.arenex-process__inner) {
	box-sizing: border-box;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* ---- Head: eyebrow, heading, intro (InnerBlocks) ---- */
:where(.arenex-process__head) {
	max-width: var(--head-max-width);
	margin-block-end: var(--gap-lg);
}
.arenex-process__head :is(h1, h2, h3, h4, p) {
	margin-block: 0;
}
.arenex-process__head .is-style-eyebrow {
	margin-block-end: 1em;
}
.arenex-process__head :is(h1, h2, h3, h4) + p {
	margin-block-start: var(--gap-md);
}
:where(.arenex-process.is-style-dark) .is-style-eyebrow:not(.has-text-color) {
	color: var(--accent-on-dark);
}
:where(.arenex-process__head) p:not(.is-style-eyebrow, .has-text-color) {
	color: var(--arenex-process-muted);
}

/* ---- Grid: photo column beside the steps ---- */
:where(.arenex-process__grid) {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--gap-lg) var(--column-gap);
	align-items: start;
}
:where(.arenex-process__grid--no-media) {
	grid-template-columns: minmax(0, 1fr);
}

/* ---- Photo column: every step's photo stacked, the active one shown ---- */
:where(.arenex-process__media) {
	position: sticky;
	top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px) + 2 * var(--gap-sm));
	aspect-ratio: 1 / 1;
	max-height: calc(100svh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px) - 4 * var(--gap-sm));
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--arenex-process-frame);
}
:where(.arenex-process__img) {
	position: absolute;
	inset: 0;
	width: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.arenex-process__img {
	height: 100%;
	max-width: none;
}
:where(.arenex-process__img.is-active) {
	opacity: 1;
}
:where(.arenex-process__media-label) {
	position: absolute;
	left: var(--gap-sm);
	bottom: var(--gap-sm);
	padding: 0.667em 1em;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
	color: var(--on-dark-muted);
	font-family: var(--font-eyebrow);
	font-size: var(--label-size);
	letter-spacing: 0.14em;
	line-height: var(--body-line-height);
	text-transform: uppercase;
}

/* ---- Steps and their rail ---- */
:where(.arenex-process__steps) {
	position: relative;
	padding-block: calc(2 * var(--gap-sm)) max(10 * var(--gap-sm), 38vh);
	padding-inline-start: calc(3 * var(--gap-sm));
}
:where(.arenex-process__rail) {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	background: var(--arenex-process-track);
}
:where(.arenex-process__rail-fill) {
	position: absolute;
	inset: 0;
	background: var(--arenex-process-accent);
	transform-origin: top;
	transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-process__list) {
	display: grid;
	gap: calc(6 * var(--gap-sm));
}
.arenex-process__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(.arenex-process__step) {
	transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-process[data-arenex-ready] .arenex-process__step:not(.is-active)) {
	opacity: 0.45;
}
:where(.arenex-process__num) {
	color: var(--arenex-process-accent);
	font-family: var(--font-eyebrow);
	font-size: var(--caption-size);
	letter-spacing: 0.14em;
}
.arenex-process__title {
	margin: calc(0.5 * var(--gap-sm)) 0 0;
	font-size: var(--h3-size);
	line-height: var(--heading-line-height);
}
.arenex-process__text {
	max-width: 40ch;
	margin: calc(0.75 * var(--gap-sm)) 0 0;
	color: var(--arenex-process-muted);
}
.arenex-process__step-img {
	display: none;
}

/* ---- Under the steps: a core-styled button and the block's own text link ---- */
.arenex-process__foot.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gap-sm);
	margin-block: var(--gap-lg) 0;
}
:where(.arenex-process__link) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(0.5 * var(--gap-sm));
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.arenex-process__link,
.arenex-process__link:hover {
	color: var(--arenex-process-accent);
	text-decoration: none;
}
/* The link is one line tall: an invisible pad makes it easier to tap without moving anything. */
:where(.arenex-process__link)::before {
	content: "";
	position: absolute;
	inset: calc(-0.5 * var(--gap-sm)) calc(-0.25 * var(--gap-sm));
}
:where(.arenex-process__link:active) {
	transform: translateY(1px);
}
.arenex-process__link svg {
	flex: none;
	width: 0.94em;
	height: 0.94em;
}
:where(.arenex-process__link) svg {
	transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-process__link:hover) svg {
	transform: translateX(0.18em);
}

/* ---- Editor preview: a still, with the photo in place and no scrolling room under the steps ---- */
:where(.arenex-process.is-preview .arenex-process__media) {
	position: relative;
	top: auto;
}
:where(.arenex-process.is-preview .arenex-process__steps) {
	padding-block-end: calc(2 * var(--gap-sm));
}

/* ---- Screen sizes ---- */
@media (max-width: 1024px) {
	:where(.arenex-process__grid) {
		grid-template-columns: minmax(0, 1fr);
	}
	:where(.arenex-process__media) {
		display: none;
	}
	:where(.arenex-process__steps) {
		padding-block: calc(0.5 * var(--gap-sm));
	}
	:where(.arenex-process__list) {
		gap: calc(3 * var(--gap-sm));
	}
	:where(.arenex-process[data-arenex-ready] .arenex-process__step:not(.is-active)) {
		opacity: 1;
	}
	.arenex-process__step-img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		margin-top: var(--gap-sm);
		object-fit: cover;
		border-radius: var(--radius);
	}
}
@media (prefers-reduced-motion: reduce) {
	:where(.arenex-process__img, .arenex-process__rail-fill, .arenex-process__step),
	:where(.arenex-process__link) svg {
		transition: none;
	}
}

/* =========================================================================
   Layout: Accordion (is-layout-accordion), and Photo stack (has-photo-stack)
   =========================================================================

   Accordion: the photo on the left, and the heading, the steps and the buttons in the
   right column. Each step is a title that opens its text (view.js), one at a time, with a
   plus that turns to a cross. The heading area's own buttons move under the steps. On
   narrower screens (below 960px) it is one column: photo, heading, steps, buttons. The
   collapsing waits for the script, so without it every step's text shows.

   Photo stack: the photo in a white frame, over a soft copy of the first photo offset up
   and to the right. Works with either layout.

   Tune a site with these variables (on .arenex-process or the theme's :root):
     --arenex-process-title-font, -title-size, -title-style  step titles
     --arenex-process-toggle-space  space above and below each title
     --arenex-process-panel-space   space under the open text
     --arenex-process-column-gap    between the photo and the text
     --arenex-process-front-radius, -back-radius, -frame, -blur  the photo stack */

:where(.arenex-process.is-layout-accordion) {
	--arenex-process-title-font: var(--font-heading);
	--arenex-process-title-size: var(--h4-size);
	--arenex-process-title-style: normal;
	--arenex-process-toggle-space: var(--gap-md);
	--arenex-process-panel-space: var(--gap-md);
	--arenex-process-column-gap: var(--column-gap);
}
:where(.arenex-process.has-photo-stack) {
	--arenex-process-front-radius: calc(var(--radius) / 2);
	--arenex-process-back-radius: calc(var(--radius) / 2);
	--arenex-process-frame: calc(var(--gap-sm) * 0.58);
	--arenex-process-blur: calc(var(--gap-sm) * 0.5);
}

/* ---- Accordion: the steps ---- */
:where(.is-layout-accordion .arenex-process__steps) {
	padding: 0;
}
:where(.is-layout-accordion .arenex-process__list) {
	gap: 0;
	border-top: 1px solid var(--arenex-process-track);
}
:where(.is-layout-accordion .arenex-process__step),
:where(.arenex-process.is-layout-accordion[data-arenex-ready] .arenex-process__step:not(.is-active)) {
	border-bottom: 1px solid var(--arenex-process-track);
	opacity: 1;
}
/* Numbers and the photo's step label are off in the accordion; a theme can show the numbers again. */
:where(.is-layout-accordion .arenex-process__num),
:where(.is-layout-accordion .arenex-process__media-label) {
	display: none;
}
.arenex-process__heading {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
}
.arenex-process__toggle {
	display: flex;
	align-items: center;
	gap: calc(var(--gap-md) * 0.8);
	width: 100%;
	margin: 0;
	padding: var(--arenex-process-toggle-space) 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.is-layout-accordion .arenex-process__title {
	flex: 1;
	margin: 0;
	font-family: var(--arenex-process-title-font);
	font-size: var(--arenex-process-title-size);
	font-style: var(--arenex-process-title-style);
	line-height: var(--heading-line-height);
	color: var(--heading-color);
	transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.is-style-dark.is-layout-accordion) .arenex-process__title {
	color: inherit;
}
.arenex-process__toggle:hover .arenex-process__title {
	color: var(--arenex-process-accent);
}

/* The plus that turns into a cross while the step is open. */
:where(.arenex-process__mark) {
	position: relative;
	flex: none;
	width: calc(var(--gap-md) * 0.72);
	height: calc(var(--gap-md) * 0.72);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-process__mark)::before,
:where(.arenex-process__mark)::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}
:where(.arenex-process__mark)::before { width: 100%; height: 1.5px; }
:where(.arenex-process__mark)::after { width: 1.5px; height: 100%; }
:where(.is-layout-accordion .arenex-process__step.is-open .arenex-process__mark) {
	transform: rotate(45deg);
}

/* The panel: open without the script; closed but the open step's once view.js is ready.
   A 0fr grid row hides its child only with min-height: 0, and the text's padding is set
   only while open, or a closed step would still show a line of it. */
:where(.arenex-process.is-layout-accordion[data-arenex-ready] .arenex-process__panel) {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.arenex-process.is-layout-accordion[data-arenex-ready] .arenex-process__step.is-open .arenex-process__panel) {
	grid-template-rows: 1fr;
}
:where(.is-layout-accordion .arenex-process__panel-inner) {
	overflow: hidden;
	min-height: 0;
}
.is-layout-accordion .arenex-process__text {
	max-width: none;
	margin: 0;
	padding: 0 calc(var(--gap-md) * 2) var(--arenex-process-panel-space) 0;
}
.arenex-process.is-layout-accordion[data-arenex-ready] .arenex-process__step:not(.is-open) .arenex-process__text {
	padding-bottom: 0;
}

/* ---- Accordion: the page layout (front end; the editor keeps the head above) ---- */
.is-layout-accordion:not(.is-preview) :is(.arenex-process__head, .arenex-process__head > .acf-innerblocks-container, .arenex-process__grid) {
	display: contents;
}
.is-layout-accordion:not(.is-preview) .arenex-process__head .wp-block-buttons {
	order: 1;
	margin: var(--gap-lg) 0 0;
}
.is-layout-accordion:not(.is-preview) .arenex-process__foot {
	order: 2;
}
@media (min-width: 960px) {
	.is-layout-accordion:not(.is-preview) .arenex-process__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		column-gap: var(--arenex-process-column-gap);
		align-items: start;
	}
	.is-layout-accordion:not(.is-preview) .arenex-process__inner > * ,
	.is-layout-accordion:not(.is-preview) .arenex-process__head :is(h1, h2, h3, h4, p, .wp-block-buttons),
	.is-layout-accordion:not(.is-preview) :is(.arenex-process__steps, .arenex-process__foot) {
		grid-column: 2;
	}
	.is-layout-accordion:not(.is-preview) .arenex-process__media {
		grid-column: 1;
		grid-row: 1 / span 12;
	}
	:where(.is-layout-accordion .arenex-process__foot.wp-block-buttons) {
		justify-content: flex-start;
	}
}
@media (max-width: 959px) {
	.is-layout-accordion:not(.is-preview) .arenex-process__inner {
		display: flex;
		flex-direction: column;
	}
	.is-layout-accordion:not(.is-preview) .arenex-process__media {
		order: -1;
		margin-bottom: var(--gap-lg);
	}
}
/* The photo shows at every width in the accordion (the scroll layout hides it below 1024px
   and puts a photo in each step instead), and the per-step photos are not printed. */
@media (max-width: 1024px) {
	:where(.is-layout-accordion .arenex-process__media) {
		display: block;
		position: relative;
		top: auto;
	}
}
@media (max-width: 959px) {
	:where(.is-layout-accordion .arenex-process__media) {
		position: relative;
		top: auto;
	}
}

/* ---- Photo stack ---- */
.has-photo-stack .arenex-process__media {
	aspect-ratio: 4 / 3.3;
	max-height: none;
	overflow: visible;
	border-radius: 0;
	background: none;
	isolation: isolate;
}
.has-photo-stack .arenex-process__img {
	inset: auto auto 0 0;
	width: 94%;
	height: auto;
	aspect-ratio: 4 / 3;
	box-sizing: border-box;
	border: var(--arenex-process-frame) solid var(--bg-color);
	border-radius: var(--arenex-process-front-radius);
}
/* Two classes: a theme's `[class*="__media"] img { width: 100% }` must not stretch the copy. */
.arenex-process__media .arenex-process__img-back {
	position: absolute;
	top: -7%;
	right: -4%;
	z-index: -1;
	width: 80%;
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border-radius: var(--arenex-process-back-radius);
	filter: blur(var(--arenex-process-blur)) saturate(0.92);
	clip-path: inset(0 round var(--arenex-process-back-radius));
	pointer-events: none;
}
/* Stacked, the soft copy rises above the photo: room for it. */
@media (max-width: 959px) {
	:where(.has-photo-stack .arenex-process__media) {
		margin-top: 6%;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.arenex-process__mark, .arenex-process__panel),
	.is-layout-accordion .arenex-process__title {
		transition: none;
	}
}