/* ============================================================================
   EUX Blocks — Process
   ----------------------------------------------------------------------------
   "How we deliver" five-phase delivery section. Three theme variants
   (cream / light / dark) cascade from the section wrapper into all
   child cards.

   Cards are positioned in a CSS Grid (5 columns desktop, 2 columns tablet,
   1 column mobile). Each card has a hover state that scales up, turns
   purple, fades in the hover SLA label, and lifts above its neighbours
   via z-index.

   Visual reference: exports/process/process-standalone.css
   Defensive scoping per salient-coexistence.md.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Section base
   -------------------------------------------------------------------------- */
.eux-block--process {
	padding-block: 96px;
}
@media (max-width: 720px) {
	.eux-block--process {
		padding-block: 64px;
	}
}

.eux-block--process .eux-process-section__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
@media (max-width: 980px) {
	.eux-block--process .eux-process-section__inner {
		gap: 32px;
	}
}

/* --------------------------------------------------------------------------
   Section header — eyebrow + h2 + sub
   -------------------------------------------------------------------------- */
.eux-block--process .eux-process-section__hdr.wp-block-group {
	max-width: 64ch;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eux-block--process .eux-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--eux-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eux-woo-500);
	margin: 0;
}
.eux-block--process .eux-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--eux-woo-500);
}

.eux-block--process .eux-process-section__title {
	font-family: var(--eux-font-display);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--eux-black);
	margin: 0;
	max-width: 22ch;
	text-wrap: balance;
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}

.eux-block--process .eux-process-section__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--eux-woo-500);
}

