/* Expanding Content Cards for Avada — v1.1.0 */

.ms-xc {
	--_gap: var(--ms-xc-gap, 24px);
	--_dur: var(--ms-xc-duration, 600ms);
	--_ease: var(--ms-xc-ease, cubic-bezier(0.65, 0, 0.35, 1));
	--_pad-l: var(--ms-xc-pad-l, 30px);
	--_pad-r: var(--ms-xc-pad-r, 30px);
	--_ink: #1b2a4b;
	--_bw: max(0px, var(--ms-xc-border-w, 0px));
	/* Fixed text measures (set from JS) so text never rewraps while cards resize. */
	--_text-w: calc(var(--ms-xc-col, 100%) - var(--_pad-l) - var(--_pad-r) - 2 * var(--_bw));
	--_open-text-w: calc(var(--ms-xc-open, 100%) - var(--_pad-l) - var(--_pad-r) - 2 * var(--_bw));
	position: relative;
	width: 100%;
}

.ms-xc__track {
	display: flex;
	align-items: flex-start;
	gap: var(--_gap);
}

/* Stray markup from wpautop or builders never breaks the row. */
.ms-xc__track > :not(.ms-xc__card) { display: none !important; }

/* ---------------------------------------------------------------- Card */
.ms-xc__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--ms-xc-card-bg, #fff);
	border: var(--ms-xc-border-w, 0) solid var(--ms-xc-border-c, transparent);
	border-radius: var(--ms-xc-radius, 0);
	box-shadow: 0 0 0 0 transparent;
	cursor: pointer;
}

.ms-xc[data-click="button"] .ms-xc__card { cursor: auto; }

/* JS-driven layout: widths and overlaps are set inline in px. */
.ms-xc.is-ready:not(.is-stacked) .ms-xc__track { gap: 0; }
.ms-xc.is-ready:not(.is-stacked) .ms-xc__card {
	flex: 0 0 auto;
	transition:
		width var(--_dur) var(--_ease),
		margin-left var(--_dur) var(--_ease),
		box-shadow var(--_dur) var(--_ease);
}

.ms-xc__card.is-overlap { box-shadow: var(--ms-xc-shadow, -8px 0 24px -4px rgba(20, 35, 75, 0.12)); }

.ms-xc__inner {
	box-sizing: border-box;
	padding: var(--ms-xc-pad-t, 24px) var(--_pad-r) var(--ms-xc-pad-b, 22.5px) var(--_pad-l);
}

/* -------------------------------------------------------------- Type */
.ms-xc .ms-xc__heading {
	margin: 0;
	padding: 0;
	font-family: var(--ms-xc-h-ff, inherit);
	font-weight: var(--ms-xc-h-fw, 400);
	font-style: var(--ms-xc-h-fs, normal);
	font-size: var(--ms-xc-h-size, 32px);
	line-height: var(--ms-xc-h-lh, 1.2);
	letter-spacing: var(--ms-xc-h-ls, 0);
	text-transform: var(--ms-xc-h-tt, none);
	color: var(--ms-xc-h-color, var(--_ink));
}

.ms-xc__rule {
	display: block;
	height: var(--ms-xc-rule-w, 2px);
	margin: var(--ms-xc-rule-space, 18px) 0;
	background: var(--ms-xc-rule-c, var(--_ink));
}

.ms-xc .ms-xc__sub {
	margin: 0;
	padding: 0;
	font-family: var(--ms-xc-s-ff, inherit);
	font-weight: var(--ms-xc-s-fw, 400);
	font-style: var(--ms-xc-s-fs, normal);
	font-size: var(--ms-xc-s-size, 20px);
	line-height: var(--ms-xc-s-lh, 1.35);
	letter-spacing: var(--ms-xc-s-ls, 0);
	text-transform: var(--ms-xc-s-tt, none);
	color: var(--ms-xc-s-color, var(--_ink));
}

/* Heading and subheading keep the same measure in every state (closed, open, squeezed),
   so they never rewrap — the card simply reveals or clips them. The divider line has
   no fixed width: it follows the card's animated width, so it grows and shrinks smoothly. */
