/* =============================================================
   CHE — Teachers carousel  ·  [che_teachers]
   Geometry & palette below were measured off the reference
   block on chepro.thinkific.com/pages/join-che-pro.
   Every value is a custom property so the shortcode can
   override it per instance without extra stylesheets.
   ============================================================= */

.che-tc {
	/* geometry */
	--che-tc-card-w: 132px;
	--che-tc-card-h: 160px;
	--che-tc-gap: 20px;
	--che-tc-radius: 10px;
	--che-tc-avatar: 76px;
	--che-tc-ring: 3px;
	/* 19 + the 1px border puts the avatar 20px below the card's outer edge. */
	--che-tc-pad-top: 19px;
	--che-tc-name-gap: 10px;
	--che-tc-name-size: 15px;
	--che-tc-name-weight: 700;
	--che-tc-name-lh: 1.3;

	/* palette */
	--che-tc-card-bg: #f1ebe4;
	--che-tc-card-border: rgba(0, 0, 0, .07);
	--che-tc-card-shadow: 0 1px 2px rgba(60, 50, 40, .04);
	--che-tc-ring-color: #fff;
	--che-tc-ring-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	--che-tc-name-color: #2c3a1e;
	--che-tc-placeholder: #fff;

	/* motion */
	--che-tc-fade: 14%;
	--che-tc-duration: 40s;
	--che-tc-k: 2;

	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

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

/* ---------- optional heading ---------- */

.che-tc__head {
	text-align: center;
	margin: 0 auto 44px;
	max-width: 46rem;
}

.che-tc__eyebrow {
	margin: 0 0 22px;
	font-family: var(--che-tc-eyebrow-font, "Montserrat", sans-serif);
	font-size: var(--che-tc-eyebrow-size, 15px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--che-tc-accent, #415623);
}

.che-tc__title {
	margin: 0;
	font-family: var(--che-tc-title-font, "Playfair Display", "Lora", Georgia, "Times New Roman", serif);
	font-size: var(--che-tc-title-size, 55px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.005em;
	color: var(--che-tc-title-color, #293f1c);
}

.che-tc__title em {
	font-style: italic;
	color: var(--che-tc-accent, #415623);
}

/* ---------- viewport ---------- */

.che-tc__viewport {
	position: relative;
	overflow: hidden;
	/* Soft fade on both edges. Lives on the static viewport (never on the
	   animated track) so the track keeps its own compositor layer. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--che-tc-fade), #000 calc(100% - var(--che-tc-fade)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--che-tc-fade), #000 calc(100% - var(--che-tc-fade)), transparent 100%);
}

/* ---------- rows ---------- */

.che-tc__row {
	position: relative;
	overflow: hidden;
}

.che-tc__row + .che-tc__row {
	margin-top: var(--che-tc-gap);
}

/* ---------- track ---------- */

.che-tc__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: che-tc-scroll var(--che-tc-duration) linear infinite;
	/* A negative fraction of the duration starts each row at a different
	   point in its loop, so the rows never march in step. Expressed as a
	   multiplier so it stays correct when JS refines the duration. */
	animation-delay: calc(var(--che-tc-duration) * var(--che-tc-offset, 0));
	/* Deliberately never paused on hover — the rows run continuously.
	   The only thing that stops them is prefers-reduced-motion, below. */
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.che-tc__row--reverse .che-tc__track {
	animation-direction: reverse;
}

/* The track holds --che-tc-k identical sets, so shifting it by exactly
   -100% / k lands the next set precisely where the previous one was —
   a seamless loop that stays exact at any container width. */
@keyframes che-tc-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-100% / var(--che-tc-k)), 0, 0);
	}
}

.che-tc__set {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
}

/* ---------- card ---------- */

.che-tc__card {
	flex: 0 0 auto;
	width: var(--che-tc-card-w);
	height: var(--che-tc-card-h);
	margin-right: var(--che-tc-gap);
	padding: var(--che-tc-pad-top) 8px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--che-tc-card-bg);
	border: 1px solid var(--che-tc-card-border);
	border-radius: var(--che-tc-radius);
	box-shadow: var(--che-tc-card-shadow);
	overflow: hidden;
}

.che-tc__avatar {
	flex: 0 0 auto;
	width: var(--che-tc-avatar);
	height: var(--che-tc-avatar);
	border-radius: 50%;
	background: var(--che-tc-placeholder);
	border: var(--che-tc-ring) solid var(--che-tc-ring-color);
	box-shadow: var(--che-tc-ring-shadow);
	overflow: hidden;
}

.che-tc__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
}

.che-tc__name {
	margin: var(--che-tc-name-gap) 0 0;
	font-family: var(--che-tc-name-font, inherit);
	font-size: var(--che-tc-name-size);
	font-weight: var(--che-tc-name-weight);
	line-height: var(--che-tc-name-lh);
	letter-spacing: 0;
	color: var(--che-tc-name-color);
	overflow-wrap: break-word;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
	.che-tc {
		--che-tc-fade: 9%;
	}

	.che-tc__head {
		margin-bottom: 32px;
	}

	.che-tc__title {
		font-size: var(--che-tc-title-size-mobile, 34px);
	}

	.che-tc__eyebrow {
		font-size: 13px;
		margin-bottom: 16px;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.che-tc__track {
		animation: none;
	}

	.che-tc__row {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.che-tc__row::-webkit-scrollbar {
		display: none;
	}
}