.ifc-carousel-wrap {
	width: 100%;
	overflow: visible;
	padding: 40px 0 70px;
	box-sizing: border-box;
}

.ifc-carousel {
	--ifc-card-w: 220px;
	--ifc-card-h: 300px;
	--ifc-gap: -60px;
	--ifc-hover-scale: 1.12;
	--ifc-transition-speed: 400ms;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	width: 100%;
}

.ifc-card {
	/* --ifc-rotate and --ifc-rise are set per-card via inline style,
	   computed server-side so the curve always renders even without JS. */
	position: relative;
	width: var(--ifc-card-w);
	height: var(--ifc-card-h);
	margin-left: calc(var(--ifc-gap) / 2);
	margin-right: calc(var(--ifc-gap) / 2);
	flex-shrink: 0;
	transform-origin: bottom center;
	transform: rotate(var(--ifc-rotate, 0deg)) translateY(calc(-1 * var(--ifc-rise, 0px))) scale(1);
	transition: transform var(--ifc-transition-speed) cubic-bezier(0.22, 1, 0.36, 1),
		z-index 0s var(--ifc-transition-speed);
	will-change: transform;
	cursor: pointer;
}

.ifc-card:first-child {
	margin-left: 0;
}

.ifc-card:last-child {
	margin-right: 0;
}

.ifc-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 18px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	user-select: none;
}

.ifc-card-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	pointer-events: auto;
}

/* Hover / active state: lifts to top, straightens slightly, enlarges smoothly.
   z-index applies with 0 delay here (instant), while the base rule above
   delays the z-index reset until the shrink animation finishes. */
.ifc-card:hover,
.ifc-card.ifc-hover {
	z-index: 999 !important;
	transform: rotate(calc(var(--ifc-rotate, 0deg) * 0.2))
		translateY(calc(-1 * (var(--ifc-rise, 0px) + 30px)))
		scale(var(--ifc-hover-scale, 1.12));
	transition: transform var(--ifc-transition-speed) cubic-bezier(0.22, 1, 0.36, 1),
		z-index 0s 0s;
}

/* While actively scrolling on mobile, transform updates are driven frame-by-
   frame by JS to follow the scroll position - so we disable the transition
   during scroll to avoid a laggy "catching up" look. Transition returns once
   scrolling stops, so taps/hover still animate smoothly. */
.ifc-carousel.ifc-scrolling .ifc-card {
	transition: none !important;
}

/* Small screens: allow horizontal swipe-scrolling while keeping the full
   curved/arched card layout intact - nothing is flattened or simplified,
   you just scroll through the same arch. */
@media (max-width: 768px) {
	.ifc-carousel-wrap {
		overflow-x: auto;
		overflow-y: visible;
		/* NOTE: overflow-y: visible above is a fallback for non-supporting
		   browsers only. Per spec, once overflow-x is scrollable, an
		   overflow-y of "visible" computes to "auto" instead - so this
		   axis clips in practice. The padding-top below reserves enough
		   real space inside the scrollable box so the lifted/enlarged
		   active card never needs to exceed it, which avoids the clip
		   without fighting the browser's forced "auto" behavior. */
		padding-top: calc(
			var(--ifc-max-rise, 90px) + 30px +
			(var(--ifc-card-h, 300px) * (var(--ifc-hover-scale, 1.12) - 1)) +
			20px
		);
		padding-bottom: 60px;
		/* Extra side padding so the tilted/lifted edge cards of the arch
		   aren't visually clipped by the screen edge. */
		padding-left: 10vw;
		padding-right: 10vw;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* old Edge/IE */
	}

	.ifc-carousel-wrap::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	.ifc-carousel {
		justify-content: flex-start;
		width: max-content;
		min-width: 100%;
	}
}