/*!
 * Phase Cards for Elementor
 *
 * Every selector is prefixed with .pce- so nothing leaks into the rest of the site.
 * The real values are written by Elementor controls (per widget instance, under
 * {{WRAPPER}}). The values below are fallbacks that match the original design, and
 * are kept at low specificity so the Elementor controls always win.
 */

.pce-section {
	position: relative;
	box-sizing: border-box;
}

.pce-section *,
.pce-section *::before,
.pce-section *::after {
	box-sizing: border-box;
}

/* ---------- Container ---------- */

.pce-container {
	display: flex;
	flex-direction: var(--pce-dir, row);
	gap: 8px;
	width: 100%;
	height: var(--pce-container-h, 330px);
	padding: 0 10px;
	direction: ltr;
}

/* ---------- Card ---------- */

.pce-card {
	position: relative;
	min-width: 0; /* flex items: never let content block the shrink */
	overflow: hidden;
	flex: var(--pce-card-flex, 1);
	height: var(--pce-card-h, auto);
	border-radius: 28px;
	cursor: pointer;
	isolation: isolate; /* keeps the rounded clip correct in Safari while children scale */
	-webkit-tap-highlight-color: transparent;
	transition:
		flex var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms),
		height var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms),
		background-color var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms),
		border-color var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms),
		box-shadow var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms),
		opacity var(--pce-card-dur, 1000ms) var(--pce-card-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-card-delay, 0ms);
}

.pce-card.active {
	flex: var(--pce-card-flex-active, 3.2);
	height: var(--pce-card-h-active, var(--pce-card-h, auto));
}

.pce-card:focus {
	outline: none;
}

.pce-card:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Media (image / video) ---------- */

/* .pce-card > .pce-media beats Elementor's ".elementor img { height:auto; max-width:100% }" */
/*
 * PERFORMANCE (v1.0.2 freeze fix):
 * The media no longer follows the card's width while the card animates. JS sets
 * --pce-media-open-w / --pce-media-open-h to the size of an OPEN card, so the image
 * keeps one fixed size and the card simply reveals more or less of it (overflow:hidden).
 * Before, the browser had to re-scale/re-paint every (often full-size) image on every
 * frame of the 1s width animation, which froze the page while switching.
 * The image is centred with translate() because margin:auto cannot centre an
 * absolutely positioned box that is wider than the card.
 */
.pce-card > .pce-media {
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	margin: 0;
	display: block;
	width: var(--pce-media-w, var(--pce-media-open-w, 100%));
	height: var(--pce-media-h, var(--pce-media-open-h, 100%));
	max-width: none;
	max-height: none;
	border: 0;
	object-fit: var(--pce-media-fit, cover);
	object-position: var(--pce-media-pos, 50% 50%);
	opacity: var(--pce-media-opacity, 0);
	transform: translate(-50%, -50%) scale(var(--pce-media-scale, 1.12));
	pointer-events: none;
	z-index: 0;
	/* own compositor layer: fade + zoom run on the GPU, no repaint per frame */
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition:
		opacity var(--pce-media-fade-dur, 800ms) var(--pce-media-fade-ease, ease) var(--pce-media-fade-delay, 0ms),
		filter var(--pce-media-fade-dur, 800ms) var(--pce-media-fade-ease, ease) var(--pce-media-fade-delay, 0ms),
		transform var(--pce-media-zoom-dur, 1200ms) var(--pce-media-zoom-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-media-zoom-delay, 0ms);
}

.pce-card > .pce-media--has-controls {
	pointer-events: auto;
}

.pce-card.active > .pce-media {
	opacity: var(--pce-media-opacity-active, 1);
	transform: translate(-50%, -50%) scale(var(--pce-media-scale-active, 1));
}

/* ---------- Overlay ---------- */

.pce-overlay {
	position: absolute;
	inset: 0;
	opacity: var(--pce-overlay-opacity, 0);
	pointer-events: none;
	z-index: 1;
	transition: opacity var(--pce-overlay-dur, 700ms) var(--pce-overlay-ease, ease) var(--pce-overlay-delay, 0ms),
		background-color var(--pce-overlay-dur, 700ms) var(--pce-overlay-ease, ease) var(--pce-overlay-delay, 0ms);
}

.pce-card.active .pce-overlay {
	opacity: var(--pce-overlay-opacity-active, 1);
}

/* ---------- Card number ---------- */

.pce-number {
	position: absolute;
	top: var(--pce-number-top, 45px);
	left: var(--pce-number-left, 40px);
	right: var(--pce-number-right, auto);
	font-size: 14px;
	color: var(--pce-number-color, #222);
	background-color: var(--pce-number-bg, transparent);
	z-index: 3;
	pointer-events: none;
	transition: color var(--pce-number-dur, 500ms) var(--pce-number-ease, ease) var(--pce-number-delay, 0ms),
		background-color var(--pce-number-dur, 500ms) var(--pce-number-ease, ease) var(--pce-number-delay, 0ms);
}

.pce-card.active .pce-number {
	color: var(--pce-number-color-active, #fff);
	background-color: var(--pce-number-bg-active, var(--pce-number-bg, transparent));
}

/* ---------- Dots (optional, from the original .phase-top / .dots styles) ---------- */

.pce-dots {
	position: absolute;
	top: var(--pce-dots-top, 45px);
	right: var(--pce-dots-right, 45px);
	left: var(--pce-dots-left, auto);
	display: flex;
	gap: var(--pce-dots-gap, 5px);
	z-index: 3;
	pointer-events: none;
}

.pce-dot {
	display: block;
	width: var(--pce-dots-size, 6px);
	height: var(--pce-dots-size, 6px);
	border-radius: 50%;
	background: var(--pce-dots-color, #63c89f);
}

/* ---------- Content ---------- */

.pce-content {
	position: absolute;
	/* The text area is always boxed between the card's left/right padding,
	   so text wraps inside the card instead of overflowing / being clipped. */
	left: var(--pce-pad-left, 40px);
	right: var(--pce-pad-right, 40px);
	top: var(--pce-content-top, auto);
	bottom: var(--pce-content-bottom, 40px);
	margin-left: var(--pce-content-ml, 0);
	margin-right: var(--pce-content-mr, auto);
	width: -moz-fit-content;
	width: fit-content; /* shrink to the text like the original, but never wider than the card */
	max-width: 380px;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
	direction: rtl;
	text-align: right;
	z-index: 3;
	color: #fff;
	pointer-events: none;
	opacity: var(--pce-content-opacity, 0);
	transform: translateY(var(--pce-content-shift, 40px));
	transition:
		opacity var(--pce-content-fade-dur, 800ms) var(--pce-content-fade-ease, ease) var(--pce-content-fade-delay, 0ms),
		transform var(--pce-content-move-dur, 900ms) var(--pce-content-move-ease, cubic-bezier(.22, 1, .36, 1)) var(--pce-content-move-delay, 0ms);
}

.pce-card.active .pce-content {
	opacity: var(--pce-content-opacity-active, 1);
	transform: translateY(0);
}

.pce-heading,
.pce-description {
	max-width: 100%;
}

.pce-heading {
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	margin: 0 0 15px;
}

.pce-description {
	color: #fff;
	font-size: 14px;
	line-height: 1.7;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.pce-card,
	.pce-card > .pce-media,
	.pce-overlay,
	.pce-number,
	.pce-content {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}