/**
 * CM2W Interactive Accordion.
 * Values come from CSS variables set on the widget wrapper by Elementor controls;
 * defaults live only in var() fallbacks so they never shadow the wrapper values.
 */

.cm2w-ia {
	display: flex;
	flex-direction: var(--cm2w-ia-flex-direction, row);
	gap: var(--cm2w-ia-gap, 0px);
	width: 100%;
	height: var(--cm2w-ia-box-height, var(--cm2w-ia-height, 500px));
}

/*
 * Horizontal: all cards share the collapsed basis and the open one grows. Vertical: the basis itself animates (row height → expanded height).
 * Active grow is 100, not 1: when a transition is interrupted the summed flex-grow would dip below 1 and the row would not fill its width.
 * "Ratio" mode: basis 0, collapsed grow 1, open grow N (sum never drops below 1); the collapsed width becomes min-width.
 */
.cm2w-ia-item {
	position: relative;
	box-sizing: border-box;
	flex: var(--cm2w-ia-grow, 0) 0 var(--cm2w-ia-basis, var(--cm2w-ia-collapsed-width, 176px));
	min-width: var(--cm2w-ia-min-width, 0px);
	min-height: 0;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--cm2w-ia-radius, 0);
	transition:
		flex-grow var(--cm2w-ia-duration, 600ms) var(--cm2w-ia-easing, cubic-bezier(0.4, 0, 0.2, 1)),
		flex-basis var(--cm2w-ia-duration, 600ms) var(--cm2w-ia-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

.cm2w-ia-item.is-active {
	flex-grow: var(--cm2w-ia-grow-active, 100);
	flex-basis: var(--cm2w-ia-basis-active, var(--cm2w-ia-collapsed-width, 176px));
}

/* No card open ("Open a Card on Load" off): horizontal cards share the row equally, vertical rows keep their height. */
.cm2w-ia.is-all-collapsed > .cm2w-ia-item {
	flex-grow: var(--cm2w-ia-grow-none, 1);
}

.cm2w-ia-item + .cm2w-ia-item {
	border: 0 solid var(--cm2w-ia-separator-color, transparent);
	border-inline-start-width: var(--cm2w-ia-separator-inline, var(--cm2w-ia-separator-width, 0px));
	border-block-start-width: var(--cm2w-ia-separator-block, 0px);
}

/* Media */

.cm2w-ia-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cm2w-ia-media .cm2w-ia-image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/* Video sits above the image and fades in only once it is actually playing; the image stays the fallback. */
.cm2w-ia-media .cm2w-ia-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms ease;
}

.cm2w-ia-media .cm2w-ia-video.is-playing {
	opacity: 1;
}

/* Overlays */

.cm2w-ia-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity var(--cm2w-ia-duration, 600ms) ease;
}

.cm2w-ia-overlay--collapsed {
	opacity: var(--cm2w-ia-overlay-collapsed-opacity, 1);
}

.cm2w-ia-overlay--expanded {
	opacity: 0;
}

.cm2w-ia-item.is-active > .cm2w-ia-overlay--collapsed {
	opacity: 0;
}

.cm2w-ia-item.is-active > .cm2w-ia-overlay--expanded {
	opacity: var(--cm2w-ia-overlay-expanded-opacity, 1);
}

/* Collapsed trigger (covers the whole collapsed card). Overrides theme button resets. */

.cm2w-ia .cm2w-ia-trigger,
.cm2w-ia .cm2w-ia-trigger:hover,
.cm2w-ia .cm2w-ia-trigger:focus {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: var(--cm2w-ia-trigger-v, var(--cm2w-ia-trigger-align, flex-end));
	justify-content: var(--cm2w-ia-trigger-h, flex-start);
	width: 100%;
	height: 100%;
	margin: 0;
	padding: var(--cm2w-ia-trigger-padding, 24px);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--cm2w-ia-title-color, #fff);
	font: inherit;
	text-align: start;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	transition: opacity calc(var(--cm2w-ia-duration, 600ms) * 0.5) ease, visibility 0s;
}

