/**
 * LOA Concierge Process Steps — UI-09 (desktop 4-column grid) + UI-10
 * (mobile vertical stack). Breakpoint matches the rest of the theme's
 * interim 1024px (Tyler to confirm). Consumes tokens.css exclusively.
 *
 * Copy: CON-06 was never filled in, so eyebrow/H2/intro/step copy was
 * pulled directly from Figma (node 95:141 desktop / 111:101 mobile)
 * per the same precedent as Specialties/Destinations.
 *
 * Icons: not available — Figma's exported icon asset URLs are blocked
 * by this sandbox's outbound network allowlist (same failure mode as
 * the 2026-07-22 roster icon extraction, see LOA-WORKING-NOTES.md).
 * The icon slot (.loa-process__icon) is reserved at spec size (36x44)
 * and simply renders nothing until an <img> is present, so real assets
 * can drop in later with zero markup/CSS changes.
 *
 * Ghost number + title overlay: the doc/Figma technique is literal
 * absolute-positioned coordinates hand-tuned per instance (Figma's
 * auto-layout export). Reimplemented here as a relatively-positioned
 * row with the ghost number absolutely placed at left:0 and the title
 * given a matching left-padding — same visual result (ghost number
 * behind/left of the title), more robust across different string
 * lengths than copying Figma's per-instance pixel coordinates.
 */

.loa-process {
	padding-block: var(--loa-process-pad-y);
	padding-inline: var(--loa-process-pad-x);
	box-sizing: border-box;
}

.loa-process__inner {
	max-width: var(--loa-max-width);
	margin-inline: auto;
	padding-inline: var(--loa-process-inner-pad-x);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--loa-process-section-gap);
}

.loa-process__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--loa-process-header-gap);
}

.loa-process__eyebrow {
	margin: 0;
	font-family: var(--loa-font-body);
	font-size: var(--loa-process-eyebrow-size);
	font-weight: 700;
	letter-spacing: var(--loa-process-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--loa-gold);
	text-align: center;
}

.loa-process__h2 {
	margin: 0;
	font-family: var(--loa-font-display);
	font-size: var(--loa-process-h2-size);
	line-height: 1;
	font-weight: 500;
	color: #fff;
	text-align: center;
}

.loa-process__intro {
	margin: 8px 0 0;
	max-width: var(--loa-process-intro-max);
	font-family: var(--loa-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
	color: var(--loa-process-intro-color);
	text-align: center;
}

/* Mobile copy variants - hidden on desktop, shown below 1024px (see
 * media query). Distinct copy, not a restyled duplicate. Since v0.18.0
 * the heading variants are spans inside ONE h2/h3 (loa_responsive_text()
 * in inc/media.php) rather than separate, always-duplicated headings. */
.loa-process__h2-mobile,
.loa-process__title-mobile,
.loa-process__intro--mobile {
	display: none;
}

.loa-process__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--loa-process-grid-gap);
}

.loa-process__step {
	display: flex;
	flex-direction: column;
	gap: var(--loa-process-step-gap);
}

.loa-process__icon-slot {
	height: var(--loa-process-icon-h);
}

.loa-process__icon {
	display: block;
	width: var(--loa-process-icon-w);
	height: var(--loa-process-icon-h);
}

.loa-process__title-row {
	position: relative;
}

.loa-process__number {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	font-family: var(--loa-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--loa-process-ghost-size);
	line-height: 36px;
	color: var(--loa-process-ghost-color);
	user-select: none;
	pointer-events: none;
}

.loa-process__title {
	margin: 0;
	padding-left: var(--loa-process-title-offset);
	font-family: var(--loa-font-body);
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	color: #fff;
}

.loa-process__body {
	margin: 0;
	font-family: var(--loa-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	color: var(--loa-process-body-color);
}

/* ==================================================================
 * UI-10 — Mobile process vertical stack. No ghost numbers (doc
 * explicit). Icon sits left of a 64px-offset text column (36px icon
 * + 28px gap = 64px, matches doc tech note #6). Step titles for steps
 * 1 and 4 differ from desktop per Figma — swapped via the -mobile/
 * -desktop title spans below rather than a separate content fetch.
 * ================================================================== */
@media (max-width: 1024px) {
	.loa-process {
		padding-block: var(--loa-process-m-pad-y);
		padding-inline: var(--loa-process-m-pad-x);
	}

	.loa-process__inner {
		max-width: none;
		padding-inline: 0;
		gap: var(--loa-process-m-header-gap);
	}

	.loa-process__eyebrow,
	.loa-process__intro,
	.loa-process__h2-desktop,
	.loa-process__title-desktop {
		display: none;
	}

	.loa-process__h2-mobile,
	.loa-process__title-mobile {
		display: inline;
	}

	.loa-process__h2 {
		display: block;
		margin: 0;
		font-family: var(--loa-font-display);
		font-style: italic;
		font-weight: 400;
		font-size: var(--loa-process-m-h2-size);
		line-height: 24px;
		color: var(--loa-process-m-h2-color);
		text-align: center;
	}

	.loa-process__intro--mobile {
		display: block;
		margin: 0 auto;
		max-width: var(--loa-process-m-intro-max);
		font-family: var(--loa-font-body);
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		color: var(--loa-process-m-intro-color);
		text-align: center;
	}

	.loa-process__grid {
		display: flex;
		flex-direction: column;
		gap: var(--loa-process-m-step-gap);
	}

	.loa-process__step {
		display: grid;
		grid-template-columns: var(--loa-process-m-icon-col) 1fr;
		column-gap: calc(var(--loa-process-m-text-offset) - var(--loa-process-m-icon-col));
		row-gap: 8px;
	}

	.loa-process__icon-slot {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.loa-process__title-row {
		grid-column: 2;
		grid-row: 1;
	}

	.loa-process__number {
		display: none;
	}

	.loa-process__title {
		display: block;
		margin: 0;
		padding-left: 0;
		font-family: var(--loa-font-body);
		font-weight: 400;
		font-size: var(--loa-process-m-title-size);
		line-height: 24px;
		letter-spacing: var(--loa-process-m-title-tracking);
		text-transform: uppercase;
		color: var(--loa-process-m-title-color);
	}

	.loa-process__body {
		grid-column: 2;
		grid-row: 2;
		font-weight: 400;
		font-size: var(--loa-process-m-body-size);
		line-height: 20px;
		color: var(--loa-process-m-body-color);
	}
}