/*
 * "How the loop closes" — child-theme refinement of the client's section.
 * Structure stays as in Elementor: .mx-loop › .mx-loop__intro (left) + .mx-loop__steps › .mx-step ×3 (right).
 *
 * States
 *   calm  — default: Elementor editor, prefers-reduced-motion, no JS. Static, fully readable.
 *   live  — .mx-loop.is-live, added by assets/js/loop.js on the real site only.
 *
 * Selectors match the parent's specificity (.elementor .e-con.mx-…) and load after it, so they win
 * over the parent but still lose to anything set per element in the Elementor panel (loaded later).
 */

/* ---- Section colours (exactly as specified) ----------------------------------------------- */
:root {
	--mxl-bg:        #EFF5ED; /* background */
	--mxl-ink:       #091D0D; /* headings + main text */
	--mxl-sub:       #839085; /* small captions only (3.0:1 on the background) */
	--mxl-body:      #5B6B5F; /* paragraphs — darker sage, 5.1:1 on the background (WCAG AA) */
	--mxl-card:      #9DCB5B; /* cards */
	--mxl-card-ink:  #091D0D; /* text on cards (9.4:1) */
	--mxl-gold:      #F4AF35; /* lines, circles, small details only — never text on light */

	/* Derived from the same family (depth only) */
	--mxl-card-dim:  #C2DE98; /* leaf mixed toward the background: cards out of focus (stays opaque) */
	--mxl-line:      rgba(9, 29, 13, 0.12);
	--mxl-track:     rgba(9, 29, 13, 0.10);
	--mxl-shadow:    0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 18px 40px -26px rgba(9, 29, 13, 0.45);
	--mxl-shadow-up: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 34px 60px -30px rgba(9, 29, 13, 0.55);
	--mxl-rail-x:    36px; /* centre of the icon/number column = where the gold rail runs */
	--mxl-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Section ------------------------------------------------------------------------------ */
.elementor .e-con.mx-loop { background: var(--mxl-bg); }

@media (min-width: 1025px) {
	.elementor .e-con.mx-loop {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: clamp(3rem, 6vw, 7rem);
		align-items: start;
	}
	.elementor .e-con.mx-loop__steps { grid-column: 2; }
}

/* ---- Left column -------------------------------------------------------------------------- */
.elementor .e-con.mx-loop__intro { --gap: 1.4rem; --row-gap: 1.4rem; }

/* Small title: caption colour, gold line underneath */
.elementor .mx-loop .elementor-element.mx-eyebrow .elementor-heading-title {
	display: inline-block;
	font-family: var(--mx-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mxl-sub);
}
.elementor .mx-loop .elementor-element.mx-eyebrow .elementor-heading-title::before { content: none; }
.elementor .mx-loop .elementor-element.mx-eyebrow .elementor-heading-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--mxl-gold);
	transform: scaleX(var(--mxl-eyebrow, 1));
	transform-origin: left center;
}

.elementor .mx-loop .elementor-element.mx-title .elementor-heading-title {
	max-width: 15ch;
	font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.75rem);
	line-height: 1.04;
	color: var(--mxl-ink);
}

.elementor .mx-loop .elementor-element.mx-lead { max-width: 46ch; color: var(--mxl-body); }

/* Check list: gold ring, ink check */
.elementor .mx-loop .elementor-element.mx-checklist .elementor-icon-list-items { gap: 14px; }
.elementor .mx-loop .elementor-element.mx-checklist .elementor-icon-list-icon {
	width: 26px;
	height: 26px;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--mxl-gold);
}
.elementor .mx-loop .elementor-element.mx-checklist .elementor-icon-list-icon svg { fill: var(--mxl-ink); }
.elementor .mx-loop .elementor-element.mx-checklist .elementor-icon-list-text { color: var(--mxl-ink); font-size: 0.975rem; }

/* Scope: gold bar on its side (a real element so it can grow) */
.elementor .mx-loop .e-con.mx-scope {
	position: relative;
	margin-top: 0.5rem;
	padding: 1.35rem 1.5rem 1.35rem 1.75rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--mxl-card) 20%, var(--mxl-bg));
	box-shadow: none;
}
.elementor .mx-loop .e-con.mx-scope::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: auto;
	width: 3px;
	height: calc(100% - 28px); /* explicit: Elementor gives container ::before its own height */
	border-radius: 3px;
	opacity: 1;
	mix-blend-mode: normal;
	background: var(--mxl-gold);
	transform: scaleY(var(--mxl-scope, 1));
	transform-origin: top center;
}
.elementor .mx-loop .elementor-element.mx-scope__title .elementor-heading-title {
	font-family: var(--mx-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mxl-ink);
}
.elementor .mx-scope .elementor-element.mx-scope__text { color: var(--mxl-body); font-size: 0.9rem; line-height: 1.6; }

/* ---- Right column: three vertical cards ---------------------------------------------------- */
.elementor .e-con.mx-loop__steps {
	--display: flex;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: relative;
	isolation: isolate;
}

/* Static gold rail between the cards (calm state). Live state draws it instead (SVG below). */
.elementor .e-con.mx-loop__steps::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: auto;
	left: var(--mxl-rail-x);
	width: 1.5px;
	height: 100%;
	border-radius: 0;
	opacity: 1;
	mix-blend-mode: normal;
	margin-left: -0.75px;
	background: var(--mxl-gold);
	z-index: -1;
}

