/*!
 * All-In-One-Coach — Coach Process
 * Numbered package cards, with the deck-of-cards entrance primitives.
 */

.aioc-process {
	--aioc-process-bg: #f7f1ea;
	--aioc-process-fill: #efe4d9;
	--aioc-process-border: rgba(110, 20, 15, 0.12);
	--aioc-process-divider: rgba(110, 20, 15, 0.1);
	--aioc-process-radius: 24px;
	--aioc-process-gap: 26px;
	--aioc-process-num-col: 112px;

	position: relative;
	background-color: var(--aioc-process-bg);
	font-family: var(--aioc-font-body);
}

.aioc-process__inner {
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	padding: 100px var(--aioc-shell-gut);
}

/* ---------------------------------------------------------------- Heading */

.aioc-process__head {
	margin-bottom: 70px;
	text-align: center;
}

.aioc-process__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 26px;
	color: #6b1210;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.5;
	text-transform: uppercase;
}

.aioc-process__eyebrow-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: currentColor;
}

.aioc-process__heading {
	margin: 0;
	color: #171313;
	font-family: var(--aioc-font-display);
	font-size: clamp(2.1rem, 4vw, 3.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.022em;
}

.aioc-process__heading-accent {
	color: #5e110f;
}

/* ------------------------------------------------------------------ Cards */

.aioc-process__list-wrap {
	position: relative;
}

.aioc-process__list {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aioc-process__slot {
	position: relative;
	list-style: none;
}

.aioc-process__slot + .aioc-process__slot {
	margin-top: var(--aioc-process-gap);
}

.aioc-process__card {
	position: relative;
	display: grid;
	grid-template-columns: var(--aioc-process-num-col) minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.25fr);
	align-items: center;
	gap: 0;
	padding: 42px 40px 42px 32px;
	border-radius: var(--aioc-process-radius);
	border: 1px solid var(--aioc-process-border);
	background-color: transparent;
}

/* The featured card carries the fill permanently. */
.aioc-process__card--filled {
	border-color: transparent;
}

.aioc-process__card--filled .aioc-process__card-bg {
	opacity: 1;
}

/* Paint layer, so the stacked cards can carry the fill while travelling and
   fade to their resting surface once landed. */
.aioc-process__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-color: var(--aioc-process-fill);
	opacity: 0;
	pointer-events: none;
}

/* Depth shading for the stack. Never visible once a card has landed. */
.aioc-process__card-dim {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
}