.ms-xc.is-ready:not(.is-stacked) .ms-xc__heading,
.ms-xc.is-ready:not(.is-stacked) .ms-xc__sub {
	box-sizing: border-box;
	width: var(--_text-w);
	max-width: none;
}
.ms-xc.is-ready:not(.is-stacked) .ms-xc__body {
	width: var(--_open-text-w);
}
.ms-xc.is-ready:not(.is-stacked) .ms-xc__card:not(.is-open) .ms-xc__rule {
	/* when squeezed, the line runs under the overlapping card just like the text */
	min-width: var(--_text-w);
}

/* ----------------------------------------------------------- Toggle */
.ms-xc .ms-xc__toggle {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-top: var(--ms-xc-toggle-space, 60px);
	cursor: pointer;
	font-family: var(--ms-xc-t-ff, inherit);
	font-weight: var(--ms-xc-t-fw, 500);
	font-style: var(--ms-xc-t-fs, normal);
	font-size: var(--ms-xc-t-size, 14px);
	line-height: var(--ms-xc-t-lh, 1.2);
	letter-spacing: var(--ms-xc-t-ls, 0.02em);
	text-transform: var(--ms-xc-t-tt, uppercase);
	color: var(--ms-xc-t-color, var(--_ink));
	white-space: nowrap;
	transition: color 0.2s ease, opacity 0.2s ease;
}
.ms-xc .ms-xc__toggle:hover { color: var(--ms-xc-t-hover, var(--ms-xc-t-color, var(--_ink))); opacity: 0.8; }
.ms-xc .ms-xc__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.ms-xc__icon {
	flex: none;
	width: 0.72em;
	height: auto;
	transition: transform var(--_dur) var(--_ease);
}
.ms-xc--no-icon .ms-xc__icon { display: none; }
.ms-xc__card.is-open .ms-xc__icon { transform: rotate(180deg); }

/* ------------------------------------------------------------ Panel */
.ms-xc__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var(--_dur) var(--_ease),
		visibility 0s linear var(--_dur);
}
.ms-xc__card.is-open .ms-xc__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows var(--_dur) var(--_ease), visibility 0s;
}
.ms-xc__panel-clip { min-height: 0; overflow: hidden; }

.ms-xc__body {
	padding-top: calc(var(--ms-xc-toggle-space, 60px) * 0.6);
	padding-bottom: 8px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity calc(var(--_dur) * 0.6) ease, transform calc(var(--_dur) * 0.6) ease;
	font-family: var(--ms-xc-b-ff, inherit);
	font-weight: var(--ms-xc-b-fw, 400);
	font-style: var(--ms-xc-b-fs, normal);
	font-size: var(--ms-xc-b-size, 18px);
	line-height: var(--ms-xc-b-lh, 1.5);
	letter-spacing: var(--ms-xc-b-ls, 0);
	text-transform: var(--ms-xc-b-tt, none);
	color: var(--ms-xc-b-color, var(--_ink));
}
.ms-xc__card.is-open .ms-xc__body {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--_dur) * 0.35);
}

.ms-xc .ms-xc__body > :first-child { margin-top: 0; }
.ms-xc .ms-xc__body > :last-child { margin-bottom: 0; }
.ms-xc .ms-xc__body p,
.ms-xc .ms-xc__body li {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.ms-xc .ms-xc__body ul { margin: 0 0 1em; padding-left: 1.6em; list-style: disc; }
.ms-xc .ms-xc__body li { margin: 0 0 0.6em; padding: 0; }
.ms-xc .ms-xc__body li::marker { color: var(--ms-xc-bullet, currentColor); }

/* ---------------------------------------------- Stacked (narrow) mode */
.ms-xc.is-stacked .ms-xc__track { flex-direction: column; align-items: stretch; }
.ms-xc.is-stacked .ms-xc__card { flex: none; width: 100% !important; margin-left: 0 !important; }
.ms-xc.is-stacked .ms-xc__heading { min-height: 0 !important; }

/* Disable motion during resize / initial paint. */
.ms-xc.no-anim .ms-xc__card,
.ms-xc.no-anim .ms-xc__panel,
.ms-xc.no-anim .ms-xc__body,
.ms-xc.no-anim .ms-xc__icon { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.ms-xc .ms-xc__card,
	.ms-xc .ms-xc__panel,
	.ms-xc .ms-xc__body,
	.ms-xc .ms-xc__icon { transition-duration: 1ms !important; transition-delay: 0s !important; }
}