/* =========================================================================
   Team Carousel — pure-CSS carousel engine (prefix: .tmc)
   Active slide is full size/opacity; side slides shrink and fade.
   Positions are driven by [data-pos] set by the tiny JS controller.
   ========================================================================= */

.tmc {
	/* fluid base size */
	--tmc-w: clamp(150px, 19vw, 290px);          /* active slide width */
	--tmc-h: calc(var(--tmc-w) * 1.16);          /* active slide height (portrait) */

	/* engine constants */
	--tmc-transition: 600ms;
	--tmc-radius: 0;
	--tmc-fs: 18px;

	/* caption */
	--tmc-cap-text: #FFFFFF;

	/* navigation gradient (dots + arrows) */
	--tmc-nav-grad: linear-gradient(135deg, #1f4b7c, #008bb3);
	--tmc-nav-grad-dim: linear-gradient(135deg, rgba(31,75,124,.3), rgba(0,139,179,.3));
	--tmc-dot-size: clamp(8px, 0.7vw, 12px);
	--tmc-dot-border-w: 1px;
	--tmc-dot-gap: 1px;
	--tmc-gap-color: rgba(255, 255, 255, 0.55);
	--tmc-arrow-size: clamp(34px, 3vw, 46px);
	--tmc-arrow-inset: clamp(2px, 1.5vw, 22px);

	/* per-slide resolved values (overridden per data-pos) */
	--tmc-scale: 1;
	--tmc-tx: 0;
	--tmc-slide-op: 1;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	direction: rtl;
}

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

/* ---- viewport / stage / track ---- */
.tmc-viewport {
	position: relative;
	width: 100%;
}

.tmc-stage {
	position: relative;
	width: 100%;
	height: var(--tmc-h);
	overflow: hidden;
}

.tmc-track {
	position: absolute;
	inset: 0;
}

/* ---- slide ---- */
.tmc-slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--tmc-w);
	height: var(--tmc-h);
	display: flex;
	flex-direction: column;
	border-radius: var(--tmc-radius);
	overflow: hidden;
	background: linear-gradient(180deg, var(--tmc-c1, #0a5c8c) 10%, var(--tmc-c2, #0b1b2b) 100%);
	opacity: var(--tmc-slide-op);
	will-change: transform, opacity;
	transition:
		transform var(--tmc-transition) cubic-bezier(.22,.61,.36,1),
		opacity var(--tmc-transition) ease;
	transform:
		translate(-50%, -50%)
		translateX(var(--tmc-tx))
		scale(var(--tmc-scale));
	cursor: pointer;
}

.tmc-slide.is-far {
	opacity: 0;
	pointer-events: none;
}

/* photo fills the available space above the caption (cutout shows the gradient) */
.tmc-photo {
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
	object-fit: cover;
	object-position: center bottom;
	user-select: none;
	-webkit-user-drag: none;
}

/* bottom caption: bold name | role — sits flush below the photo */
.tmc-caption {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .35em;
	padding: 1.1em .8em .8em;
	background: linear-gradient(to left, #000406 30%, #313d42 100%);
	color: var(--tmc-cap-text);
	font-size: var(--tmc-fs);
	line-height: 1.2;
	text-align: center;
}

.tmc-name { font-weight: 700; }
.tmc-sep  { opacity: .65; font-weight: 300; }
.tmc-role { font-weight: 400; opacity: .95; }

/* ---- per-rank scale / offset / opacity (data-pos set by JS) ---- */
.tmc-slide[data-pos="0"]  { --tmc-scale: 1;   --tmc-tx: 0;                          --tmc-slide-op: 1; }
.tmc-slide[data-pos="1"]  { --tmc-scale: .8;  --tmc-tx: calc(var(--tmc-w) *  1.0);  --tmc-slide-op: .5; }
.tmc-slide[data-pos="-1"] { --tmc-scale: .8;  --tmc-tx: calc(var(--tmc-w) * -1.0);  --tmc-slide-op: .5; }
.tmc-slide[data-pos="2"]  { --tmc-scale: .64; --tmc-tx: calc(var(--tmc-w) *  1.9);  --tmc-slide-op: .25; }
.tmc-slide[data-pos="-2"] { --tmc-scale: .64; --tmc-tx: calc(var(--tmc-w) * -1.9);  --tmc-slide-op: .25; }

/* ---- navigation dots ---- */
.tmc-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.tmc-dot {
	position: relative;
	flex: 0 0 auto;
	width: var(--tmc-dot-size);
	height: var(--tmc-dot-size);
	aspect-ratio: 1;
	padding: 0;
	border: var(--tmc-dot-border-w) solid transparent;
	border-radius: 50%;
	background:
		var(--tmc-nav-grad-dim) padding-box,
		var(--tmc-nav-grad) border-box;
	box-shadow: inset 0 0 0 var(--tmc-dot-gap) var(--tmc-gap-color);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: transform .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tmc-dot:hover { transform: scale(1.15); }
.tmc-dot.is-active { background: var(--tmc-nav-grad) padding-box, var(--tmc-nav-grad) border-box; transform: scale(1.2); }

/* ---- arrows ---- */
.tmc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tmc-arrow-size);
	height: var(--tmc-arrow-size);
	border-radius: 50%;
	color: #fff;
	background: var(--tmc-nav-grad);
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: transform .2s ease, filter .2s ease;
}

.tmc-arrow svg { width: 58%; height: 58%; display: block; }
.tmc-arrow:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.06); }

/* RTL default: prev on the right, next on the left */
.tmc-prev { right: var(--tmc-arrow-inset); }
.tmc-next { left: var(--tmc-arrow-inset); }

/* LTR: swap sides and mirror the chevrons */
.tmc[dir="ltr"] .tmc-prev { right: auto; left: var(--tmc-arrow-inset); }
.tmc[dir="ltr"] .tmc-next { left: auto; right: var(--tmc-arrow-inset); }
.tmc[dir="ltr"] .tmc-arrow svg { transform: scaleX(-1); }

/* ---- focus accessibility ---- */
.tmc-dot:focus-visible,
.tmc-arrow:focus-visible {
	outline: 2px solid #008bb3;
	outline-offset: 2px;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.tmc-slide,
	.tmc-photo {
		transition: opacity .2s ease;
	}
}

/* ---- Elementor editor: lay every slide out in a static row for easy editing ----
   (on the live frontend the JS controller drives the carousel as usual) */
.elementor-editor-active .tmc-stage {
	height: auto;
	overflow: visible;
}
.elementor-editor-active .tmc-track {
	position: static;
	inset: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
	justify-content: center;
}
.elementor-editor-active .tmc-slide {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	transform: none;
	opacity: 1;
}
.elementor-editor-active .tmc-photo { opacity: 1; }
.elementor-editor-active .tmc-arrow { display: none; }