.aioc-process__num,
.aioc-process__main,
.aioc-process__price,
.aioc-process__desc {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.aioc-process__num {
	color: #a79187;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.aioc-process__main {
	padding-right: 32px;
}

.aioc-process__title {
	margin: 0 0 12px;
	color: #171313;
	font-family: var(--aioc-font-display);
	font-size: clamp(1.4rem, 2vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.aioc-process__sub {
	margin: 0;
	color: #6b1210;
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.45;
}

.aioc-process__price {
	padding-inline: 32px;
	border-left: 1px solid var(--aioc-process-divider);
	color: #6b1210;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.5;
}

.aioc-process__price-line {
	display: block;
}

.aioc-process__desc {
	padding-left: 32px;
	border-left: 1px solid var(--aioc-process-divider);
	color: #2f2a28;
	font-size: 0.94rem;
	line-height: 1.6;
}

.aioc-process__desc p {
	margin: 0;
}

/* ----------------------------------------------------------- Closing row */

.aioc-process__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin-top: 64px;
}

.aioc-process__foot-label {
	color: #2f2a28;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.aioc-process__foot-note {
	color: #6b5b52;
	font-size: 0.95rem;
}

.aioc-process__foot-note a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   Motion layer — initial states and primitives only.
   ========================================================================== */

/* The slot is the clipping container the deck travels inside. */
.aioc-process__slot {
	clip-path: inset(0);
}

/* While the deck is stacked the cards are pinned to the TOP of their slot.
   The slot then uncovers each card downwards from its first line, so content
   is never revealed mid-sentence. (Anchoring to the bottom made the card
   slide down with the opening slot, showing its middle first.) */
.aioc-process.is-decked .aioc-process__card {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

.aioc-js .aioc-process.aioc-anim:not(.aioc-process--shown) .aioc-process__head [data-aioc-el],
.aioc-js .aioc-process.aioc-anim:not(.aioc-process--shown) .aioc-process__foot {
	opacity: 0;
}

.aioc-js .aioc-process.aioc-anim:not(.aioc-process--shown) .aioc-process__heading {
	opacity: 0;
}

.aioc-js .aioc-process.aioc-anim:not(.aioc-process--shown) /* Masks created at runtime around each split line and each number. */
.aioc-process .aioc-mask {
	display: block;
	overflow: hidden;
	/* Descenders (g, y, p) would otherwise be clipped by the mask edge. */
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}

.aioc-process .aioc-split-line {
	display: block;
	transform-origin: 0 0;
}

/* will-change is carried only while the deck is running. */
.aioc-process.is-animating .aioc-process__card,
.aioc-process.is-animating .aioc-split-line,
.aioc-process.is-animating .aioc-process__num-text,
.aioc-process.is-animating .aioc-process__card-bg,
.aioc-process.is-animating .aioc-process__card-dim {
	will-change: transform, opacity;
}

.aioc-process__card {
	transition: box-shadow 0.4s var(--aioc-ease-out);
}

.aioc-process__card.is-lifted {
	box-shadow: 0 26px 50px -30px rgba(23, 19, 19, 0.4);
}

/* ------------------------------------------------------------ Breakpoints */

@media (max-width: 1100px) {
	.aioc-process__card {
		grid-template-columns: 72px minmax(0, 1fr);
		row-gap: 22px;
		align-items: start;
	}

	.aioc-process {
		--aioc-process-num-col: 72px;
	}

	.aioc-process__main {
		padding-right: 0;
	}

	.aioc-process__price,
	.aioc-process__desc {
		grid-column: 2;
		padding-inline: 0;
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--aioc-process-divider);
		padding-top: 20px;
	}
}

@media (max-width: 1024px) {
	.aioc-process__inner {
		padding: 80px 32px;
	}

	.aioc-process__head {
		margin-bottom: 48px;
	}
}

@media (max-width: 767px) {
	.aioc-process__inner {
		padding: 10px;
	}

	/* The list sits flush inside the inner's 1em, so the cards are exactly 1em
	   from the screen edge with nothing else between. */
	.aioc-process__list,
	.aioc-process__list-wrap {
		padding-inline: 0;
		margin-inline: 0;
	}

	.aioc-process__card {
		/* Every inset here comes straight off the text column, and at 375px the
		   copy was wrapping a word per line — which is what made the cards read
		   as tall thin strips. */
		padding: 14px;
		grid-template-columns: 1fr;
		gap: 12px 0;
		border-radius: 16px;
	}

	/* Squarer: the copy is what makes these tall, so it is set a little
	   tighter and the description is capped to a readable measure rather than
	   running the full height of the card. */
	.aioc-process__title {
		font-size: 1.35rem;
		line-height: 1.15;
	}

	.aioc-process__sub,
	.aioc-process__desc {
		font-size: 0.95rem;
		line-height: 1.5;
	}

	/* The amounts are long enough to run past the card on a phone
	   ("Individual / Couple 3,800-4,750 AED"), so they wrap instead of being
	   held on one line. nowrap here is what pushed them over the edge. */
	.aioc-process__price {
		display: block;
		min-width: 0;
	}

	.aioc-process__price-line {
		display: block;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.aioc-process {
		--aioc-process-num-col: 0px;
	}

	.aioc-process__price,
	.aioc-process__desc {
		grid-column: 1;
	}

		.aioc-process__foot {
		flex-direction: column;
		gap: 18px;
		/* The row used to sit 64px below the cards, which on a phone reads as
		   a gap rather than a close. */
		margin-top: 24px;
		text-align: center;
	}

	.aioc-process--swipe .aioc-process__foot {
		margin-top: 16px;
	}

	.aioc-process__heading {
		font-size: clamp(1.9rem, 8vw, 2.4rem);
	}
}

/* ------------------------------------------------ Swipeable cards (mobile) */

/* Only when the widget's "Swipeable cards on mobile" switch is on, and only
   below the breakpoint — the class is inert everywhere else. */
@media (max-width: 767px) {
	.aioc-process--swipe .aioc-process__list {
		display: flex;
		flex-wrap: nowrap;
		/* Pinned to the top edge. Without this the row inherits an end-aligned
		   value and a taller card hangs 26px above the rest, which reads as the
		   first card being stepped up out of the line. */
		align-items: flex-start;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* The row runs to the screen edge so a card can sit half off it, but
		   the first card still lines up with the copy above. */
		margin-inline: calc(var(--aioc-process-gut, 10px) * -1);
		padding-inline: var(--aioc-process-gut, 10px);
		padding-block: 4px 10px;
	}

	.aioc-process--swipe .aioc-process__list::-webkit-scrollbar {
		display: none;
	}

	.aioc-process--swipe .aioc-process__slot {
		flex: 0 0 auto;
		/* Narrower than the screen, so the next card always peeks. */
		width: min(78vw, 300px);
		/* Left to its natural height. The module measures the tallest card and
		   applies it to all of them; stretching here instead would cap that
		   measurement at the height of the shortest card's line box and let
		   the longest card overflow its own slot.
		   border-box explicitly, or the min-height the module sets lands on the
		   content box and every slot comes out its own padding taller than the
		   figure that was measured. */
		box-sizing: border-box;
		height: auto;
		/* The stacked layout spaces the cards with a top margin on every slot
		   after the first. In a row that margin becomes a vertical offset, and
		   the first card ends up sitting 26px above the rest. The row spaces
		   itself with `gap` instead. */
		margin-block: 0;
		display: flex;
		flex-direction: column;
		scroll-snap-align: start;
	}

	.aioc-process--swipe .aioc-process__card {
		position: relative;
		flex: 1 1 auto;
	}

	/* The deck's stacking transforms have no meaning in a row. */
	.aioc-process--swipe .aioc-process__card-dim {
		display: none;
	}

	.aioc-process--swipe 	/* A swipeable card has to be readable at a glance without filling the
	   screen, so everything inside it is set a step down from the stacked
	   version: tighter padding, smaller type, shorter leading. */
	.aioc-process--swipe .aioc-process__card {
		padding: 0.85em 0.95em;
		gap: 0.5em 0;
	}

	.aioc-process--swipe .aioc-process__num {
		font-size: 11px;
	}

	.aioc-process--swipe .aioc-process__title {
		margin-block-end: 6px;
		font-size: 1.1rem;
		line-height: 1.15;
	}

	.aioc-process--swipe .aioc-process__sub {
		font-size: 0.82rem;
		line-height: 1.35;
	}

	.aioc-process--swipe .aioc-process__price {
		margin-block: 2px;
	}

	.aioc-process--swipe .aioc-process__price-line {
		font-size: 0.86rem;
		line-height: 1.35;
	}

	.aioc-process--swipe .aioc-process__desc {
		font-size: 0.82rem;
		line-height: 1.4;
	}

	/* The rules inside the card are the last of its vertical budget. */
	.aioc-process--swipe .aioc-process__card hr,
	.aioc-process--swipe .aioc-process__price::before,
	.aioc-process--swipe .aioc-process__desc::before {
		margin-block: 8px;
	}

	.aioc-process__swipe-row {
		display: flex;
		justify-content: center;
		margin-block-start: 6px;
	}

	/* Pre-reveal state for the row. The module clears it card by card as each
	   one arrives; if the module never runs, nothing here applies because the
	   class below is only ever added by JS. */
	/* The reveal moves the card sideways, never up: a vertical offset means a
	   card that has not revealed yet sits lower than one that has, and the row
	   reads as stepped rather than as a single line. */
	.aioc-process--swipe .aioc-process__list.is-swipe-ready .aioc-process__slot {
		opacity: 0;
		transform: translate3d(22px, 0, 0);
		transition:
			opacity 0.55s var(--aioc-ease-out),
			transform 0.55s var(--aioc-ease-out);
	}

	.aioc-process--swipe .aioc-process__list.is-swipe-ready .aioc-process__slot.is-in {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-process .aioc-process__head [data-aioc-el],
	.aioc-js .aioc-process .aioc-process__heading,
	.aioc-js .aioc-process .aioc-process__foot {
		opacity: 1;
	}

	.aioc-js .aioc-process 	.aioc-process .aioc-mask {
		padding-block-end: 0;
		margin-block-end: 0;
	}

	.aioc-process__card {
		transition-duration: 0.01ms !important;
	}
}