.elementor .e-con.mx-step {
	--display: grid;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"num  text";
	column-gap: 0.5rem;
	row-gap: 0.6rem;
	align-items: start;
	padding: 1.75rem 1.75rem 1.75rem 0;
	border-radius: 20px;
	background-color: var(--mxl-card);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 45%);
	color: var(--mxl-card-ink);
	box-shadow: var(--mxl-shadow);
	transition: transform 0.5s var(--mxl-ease), box-shadow 0.5s var(--mxl-ease), background-color 0.5s var(--mxl-ease);
}
/* Parent hover lift is replaced by the desktop-only hover below */
.elementor .e-con.mx-step:hover { transform: none; box-shadow: var(--mxl-shadow); }

.elementor .mx-step > .elementor-element.mx-step__icon { grid-area: icon; justify-self: center; width: auto; }
.elementor .mx-step > .elementor-element.mx-step__num { grid-area: num; justify-self: center; width: auto; }
.elementor .mx-step > .elementor-element.mx-step__title { grid-area: title; align-self: center; }
.elementor .mx-step > .elementor-element.mx-step__text { grid-area: text; }

.elementor .mx-step .elementor-element.mx-step__icon .elementor-icon-wrapper { line-height: 0; }
.elementor .mx-step .elementor-element.mx-step__icon .elementor-icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(9, 29, 13, 0.08);
	box-shadow: inset 0 0 0 1px rgba(9, 29, 13, 0.08);
	font-size: 18px;
	color: var(--mxl-card-ink);
}
.elementor .mx-step .elementor-element.mx-step__icon .elementor-icon svg { width: 18px; height: 18px; fill: var(--mxl-card-ink); }

/* Number in a circle, centred on the rail */
.elementor .mx-step .elementor-element.mx-step__num .elementor-heading-title {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mxl-card);
	box-shadow: inset 0 0 0 1.5px rgba(9, 29, 13, 0.35);
	font-family: var(--mx-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mxl-card-ink);
	transition: background-color 0.45s var(--mxl-ease), box-shadow 0.45s var(--mxl-ease), transform 0.45s var(--mxl-ease);
}

.elementor .mx-step .elementor-element.mx-step__title .elementor-heading-title {
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--mxl-card-ink);
}
.elementor .mx-step .elementor-element.mx-step__text {
	max-width: 52ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mxl-card-ink);
}

/* Number circle filled with gold (reached in live mode, or hover) */
.elementor .mx-step.is-reached .elementor-element.mx-step__num .elementor-heading-title {
	background: var(--mxl-gold);
	box-shadow: inset 0 0 0 1.5px var(--mxl-gold), 0 0 0 5px rgba(244, 175, 53, 0.22);
}

/* =========================================================================================
 * LIVE — real site only (assets/js/loop.js adds .is-live)
 * ========================================================================================= */

/* The drawn rail replaces the static one */
.elementor .mx-loop.is-live .e-con.mx-loop__steps::before { background: var(--mxl-track); }
.mxl-rail {
	position: absolute;
	top: 0;
	left: var(--mxl-rail-x);
	width: 2px;
	height: 100%;
	margin-left: -1px;
	overflow: visible;
	z-index: -1;
	pointer-events: none;
}
.mxl-rail line {
	stroke: var(--mxl-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

/* Desktop: sticky left column, cards scroll past it, the centred card is in focus */
@media (min-width: 1025px) {
	.elementor .mx-loop.is-live .e-con.mx-loop__intro {
		position: sticky;
		top: clamp(5rem, 14vh, 8.5rem);
		align-self: start;
	}
	.elementor .mx-loop.is-live .e-con.mx-loop__steps { gap: clamp(4rem, 16vh, 10rem); padding-block: 4vh 18vh; }
	/* Out-of-focus cards: lighter but opaque, so the rail never shows through them */
	.elementor .mx-loop.is-live .e-con.mx-step { background-color: var(--mxl-card-dim); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; }
	.elementor .mx-loop.is-live .e-con.mx-step > .elementor-element { opacity: 0.62; transition: opacity 0.5s var(--mxl-ease); }
	.elementor .mx-loop.is-live .e-con.mx-step.is-current { background-color: var(--mxl-card); box-shadow: var(--mxl-shadow); }
	.elementor .mx-loop.is-live .e-con.mx-step.is-current > .elementor-element { opacity: 1; }
}

/* Mobile/tablet: no sticky, no pin — only the rail draws. More room so the rail shows between cards */
@media (max-width: 1024px) {
	.elementor .mx-loop.is-live .e-con.mx-loop__steps { gap: 2.75rem; }
	.elementor .e-con.mx-step { padding: 1.4rem 1.25rem 1.4rem 0; column-gap: 0.25rem; }
	:root { --mxl-rail-x: 30px; }
	.elementor .e-con.mx-step { grid-template-columns: 60px minmax(0, 1fr); }
	.elementor .mx-step .elementor-element.mx-step__title .elementor-heading-title { font-size: 1.3rem; }
}

/* Hover — desktop with a real pointer only */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	.elementor .e-con.mx-step:hover {
		transform: translateY(-6px);
		background-color: var(--mxl-card);
		box-shadow: var(--mxl-shadow-up);
	}
	.elementor .e-con.mx-step:hover > .elementor-element { opacity: 1; }
	.elementor .e-con.mx-step:hover .elementor-element.mx-step__num .elementor-heading-title {
		background: var(--mxl-gold);
		box-shadow: inset 0 0 0 1.5px var(--mxl-gold), 0 0 0 5px rgba(244, 175, 53, 0.22);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .e-con.mx-step,
	.elementor .mx-step .elementor-element.mx-step__num .elementor-heading-title { transition: none; }
}