.eux-block--process .eux-process-section__sub {
	font-family: var(--eux-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Card grid — 5 desktop / 2 tablet / 1 mobile
   --------------------------------------------------------------------------
   `grid-auto-rows: 1fr` makes all cards in a row equal-height regardless
   of content length, so the bottom progress bars align cleanly. */
.eux-block--process .eux-process-section__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	grid-auto-rows: 1fr;
	align-items: stretch;
	margin: 0;
	/* When core/group renders as block-level container, reset its
	   max-width so the grid breathes the full container width. */
	max-width: none;
}
@media (max-width: 980px) {
	.eux-block--process .eux-process-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.eux-block--process .eux-process-section__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Process step card — base structure
   -------------------------------------------------------------------------- */
.eux-block--process .eux-process-step {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 14px;
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	transform-origin: center center;
	/* Transition list serves two phases:
	   - Entrance (from .eux-reveal off-state): opacity + transform fade-up
	     using ux-motion timing (360ms ease-out) — tighter than the EUX
	     default 900ms expo-out because the card stagger needs to fit
	     within the 700ms total-budget ceiling.
	   - Hover: background, border, color, shadow swap to the purple
	     state on a quick 220-260ms beat. Transform also covers the
	     1.04 scale lift on hover; the entrance translateY and the
	     hover scale don't conflict because they're different transform
	     values applied at different times.
	   Note: both phases share a single `transform` transition; ease-out
	   serves both well (entrance settle, hover lift). */
	transition:
		opacity 360ms var(--eux-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		transform 360ms var(--eux-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
		background var(--eux-dur-base, 220ms) var(--eux-ease-out, ease),
		border-color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease),
		color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease),
		box-shadow 260ms var(--eux-ease-out, ease);
	cursor: default;
	margin: 0;
}

/* Hover state — turns purple, scales up, lifts above neighbours */
.eux-block--process .eux-process-step:hover {
	background: var(--eux-woo-500);
	color: var(--eux-white);
	border-color: var(--eux-woo-500);
	box-shadow: 0 24px 48px color-mix(in srgb, var(--eux-woo-500) 28%, transparent);
	transform: scale(1.04);
	z-index: 2;
}

/* Header row — phase number + SLA label */
.eux-block--process .eux-process-step__hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.eux-block--process .eux-process-step__num {
	font-family: var(--eux-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eux-woo-500);
	transition: color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--process .eux-process-step:hover .eux-process-step__num {
	color: rgba(255, 255, 255, 0.65);
}

.eux-block--process .eux-process-step__sla {
	font-family: var(--eux-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eux-ink-500, #6B6B6B);
	transition: color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
/* Default state: show lbl-default, hide lbl-hover */
.eux-block--process .eux-process-step__sla .lbl-hover { display: none; }
/* Hover state: swap them */
.eux-block--process .eux-process-step:hover .eux-process-step__sla .lbl-default { display: none; }
.eux-block--process .eux-process-step:hover .eux-process-step__sla .lbl-hover   { display: inline; }
.eux-block--process .eux-process-step:hover .eux-process-step__sla {
	color: rgba(255, 255, 255, 0.85);
}

/* Body wrap (heading + paragraph from InnerBlocks) */
.eux-block--process .eux-process-step__body-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eux-block--process .eux-process-step__title {
	font-family: var(--eux-font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--eux-black);
	margin: 0;
	text-wrap: balance;
	transition: color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
	/* Salient defends — see salient-coexistence.md defence 2 */
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.eux-block--process .eux-process-step:hover .eux-process-step__title {
	color: var(--eux-white);
}

.eux-block--process .eux-process-step__body {
	font-family: var(--eux-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--eux-ink-700);
	margin: 0;
	transition: color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--process .eux-process-step:hover .eux-process-step__body {
	color: rgba(255, 255, 255, 0.85);
}

/* Progress bar — fill width comes from --p inline custom property */
.eux-block--process .eux-process-step__bar {
	height: 4px;
	background: var(--eux-ink-100);
	border-radius: 99px;
	overflow: hidden;
	margin-top: auto;
	transition: background var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--process .eux-process-step__bar > i {
	display: block;
	height: 100%;
	width: var(--p, 20%);
	background: var(--eux-woo-500);
	border-radius: 99px;
	transition: background var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--process .eux-process-step:hover .eux-process-step__bar {
	background: rgba(255, 255, 255, 0.18);
}
.eux-block--process .eux-process-step:hover .eux-process-step__bar > i {
	background: var(--eux-white);
}

/* ==========================================================================
   THEME: CREAM — cream section, white cards (default)
   ========================================================================== */
.eux-block--process--cream {
	background: var(--eux-cream-50);
}

/* ==========================================================================
   THEME: LIGHT — pure white section, white cards
   ========================================================================== */
.eux-block--process--light {
	background: var(--eux-white);
}

/* ==========================================================================
   THEME: DARK — ink section, glass cards, purple hover
   ========================================================================== */
.eux-block--process--dark {
	background: var(--eux-ink-900);
	color: var(--eux-cream-100);
}

/* Header */
.eux-block--process--dark .eux-eyebrow              { color: var(--eux-woo-200); }
.eux-block--process--dark .eux-eyebrow::before      { background: var(--eux-woo-200); }
.eux-block--process--dark .eux-process-section__title { color: var(--eux-cream-100); }
.eux-block--process--dark .eux-process-section__title em { color: var(--eux-woo-300); }
.eux-block--process--dark .eux-process-section__sub { color: rgba(244, 240, 236, 0.7); }

/* Cards */
.eux-block--process--dark .eux-process-step {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-block--process--dark .eux-process-step:hover {
	background: var(--eux-woo-500);
	border-color: var(--eux-woo-500);
	box-shadow: 0 24px 48px color-mix(in srgb, var(--eux-woo-500) 40%, transparent);
}
.eux-block--process--dark .eux-process-step__num    { color: var(--eux-woo-300); }
.eux-block--process--dark .eux-process-step__sla    { color: rgba(244, 240, 236, 0.5); }
.eux-block--process--dark .eux-process-step__title  { color: var(--eux-cream-100); }
.eux-block--process--dark .eux-process-step__body   { color: rgba(244, 240, 236, 0.7); }
.eux-block--process--dark .eux-process-step__bar    { background: rgba(255, 255, 255, 0.1); }
.eux-block--process--dark .eux-process-step__bar > i { background: var(--eux-woo-300); }

/* Dark hover keeps the white-on-purple treatment, no extra rules needed —
   the base hover rules (which use var(--eux-white)) handle text/bar color. */

/* ==========================================================================
   REDUCED MOTION — disable card transforms but keep the color/swap behavior
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eux-block--process .eux-process-step,
	.eux-block--process .eux-process-step__num,
	.eux-block--process .eux-process-step__sla,
	.eux-block--process .eux-process-step__title,
	.eux-block--process .eux-process-step__body,
	.eux-block--process .eux-process-step__bar,
	.eux-block--process .eux-process-step__bar > i {
		transition: none !important;
	}
	.eux-block--process .eux-process-step:hover {
		transform: none !important;
	}
}