.forge-tc {
	--forge-tc-content-width: 30%;
	--forge-tc-content-gap: 40px;
	--forge-tc-content-bg: #ffffff;
	position: relative;
	display: grid;
	grid-template-columns: var(--forge-tc-content-width) 1fr;
	grid-template-rows: auto 1fr;
	row-gap: 24px;
	width: 100%;
}

.forge-tc::before {
	/*
	 * One continuous background spanning the full content-column height (both
	 * grid rows), so it reads as a single solid block instead of separate
	 * boxes behind .forge-tc__content and .forge-tc__nav with a gap between.
	 *
	 * Width intentionally covers the content column AND the gap after it
	 * (matching .forge-tc__track's padding-left below), not just the grid
	 * column itself. An outgoing card during the "Next" transition needs to
	 * travel behind that entire zone before it's fully hidden - masking only
	 * the narrower grid column left a sliver of the card visible in the gap
	 * for a moment, which is what read as a glitchy, hard stop.
	 */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--forge-tc-content-width) + var(--forge-tc-content-gap));
	height: 100%;
	z-index: 2;
	background-color: var(--forge-tc-content-bg);
	pointer-events: none;
}

.forge-tc__content {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.forge-tc__subtitle {
	font-size: 16px;
	color: #4b5952;
}

.forge-tc__title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: #23302a;
}

.forge-tc__nav {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.forge-tc__indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
}

.forge-tc__indicator-item {
	height: 2px;
	flex: 1 1 auto;
	background-color: #d8d8d3;
	border-radius: 2px;
	transition: background-color 0.3s ease;
}

.forge-tc__indicator-item.is-active {
	background-color: #23302a;
}

.forge-tc__next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: 18px;
	color: #23302a;
	white-space: nowrap;
	border-radius: 0;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.forge-tc__next-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.forge-tc__next:hover .forge-tc__next-icon {
	transform: translateX(4px);
}

.forge-tc__viewport {
	/*
	 * Spans the full widget width (under the content column too, not just its
	 * own "cards" column), with a lower z-index than content/nav. This lets an
	 * outgoing card slide behind the (opaque) content column during the "Next"
	 * transition instead of just vanishing at the cards column's own edge.
	 */
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	z-index: 1;
	overflow: hidden;
	/* Claims horizontal gestures for the JS swipe handler, while leaving vertical page scroll to the browser. */
	touch-action: pan-y;
}

.forge-tc__track {
	--forge-tc-cards-per-view: 2;
	--forge-tc-gap: 24px;
	display: flex;
	gap: var(--forge-tc-gap);
	height: 100%;
	box-sizing: border-box;
	/*
	 * Hints the browser to pre-composite this track, including the sliver of
	 * the peeking next card that sits mostly clipped by .forge-tc__viewport's
	 * overflow:hidden. Without this, that mostly-hidden card can be under-
	 * rendered until the "Next" transform brings it fully into view, which
	 * reads as a sudden pop-in/"reload" instead of a smooth reveal.
	 */
	will-change: transform;
	/* Shifts cards to start exactly where the content column ends, so the
	   at-rest layout looks identical to a non-overlapping two-column layout. */
	padding-left: calc(var(--forge-tc-content-width) + var(--forge-tc-content-gap));
}

.forge-tc__card {
	box-sizing: border-box;
	/*
	 * Peek carousel: --forge-tc-peek reserves a slice of the row's total
	 * width (default 0, i.e. no visual change) so the next card's edge shows
	 * past the last fully-visible one. Applies at every breakpoint and for
	 * any cards-per-view count - the viewport's own overflow:hidden still
	 * clips at the widget's edge, so this can't cause page-level overflow.
	 */
	flex: 0 0 calc((100% - var(--forge-tc-peek, 0%) - (var(--forge-tc-cards-per-view) - 1) * var(--forge-tc-gap)) / var(--forge-tc-cards-per-view));
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 320px;
	background-color: #dce7df;
	border-radius: 24px;
	padding: 40px 40px 32px;
}

.forge-tc__card--pinned {
	justify-content: space-between;
}

.forge-tc__card--image {
	/*
	 * !important: the padding control's generated CSS targets plain
	 * `.forge-tc__card`, and Elementor's per-instance selector
	 * (.elementor-element-xyz .forge-tc__card) outweighs this class on
	 * specificity alone. Image cards must always be edge-to-edge regardless
	 * of the padding value set for text cards.
	 */
	padding: 0 !important;
	position: relative;
	overflow: hidden;
}

.forge-tc__card-image {
	/*
	 * Absolutely positioned + inset:0 against the card (position:relative)
	 * instead of width/height:100% in normal flow: the card's height comes
	 * from flex-stretch/min-height, not an explicit `height`, and percentage
	 * heights on a block/flex child don't reliably resolve against that.
	 *
	 * !important on height/width/object-fit: Elementor's own frontend.css
	 * ships `.elementor img { height: auto; max-width: 100%; }`. That's a
	 * class+element selector, which outranks this single class on
	 * specificity alone regardless of load order - it was silently winning
	 * and forcing the image back to its natural aspect-ratio height, which
	 * is the actual reason a gap remained and "Weergave" looked like it had
	 * no effect (with auto height there's no extra box space left for
	 * cover/contain/fill to differ over).
	 * object-fit/object-position values themselves are set inline per
	 * testimonial (see render()); the !important here just has to win over
	 * Elementor's default, not override the inline value.
	 */
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.forge-tc__quote {
	margin-bottom: 32px;
	font-size: 20px;
	line-height: 1.5;
	color: #26322c;
}

.forge-tc__role {
	font-size: 14px;
	color: #4b5952;
}

@media (max-width: 767px) {
	.forge-tc {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		row-gap: var(--forge-tc-content-gap);
	}

	.forge-tc::before {
		/* No overlap effect on the stacked mobile layout, so no masking needed. */
		display: none;
	}

	.forge-tc__content {
		grid-row: 1;
	}

	.forge-tc__viewport {
		/* No overlap effect on the stacked mobile layout: back to its own row. */
		grid-column: 1;
		grid-row: 2;
	}

	.forge-tc__nav {
		grid-row: 3;
		align-self: auto;
	}

	.forge-tc__track {
		padding-left: 0;
	}
}