/* Expereo Team Carousel — a moving strip of cards, each with a biography that wipes up over the photo. */

.etc {
	--etc-per-view: 4;
	--etc-gap: 24px;
	--etc-ratio: 3 / 4;
	--etc-radius: 28px;
	--etc-accent: #d4ff00;
	--etc-on-accent: #0f0a3c;
	--etc-btn: 40px;
	--etc-btn-inset: 20px;
	--etc-bio-pad: 32px;
	/* Pixels per second; the script turns it into a duration once it has measured. */
	--etc-speed: 60;
	--etc-distance: 0px;
	--etc-duration: 0s;
	/* reverse = left to right, normal = right to left. */
	--etc-direction: reverse;
	--etc-wipe: 0.45s;
	--etc-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.etc {
	overflow: hidden;
	width: 100%;
	/* Cards are sized from the widget's own width, not the (much wider) track. */
	container-type: inline-size;
	/* Room for a focus ring and the button's hover scale, which overflow would clip. */
	padding: 4px 0;
}

.etc__track {
	display: flex;
	width: max-content;
	animation: etc-move var(--etc-duration) linear infinite;
	animation-direction: var(--etc-direction);
	will-change: transform;
}

/* Held until the script has measured, so nothing starts at the wrong speed. */
.etc:not(.is-ready) .etc__track {
	animation-play-state: paused;
}

.etc__set {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Travels exactly one set, so the join with the next is invisible. */
@keyframes etc-move {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--etc-distance)), 0, 0); }
}

/* Paused so the plus can be reached, and kept paused while a biography is open
   even if the pointer wanders off, so the card does not slide away mid-read. */
.etc-pausable-yes .etc:hover .etc__track,
.etc-pausable-yes .etc:focus-within .etc__track,
.etc.has-open .etc__track {
	animation-play-state: paused;
}

.etc__card {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc( ( 100cqw - var(--etc-gap) * ( var(--etc-per-view) - 1 ) ) / var(--etc-per-view) );
	min-width: 0;
	margin: 0 var(--etc-gap) 0 0;
	padding: 0;
}

.etc__media {
	position: relative;
	aspect-ratio: var(--etc-ratio);
	overflow: hidden;
	border-radius: var(--etc-radius);
	background: #e8e9ee;
	/* Keeps the clipped, rounded corners while the wipe is animating. */
	isolation: isolate;
}

.etc .etc__img {
	/* Beats Elementor's ".elementor img { height:auto }" so the photo fills its frame. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* The wipe: a clip that opens from the bottom edge upward. */
.etc__bio {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Top padding clears the button, which stays put above the panel. */
	padding: calc( var(--etc-btn) + var(--etc-btn-inset) * 2 ) var(--etc-bio-pad) var(--etc-bio-pad);
	background: var(--etc-accent);
	color: var(--etc-on-accent);
	overflow-y: auto;
	clip-path: inset(100% 0 0 0);
	visibility: hidden;
	/* Hidden only after the wipe has finished closing, so it can be seen going. */
	transition: clip-path var(--etc-wipe) var(--etc-ease), visibility 0s linear var(--etc-wipe);
}

.etc__card.is-open .etc__bio {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path var(--etc-wipe) var(--etc-ease), visibility 0s;
}

.etc__bio-text {
	margin: auto 0;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.etc__bio-text p {
	margin: 0 0 0.8em;
	color: inherit;
}

.etc__bio-text p:last-child {
	margin-bottom: 0;
}

.etc__card.is-open .etc__bio-text {
	opacity: 1;
	transform: none;
	/* Text lands as the wipe is finishing. */
	transition: opacity 0.3s ease calc( var(--etc-wipe) * 0.6 ), transform 0.4s var(--etc-ease) calc( var(--etc-wipe) * 0.6 );
}

.etc__toggle {
	position: absolute;
	top: var(--etc-btn-inset);
	left: var(--etc-btn-inset);
	z-index: 2;
	width: var(--etc-btn);
	height: var(--etc-btn);
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--etc-accent);
	color: var(--etc-on-accent);
	cursor: pointer;
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* A theme's button rules would recolour this on every state otherwise. */
.etc__toggle:hover,
.etc__toggle:focus,
.etc__toggle:focus-visible,
.etc__toggle:active {
	background: var(--etc-accent);
	color: var(--etc-on-accent);
	border: 0;
	box-shadow: none;
}

.etc__toggle:hover {
	transform: scale(1.06);
}

.etc__toggle:focus-visible {
	outline: 2px solid var(--etc-on-accent);
	outline-offset: 3px;
}

/* Two bars, drawn rather than shipped as an icon. Turning the plus 45° makes the cross. */
.etc__plus {
	position: relative;
	width: 40%;
	height: 40%;
	transition: transform var(--etc-wipe) var(--etc-ease);
}

.etc__plus::before,
.etc__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 1px;
}

.etc__plus::before {
	left: 0;
	right: 0;
	top: calc(50% - 1px);
	height: 2px;
}

.etc__plus::after {
	top: 0;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
}

.etc__card.is-open .etc__plus {
	transform: rotate(45deg);
}

.etc__meta {
	padding-top: 20px;
}

.etc__name,
.etc__role {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
}

.etc__name {
	color: #0f0a3c;
}

.etc__role {
	color: #6b6a8a;
}

/* The grid: the same cards, laid out in rows that wrap as the list grows. */
.etc--grid {
	--etc-cols: 4;
	--etc-row-gap: 40px;
	overflow: visible;
	container-type: normal;
	padding: 0;
}

.etc__grid {
	display: grid;
	grid-template-columns: repeat( var(--etc-cols), minmax( 0, 1fr ) );
	column-gap: var(--etc-gap);
	row-gap: var(--etc-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.etc--grid .etc__card {
	width: auto;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.etc {
		--etc-wipe: 0.01s;
	}

	.etc__bio-text,
	.etc__card.is-open .etc__bio-text {
		transition: none;
		transform: none;
	}

	/* No movement, so the strip becomes a row people scroll themselves. The
	   copies that only exist to make the loop seamless are not needed. */
	.etc {
		overflow-x: auto;
	}

	.etc__track {
		animation: none;
	}

	.etc__set--clone {
		display: none;
	}
}

/* Elementor sets flex-wrap: wrap on every container at mobile width. In a column
   container that makes the browser size the container's height from its children
   before they have their final width. A card's height comes from its width (the
   photo ratio), so the container is measured short and the cards spill out of the
   bottom over whatever follows. Nothing here needs to wrap, so turn it off for
   the container that directly holds the widget. */
.e-con.e-flex:has( > .elementor-widget .etc ),
.e-con.e-flex:has( > .e-con-inner > .elementor-widget .etc ),
.e-con > .e-con-inner:has( > .elementor-widget .etc ) {
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
}