.cm2w-ia .cm2w-ia-trigger:hover {
	color: var(--cm2w-ia-title-color-hover, var(--cm2w-ia-title-color, #fff));
}

.cm2w-ia .cm2w-ia-trigger:focus {
	outline: none;
}

.cm2w-ia .cm2w-ia-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

.cm2w-ia-item.is-active > .cm2w-ia-trigger {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(var(--cm2w-ia-duration, 600ms) * 0.3) ease, visibility 0s linear calc(var(--cm2w-ia-duration, 600ms) * 0.3);
}

/* Title + icon group: the trigger positions it in the card, the group aligns title and icon to each other. */
.cm2w-ia-label {
	display: flex;
	flex-direction: var(--cm2w-ia-trigger-direction, row);
	align-items: var(--cm2w-ia-label-align, center);
	justify-content: var(--cm2w-ia-trigger-spread, space-between);
	gap: var(--cm2w-ia-trigger-gap, 12px);
	box-sizing: border-box;
	width: var(--cm2w-ia-label-width, 100%);
	height: var(--cm2w-ia-label-height, auto);
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
}

.cm2w-ia-title {
	min-width: 0;
	min-height: 0;
	color: inherit;
	/* Words never break: a word longer than the card overlaps the icon, so a too narrow card stays visible to the designer. */
	overflow-wrap: normal;
	word-break: normal;
	writing-mode: var(--cm2w-ia-title-writing-mode, horizontal-tb);
	transform: var(--cm2w-ia-title-rotate, none);
	text-align: var(--cm2w-ia-title-align, start);
}

.cm2w-ia-icon {
	display: inline-flex;
	flex: none;
	order: var(--cm2w-ia-icon-order, 0);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--cm2w-ia-icon-box, auto);
	height: var(--cm2w-ia-icon-box, auto);
	border: var(--cm2w-ia-icon-border-width, 0px) solid var(--cm2w-ia-icon-border-color, currentColor);
	border-radius: var(--cm2w-ia-icon-radius, 50%);
	background-color: var(--cm2w-ia-icon-bg, transparent);
	color: var(--cm2w-ia-icon-color, currentColor);
	font-size: var(--cm2w-ia-icon-size, 14px);
	line-height: 1;
	transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.cm2w-ia .cm2w-ia-trigger:hover .cm2w-ia-icon,
.cm2w-ia .cm2w-ia-trigger:focus-visible .cm2w-ia-icon {
	color: var(--cm2w-ia-icon-color-hover, var(--cm2w-ia-icon-color, currentColor));
	background-color: var(--cm2w-ia-icon-bg-hover, var(--cm2w-ia-icon-bg, transparent));
	border-color: var(--cm2w-ia-icon-border-color-hover, var(--cm2w-ia-icon-border-color, currentColor));
}

.cm2w-ia-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Nested content (Elementor container). Fades in after the card has started expanding. */

.cm2w-ia-item > .e-con {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	max-width: none;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(var(--cm2w-ia-duration, 600ms) * 0.3) ease, visibility 0s linear calc(var(--cm2w-ia-duration, 600ms) * 0.3);
}

.cm2w-ia-item.is-active > .e-con {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity calc(var(--cm2w-ia-duration, 600ms) * 0.6) ease calc(var(--cm2w-ia-duration, 600ms) * 0.4), visibility 0s;
}

.cm2w-ia-item > .e-con:focus {
	outline: none;
}

/*
 * Autoplay progress line: sibling of `.cm2w-ia`, so it spans the widget width and stays out of the nested-card list.
 * "Inside" pulls it up over the bottom edge by its own thickness. Shown only while autoplay runs (or paused); static 40% in the editor.
 */
.cm2w-ia-progress {
	position: relative;
	z-index: 4;
	display: block;
	overflow: hidden;
	height: var(--cm2w-ia-progress-height, 3px);
	margin-top: var(--cm2w-ia-progress-margin, calc(-1 * var(--cm2w-ia-progress-height, 3px)));
	background-color: var(--cm2w-ia-progress-track, rgba(255, 255, 255, 0.25));
	pointer-events: none;
	visibility: hidden;
}

.cm2w-ia-progress.is-running,
.cm2w-ia-progress.is-preview {
	visibility: visible;
}

.cm2w-ia-progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--cm2w-ia-progress-color, #fff);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

[dir="rtl"] .cm2w-ia-progress-bar {
	transform-origin: 100% 50%;
}

.cm2w-ia-progress.is-preview .cm2w-ia-progress-bar {
	transform: scaleX(0.4);
}

@media (prefers-reduced-motion: reduce) {
	.cm2w-ia-progress {
		display: none;
	}

	.cm2w-ia-item,
	.cm2w-ia-overlay,
	.cm2w-ia .cm2w-ia-trigger,
	.cm2w-ia-item > .e-con {
		transition: none !important;
	}
}